Linearer Farbverlauf ohne Bilder mit CSS3

CSS hat sich längst als die Methode der Wahl für das Design von Webseiten etabliert. Die Fähigkeiten der Cascading Style Sheets werden aber immer größer. Die Zeit wird kommen, da wird es verpönt sein, für einfache Farbgradienten Bilder zu verwenden. Heute werden dazu aber zum größten Teil noch Bilder eingesetzt, da es einfach einfacher ist. In diesem Artikel will ich auf die Möglichkeiten von CSS3 eingehen, Farbgradienten mit wenig Zeilen Code ohne Bilder zu realisieren.

Das Ganze ist auch gar nicht sonderlich schwierig. Das Endprodukt dieses kleinen Tutorials sollte so aussehen, ein einfacher Farbverlauf – ohne Verwendung von Bildern. Hier eine Demo.

Aktueller Stand

Das offizielle W3C-Element linear-gradient wird momentan noch von keinem einzigen Browser unterstützt (Stand Juli 2011). -moz-linear-gradient (Firefox) und -o-linear-gradient (Opera) sind vom Aufbau aber identisch und funktionieren auch so, wie der in Zukunft wahrscheinlich kommende Standard. Lineare Gradienten in Webkit-Browsern und im Internet Explorer funktionieren etwas anders.

Firefox, Opera und W3C

Der Vorschlag des W3C für einfache lineare Farbgradienten sieht wie folgt aus:

#div {
    background: linear-gradient(top, #6A96FF, #12266D);
    }

Das CSS-background-Element enthält den linear-gradient-Befehl mit je drei Attributen. Davon steht das erste für den Startpunkt des Gradienten, das zweite für den Startpunkt-Farbwert und das dritte für den Endpunkt-Farbwert. Wie gesagt unterstützt derzeit noch kein einziger Browser diesen offiziellen Entwurf. Die proprietären Firefox- bzw. Opera-Befehle funktionieren aber analog dazu.

#div {
    background: -moz-linear-gradient(top,  #6A96FF,  #12266D);	//für Mozilla Firefox
    background: -o-linear-gradient(top, #6A96FF, #12266D); //für Opera
    }

Safari und Chrome

Etwas anders verhält sich das Ganze bei den Webkit-Browsern, wie Safari oder Chrome. Die Befehlsstruktur sieht etwas anders aus.

#div {
    background: -webkit-gradient(linear, left top, left bottom, from(#6A96FF), to(#12266D));
    }

Bei der Webkit-Methode muss als erstes die Gradient-Art bestimmt werden. In unserem Fall wollen wir einen einfachen, linearen Farbverlauf haben. Die beiden darauffolgenden Attribute bestimmen Start- und Endpunkt. Es können wie im Beispiel Worte, aber auch X/Y-Werte verwendet werden. Die beiden letzten Attribute beschreiben Startpunkt- bzw. Endpunkt-Farbwert.

Update: Für Webkit-Browser gibt es nun auch eine Firefox- und Opera-ähnliche Syntax. Die alte wird nicht mehr eingesetzt. Damit nähern sich Chrome und Safari der offiziellen W3C-Methode Schritt für Schritt an:

#div {
    background: -webkit-linear-gradient(top,  #6A96FF,  #12266D);	//für Chrome und Safari
    }

Internet Explorer

Noch etwas komplizierter ist ein von Bilddateien freier Farbverlauf beim Internet Explorer. Hier kommen die proprietären Internet Explorer-Filter zum Einsatz.

#div {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6A96FF', endColorstr='#12266D');
    }

Die Internet Explorer-Methode konnte ich selbst leider nicht testen, da ich unter Linux unterwegs bin, und keinen Internet Explorer zur Hand habe. Den Befehl hab ich auf webdesignerwall.com aufgeschnappt. Start- und Endpunkt kann nicht eingestellt werden, so scheint beispielsweise ein Farbverlauf von einer Ecke zur anderen nicht möglich. Einzig die Farbwerte können angepasst werden.

Update: Auch der Internet Explorer versteht nun die die von den anderen Browsern bereits bekannte Syntax mit -ms-Präfix.

#div {
    background: -ms-linear-gradient(top,  #6A96FF,  #12266D);	//für Internet Explorer ab Version 10
    }

Fazit

Derzeit kocht noch fast jede Browser-Engine ihr eigenes Süppchen. Es ist aber nur eine Frage der Zeit, bis ein offizieller Standard anerkannt und von allen großen Browsern unterstützt werden wird. Ob es sich heute bereits auszahlt, auf Code, anstatt auf Bilder zu setzen, muss jeder für sich selbst entscheiden und dabei Vor- und Nachteile gegeneinander abwiegen.