Lineare Farbverläufe in CSS mit linear-gradient
Früher benötigte man Bilder, um den Hintergrund von Elementen mit einem Farbverlauf zu versehen. Dabei hatte man den großen Nachteil, dass Grafiken eine bestimmte Größe haben und bei unterschiedlich großen Elementen gestreckt, gestaucht oder wiederholt werden mussten, um die gesamte Breite und Höhe zu füllen und das Ergebnis hierbei war nicht immer zufriedenstellend.
Mittlerweile ist das nicht mehr notwendig. Man kann direkt in CSS Farbverläufe definieren und spart sich dadurch die Erstellung der Grafiken. Auch die Ladezeiten werden verkürzt, da man zusätzliche Serveranfragen für die Bilder spart und im Grunde nur einige wenige CSS-Codezeilen lädt. Die Darstellung im Browser ist außerdem wesentlich angenehmer als mit Bildern.
Unterschieden wird dabei zwischen linearen und radialen Farbverläufen. Bei linearen Verläufen ist der Verlauf von
- oben nach unten
- unten nach oben
- links nach rechts
- rechts nach links
- diagonal von oben links nach unten rechts
- diagonal von unten links nach oben rechts
- diagonal von oben rechts nach unten links
- diagonal von unten rechts nach oben links
Für einen linearen Verlauf wird der Wert linear-gradient verwendet, den man den Eigenschaften background, background-image, border-image, list-style-image und generiertem Content zuweisen kann. Dabei kann man die Richtung, die Farben sowie die dazugehörigen Stopp-Positionen angeben. Nachfolgend ist die Syntax anhand eines einfachen Beispiels abgebildet.
Die Richtung des Farbverlaufs
Die Richtung des Farbverlaufs kann entweder mit Schlüsselwörtern wie z.B. "to right" oder über die Gradzahl angegeben werden, z.B. "90deg" für einen Farbverlauf mit 90° bzw. von links nach rechts. Wenn keine Richtung angegeben wurde, ist der Farbverlauf von oben nach unten, was dem Wert von "to bottom" oder "180deg" entspricht. Nachfolgend ist eine Auflistung über mögliche Richtungsangaben mit Schlüsselwörtern und die dazugehörige Gradzahl abgebildet.
Farbangaben mit Stopp-Positionen
Zu einem Farbverlauf gehören mindestens zwei oder mehr Farben, die man z.B. über den Farbnamen oder Hexadezimal angeben kann. Zu jeder Farbe kann eine Stopp-Position angegeben werden. Bei einem Verlauf geht man von einer geraden Linie aus, die 100% lang ist und, je nachdem welche Richtung für den Verlauf angegeben wurde, der Breite oder Höhe oder der Diagonale des Elements entspricht, für das der Farbverlauf gelten soll. Bei einem zweifarbigen Verlauf hat die erste Farbe standardmäßig die Position 0% und die zweite 100%. Die Zwischentöne werden automatisch vom Browser berechnet.
Wenn man den Beginn und das Ende für den Verlaufsbereich verschieben möchte, braucht man bei der 1. Farbe nur einen Wert über 0% und bei der letzten Farbe einen Wert von unter 100% anzugeben. Beim folgenden Beispiel CSS-Code beginnt der Verlauf erst bei 25% und endet bereits bei 75%. Das bedeutet, die ersten 25% werden mit der gelben Farbe und ab 75% bis zum Ende mit der roten Farbe ohne Verlauf gefüllt.
.selektor {
background: linear-gradient(to right, yellow 25%, red 75%);
}
Wenn man nach der 1. und vor der letzten weitere Farbangaben mit Stopp-Positionen macht, dann erhält man von einer Farbe bis zur nächsten automatisch einen Farbverlauf. Wenn man an diesen Stellen bestimmte Bereiche mit einer Farbe füllen möchte, statt einen Verlauf zu erzeugen, muss man zwei Mal dieselbe Farbe mit einer Stopp-Position angeben. Beim folgenden Beispielcode ist der Bereich 25% - 50% mit der Farbe blau gefüllt. Bei den übrigen Bereichen erhält man einen Farbverlauf.
.selektor {
background: linear-gradient(to right, yellow 0%, blue 25%, blue 50%, pink 75%, red 100%);
}
Browser-Präfixe für den Farbverlauf
Die Implementierung der Farbverläufe in den Browsern nahm eine gewisse Zeit in Anspruch. Früher wurden sie überhaupt nicht unterstützt, später benötigte man bestimmte Browser-Präfixe und bei den neuesten Browsern reicht in der Regel die Syntax gemäß den CSS-Spezifikationen. Wenn man auch die älteren Browser abdecken möchte, kann man für einen zweifarbigen Verlauf von links nach rechts die folgenden Angaben machen.
.selektor {
/* Einfarbiger Fallback für alte Browser */
background: pink;
/* Ab Firefox 3.6 */
background: -moz-linear-gradient(left, pink 0%, red 100%);
/* Ältere Chrome- und Safari-Versionen */
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,pink), color-stop(100%,red));
/* Ab Chrome 10 und Safari 15.1 */
background: -webkit-linear-gradient(left, pink 0%, red 100%);
/* Ab Opera 11.10 */
background: -o-linear-gradient(left, pink 0%, red 100%);
/* Ab IE10 */
background: -ms-linear-gradient(left, pink 0%, red 100%);
/* Offizielle Syntax */
background: linear-gradient(to right, pink 0%, red 100%);
/* Vor IE10 */
filter: progid:DXImageTransform.Microsoft.Gradient(start
Colorstr='pink',
endColorstr='red',
GradientType=1
);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
startColorStr='pink',
endColorStr='red',
GradientType=1
)";
}Beispiel von links nach rechts mit 3 Farben
.selektor {
background: yellow;
background: -moz-linear-gradient(left, yellow 0%, blue 50%, red 100%);
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,yellow), color-stop(50%,blue), color-stop(100%,red));
background: -webkit-linear-gradient(left, yellow 0%, blue 50%, red 100%);
background: -o-linear-gradient(left, yellow 0%, blue 50%, red 100%);
background: -ms-linear-gradient(left, yellow 0%, blue 50%, red 100%);
background: linear-gradient(to right, yellow 0%, blue 50%, red 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(
startColorstr='yellow',
endColorstr='red',
GradientType=1
);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
startColorStr='yellow',
endColorStr='red',
GradientType=1
)";
}
Beispiel von oben nach unten mit 3 Farben
.selektor {
background: yellow;
background: -moz-linear-gradient(top, yellow 0%, blue 50%, red 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,yellow), color-stop(50%,blue), color-stop(100%,red));
background: -webkit-linear-gradient(top, yellow 0%, blue 50%, red 100%);
background: -o-linear-gradient(top, yellow 0%, blue 50%, red 100%);
background: -ms-linear-gradient(top, yellow 0%, blue 50%, red 100%);
background: linear-gradient(to bottom, yellow 0%, blue 50%, red 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(
startColorstr='yellow',
endColorstr='red',
GradientType=0
);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
startColorStr='yellow',
endColorStr='red',
GradientType=0
)";
}
Beispiel für diagonalen Verlauf oben links bis unten rechts mit 3 Farben
.selektor {
background: yellow;
background: -moz-linear-gradient(-45deg, yellow 0%, blue 50%, red 100%);
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,yellow), color-stop(50%,blue), color-stop(100%,red));
background: -webkit-linear-gradient(-45deg, yellow 0%, blue 50%, red 100%);
background: -o-linear-gradient(-45deg, yellow 0%, blue 50%, red 100%);
background: -ms-linear-gradient(-45deg, yellow 0%, blue 50%, red 100%);
background: linear-gradient(135deg, yellow 0%, blue 50%, red 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(
startColorstr='yellow',
endColorstr='red',
GradientType=0
);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
startColorStr='yellow',
endColorStr='red',
GradientType=0
)";
}
Beispiel für diagonalen Verlauf unten links bis oben rechts mit 3 Farben
.selektor {
background: yellow;
background: -moz-linear-gradient(45deg, yellow 0%, blue 50%, red 100%);
background: -webkit-gradient(linear, left bottom, right top,
color-stop(0%,yellow), color-stop(50%,blue), color-stop(100%,red));
background: -webkit-linear-gradient(45deg, yellow 0%, blue 50%, red 100%);
background: -o-linear-gradient(45deg, yellow 0%, blue 50%, red 100%);
background: -ms-linear-gradient(45deg, yellow 0%, blue 50%, red 100%);
background: linear-gradient(45deg, yellow 0%, blue 50%, red 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(
startColorstr='yellow',
endColorstr='red',
GradientType=0
);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
startColorStr='yellow',
endColorStr='red',
GradientType=0
)";
}
Da die älteren IE-Versionen keine diagonalen Verläufe kennen, muss man sich entscheiden, ob die Verläufe von links nach rechts oder von oben nach unten gehen sollen. Das wird über GradientType festgelegt. Der Wert 1 ist für horizontal und 0 für vertikal.