Farbverlauf mit CSS 3

Zu den neuen Möglichkeiten, die CSS 3 bietet, gehören auch Farbverläufe. Man setzt sie ja gerne als Hintergrund ein, um mehr Tiefe zu gewinnen oder besonders seit dem Web 2.0-Hype auch als feines Design bei Schaltflächen und Formularelementen.

Bisher wurden Farbverläufe meist mit einer entsprechenden Grafik realisiert, die den Elementen als Hintergrund zugewiesen wurde. Das ist nun mit CSS 3 wesentlich leichter zu machen – und man braucht kein Grafikprogramm mehr, um den Verlauf zu erzeugen und als Bild zu speichern. Der gewünschte Verlauf wird mit CSS 3 einfach definiert.

Um einen linearen Farbverlauf von oben nach unten und zum Beispiel von rot nach weiß zu erzeugen, brauchen Sie folgende Definitionen in Ihrem Stylesheet:

background: #f00;
background:  -moz-linear-gradient(top, #f00, #fff);
background:  -webkit-gradient(linear, left top, left bottom, from(#f00), to(#fff));

Im Beispiel ist die erste Zeile ein einfaches Fallback auf rot, das jeder Browser beherrscht. Die zweite Zeile definiert den Verlauf für den aktuellen Firefox und die dritte für Safari und Chrome. Dem Internet Explorer muss man dabei noch mit einem Gradienten-Filter unter die Arme greifen, damit auch er den Verlauf ohne Grafikbildchen erzeugen kann:

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(start Colorstr= #ffff0000, endColorstr= #ffffffff)”;

filter: “progid:DXImageTransform.Microsoft.gradient(start Colorstr= #ffff0000, endColorstr= #ffffffff)”;