linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3

Einen einfachen Farbverlauf für Hintergünde in CSS3 zu erstellen bedarf schon etwas Schreibarbeit… Als Webkit 2008 begann die Eigenschaft umzusetzen, orientierten sie sich an der Spezifikation für Canvas. Mozilla entwarf daraufhin einen einfacheren Syntax und dieser Syntax ist derzeit auch der empfohlene des W3C. Bisher ist der Syntax nicht angeglichen.

Als Farbwerte können definierte Farbnamen, Hexadezimalwerte, RGB und HSL, oder RGBa und HSLa verwendet werden (aber was das alles bedeutet, zeigen wir in einem anderen Adventskalender Türchen). Jetzt erstmal ein Code-Beispiel:

linear-gradient(yellow, blue);
linear-gradient(top, yellow, blue);
linear-gradient(bottom, blue, yellow);
linear-gradient(-90deg, yellow, blue);
linear-gradient(270deg, yellow, blue);
linear-gradient(top, yellow 0%, blue 100%);

Alle diese Schreibweisen ergeben diesen Verfauf (theoretisch):

Grundsätzlich sind 3 Werte wichtig:

1. Wert: Beginnpunkt des Verlaufs / Gradzahl (also Richtung)
2. erste Farbe (ab Start)
3. zweite Farbe (bis Ende)

Für die verschiedenen Browser übersetzt, bedeutet das dann folgendes.

.linear-top {
/* Für WebKit (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom, ⏎
from(#c8482c), to(#fff));
/* Für Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #c8482c, #fff);
/* aktueller W3C working draft */
background: linear-gradient(top, #c8482c, #fff);

/* Für Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff);
zoom: 1;
/* Für Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff)";
}

Ja, auch der Internet Explorer kann einfache Farbverläufe. Über die Filter-Eigenschaft kann ein Farbverlauf auch im IE6-IE8 sichtbar gemacht werden. Verlauf mit 4 verschiedenen Richtungen:

Und der Quellcode der verschiedenen Richtungen:

.linear-right {
background: -webkit-gradient(linear, right top, left top, ⏎
from(#c8482c), to(#fff));
background: -moz-linear-gradient(right, #c8482c, #fff);
background: linear-gradient(right, #c8482c, #fff);

filter: progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=1, startColorstr=#ffffff, endColorstr=#c8482c);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=1, startColorstr=#ffffff, endColorstr=#c8482c)";
zoom: 1;
}

.linear-bottom {
background: -webkit-gradient(linear, left bottom, left top, ⏎
from(#c8482c), to(#fff));
background: -moz-linear-gradient(bottom, #c8482c, #fff);
background: linear-gradient(bottom, #c8482c, #fff);

filter: progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=0, startColorstr=#ffffff, endColorstr=#c8482c);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=0, startColorstr=#ffffff, endColorstr=#c8482c)";
zoom: 1;
}

.linear-left {
background: -webkit-gradient(linear, left top, right top, ⏎
from(#c8482c), to(#fff));
background: -moz-linear-gradient(left, #c8482c, #fff);
background: linear-gradient(left, #c8482c, #fff);

filter: progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=1, startColorstr=#c8482c, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient⏎
(GradientType=1, startColorstr=#c8482c, endColorstr=#ffffff)";
zoom: 1;
}

praktisches Beispiel:

Suchformular Screenshot:

IE-Ansicht (6-8):

CSS:

.searchForm {
/* Beispiel-Code von Tag 1 */
...
    
background: -webkit-gradient(linear, left top, left bottom,  ⏎
from(#E0EDF3), to(#ffffff));
background: -moz-linear-gradient(top, #E0EDF3, #ffffff);
background: linear-gradient(top, #E0EDF3, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient ⏎
(startColorstr=#E0EDF3, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient ⏎
(startColorstr=#E0EDF3, endColorstr=#ffffff)";
}
.searchButton {
background-color: #30393D; 
border: none; 
color: #FFF; 
padding: 1px 4px;
margin-left: -5px;
height: 23px;
width: 68px;
vertical-align: middle;
    
-moz-border-radius: 0 20px 20px 0;
-webkit-border-radius: 0 20px 20px 0;
border-radius: 0 20px 20px 0;
    
background: -webkit-gradient(linear, left top, left bottom,  ⏎
from(#56666d), to(#30393D));
background: -moz-linear-gradient(top, #56666d, #30393D);
background: linear-gradient(top, #56666d, #30393D);
filter: progid:DXImageTransform.Microsoft.gradient ⏎
(GradientType=0, startColorstr=#56666d, endColorstr=#30393D);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient ⏎
(GradientType=0, startColorstr=#56666d, endColorstr=#30393D)";
}
/* IE7 Fix */
*+html .searchButton {
vertical-align: top;
margin-top: 1px;
zoom: 1;
}

Demo

UPDATE: Webkit, Opera und IE9 haben den Syntax geändert/erneuert
Demo-Datei zu CSS3 linear-gradient (Verlauf) mit IE9-Support aufrufen

Browser-Support:

Safari 4+, Chrome 2+, Firefox 3.6+, IE 6-8, Opera 11.10beta
IE9 unterstützen die Methode mit SVG-Hintergrundbildern

Am Tag 4 geht es im Webstandard-Blog mit „Detailierter Verlauf – CSS3 Adventskalender“ weiter.