CSS3-Gradienten können Sie fließende Übergänge zwischen zwei oder mehreren bestimmten Farben anzeigen.
Früher hatte man Bilder für diese Effekte zu nutzen. Jedoch durch CSS3-Gradienten können Sie Downloadzeit und Bandbreitennutzung zu reduzieren. Darüber hinaus Elemente mit Steigungen besser aussehen, wenn vergrößert, weil der Gradient vom Browser erzeugt wird.
CSS3 definiert zwei Arten von Gradienten:
- Linearen Verläufen (geht nach unten / oben / links / rechts / schräg)
- Radial Gradients (definiert durch ihre Mitte)
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit-, -moz- oder -o- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 linearen Verläufen
eines linearen Gradienten zu erstellen Sie mindestens zwei Farbstopps definieren müssen. Farbe Anschläge sind die Farben, die Sie unter fließende Übergänge zu machen möchten. Sie können auch einen Ausgangspunkt und eine Richtung (oder einen Winkel) zusammen mit dem Farbverlauf eingestellt.
Syntax
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Linear Gradient - von oben nach unten (das ist Standard)
Das folgende Beispiel zeigt einen linearen Verlauf, der an der Spitze beginnt. Es beginnt rot zu gelb Übergang:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Versuch es selber " Linear Gradient - von links nach rechts
Das folgende Beispiel zeigt einen linearen Verlauf, der von der linken Seite beginnt. Es beginnt rot zu gelb Übergang:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Versuch es selber " Linear Gradient - Diagonal
Sie können durch die Angabe sowohl die horizontalen und vertikalen Startpositionen einen Gradienten diagonal zu machen.
Das folgende Beispiel zeigt einen linearen Verlauf, der links oben beginnt (und geht nach rechts unten). Es beginnt rot zu gelb Übergang:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Versuch es selber " Mit Angles
Wenn Sie mehr Kontrolle über die Richtung des Gradienten möchten, können Sie einen Winkel, anstelle der vorgegebenen Richtungen (nach unten, nach oben, nach rechts, nach links, nach rechts unten, etc.) zu definieren.
Syntax
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
Der Winkel wird als Winkel zwischen einer horizontalen Linie und dem Gradienten Zeile angegeben.
Das folgende Beispiel zeigt, wie Winkel auf linearen Gradienten zu verwenden:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Versuch es selber " Verwenden mehrerer Farb Stops
Das folgende Beispiel zeigt einen linearen Gradienten (von oben nach unten) mit mehreren Farbstopps:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Versuch es selber " Das folgende Beispiel zeigt, wie eines linearen Gradienten zu erzeugen (von links nach rechts) mit der Farbe des Regenbogens und etwas Text:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Versuch es selber " Mit Transparenz
CSS3 Gradienten unterstützen auch die Transparenz, die verwendet werden können, Fading-Effekte zu erzeugen.
So fügen Sie Transparenz, verwenden wir die rgba() Funktion , um die Farbstopps zu definieren. Der letzte Parameter in der rgba() Funktion kann ein Wert von 0 bis 1 sein, und es definiert die Transparenz der Farbe: 0 volle Transparenz zeigt, 1 gibt Vollfarbe (keine Transparenz).
Das folgende Beispiel zeigt einen linearen Verlauf, der von der linken Seite beginnt. Es beginnt völlig transparent, in voller Farbe rot Übergang:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Versuch es selber " Wiederholen eines linearen Gradienten
Die sich repeating-linear-gradient() Funktion wird verwendet , lineare Verläufe zu wiederholen:
Beispiel
Eine sich wiederholende linearen Gradienten:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Versuch es selber " CSS3 Radial Gradients
Ein radialer Gradient wird durch seine Mitte definiert.
einen radialen Gradienten zu erzeugen Sie mindestens zwei Farbstopps auch definieren müssen.
Syntax
background: radial-gradient( shape size at position, start-color, ..., last-color );Standardmäßig ist die Form Ellipse, die Größe ist am weitesten-Ecke, und die Position ist Zentrum.
Radial Gradient - Gleichmäßig Spaced Farbe Stopps (dies ist die Standardeinstellung)
Das folgende Beispiel zeigt einen radialen Verlauf mit gleichmäßig verteilten Farbstopps:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Versuch es selber " Radial Gradient - unterschiedlich gestufte Farb Stops
Das folgende Beispiel zeigt einen radialen Verlauf mit unterschiedlich gestufte Farbstopps:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Versuch es selber " Set-Form
Die Formparameter definiert die Form. Sie kann den Wert Kreis oder Ellipse nehmen. Der Standardwert ist Ellipse.
Das folgende Beispiel zeigt einen radialen Verlauf mit der Form eines Kreises:
Beispiel
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Versuch es selber " Die Verwendung von unterschiedlichen Größe Keywords
Die Größe Parameter definiert die Größe des Gradienten. Es kann vier Werte annehmen:
- engst Seite
- weiteste-Seite
- engst Ecke
- weiteste-Ecke
Beispiel
Eine radiale Gradienten mit unterschiedlicher Größe keywords:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Versuch es selber " Wiederholen eines radialen Gradienten
Die repeating-radial-gradient() Funktion wird verwendet , radiale Gradienten zu wiederholen:
Beispiel
Eine sich wiederholende radiale Gradienten:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6» Übung 7 »