Beispiel
Das folgende Beispiel zeigt einen linearen Verlauf, der an der Spitze beginnt. Es beginnt rot zu gelb Übergang, dann blau:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
Versuch es selber " Definition und Verwendung
Die linear-gradient() Funktion erzeugt ein "image" , die einen linearen Gradienten von Farben darstellt.
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 Startpunkt und eine Richtung festgelegt (or an angle) zusammen mit dem Farbverlauf.
Beispiel für Linear Gradient:
| Version: | CSS3 |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Funktion voll unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Funktion | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10,0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS-Syntax
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| Wert | Beschreibung |
|---|---|
| direction | Definiert einen Ausgangspunkt und eine Richtung (or an angle) zusammen mit dem Farbverlauf. |
| color-stop1, color-stop2,... | Farbe Anschläge sind die Farben, die Sie unter fließende Übergänge zu machen möchten. Dieser Wert besteht aus einem Farbwert, gefolgt von einer optionalen Stopposition (a percentage between 0% and 100% or a length along the gradient axis) . |
Mehr Beispiele
Beispiel
Ein linearer Gradient, der von der linken Seite beginnt. Es beginnt rot zu blau Übergang:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} Versuch es selber " Beispiel
Ein linearer Gradient, der links oben beginnt (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} Versuch es selber " Beispiel
Ein linearer Gradient mit einem bestimmten Winkel:
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} Versuch es selber " Beispiel
Ein linearer Gradient mit mehreren Farbstopps:
#grad {
/* 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 " Beispiel
Ein linearer Gradient mit Transparenz:
#grad {
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 " Verwandte Seiten
CSS Tutorial: CSS3 Gradients
CSS - Funktionen Referenz