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):
Beispiel für Farbverlauf (linear-gradient) vom W3C

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.

Flattr this!

8 Gedanken zu „linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3“

  1. Man ist ja richtiggehend erstaunt, dass auch der IE Verläufe kann. Immerhin ist die Syntax schräg.
    Oben sollte es übrigens „Hexadezimalwerte“ heißen statt „Heximalwerte“, nehme ich an.

  2. Hallo Sven,

    herzlichen Dank für dieses Artikel.

    Für den Firefox und Webkit-Browser (Chrome und Safari) habe ich Farbverläufe mit gradient (CSS3) in meinem Blog bereits realisiert. Filter für den Internet Explorer hatte ich die Ersatzlösung mit Filter erst einmal gelassen, aber nach diesem Türchen des CSS3-Adventskalenders nun doch ergänzt.

    Hilfreich dabei war mir übrigens der CSS Gradient Generator unter http://www.display-inline.fr/projects/css-gradient/ , den ich hierfür empfehlen kann.

    Freue mich schon auf die weiteren Türchen des Adventskalenders.

    Beste Grüße
    Dieter

Kommentare sind geschlossen.