Etwas verspätet nun auch der vierte Teil von CSS3 im Detail!

Dieses mal erwarten euch lineare und radiale Farbverläufe (engl. gradients) in CSS, mit deren Hilfe wir einige ganz hübsche Effekte erzielen können. Benutzt werden sie überall dort, wo wir eine url() angeben können. In den folgenden Beispielen werden wir sie aber im Zusammenhang mit background verwenden, indem wir statt einem Hintergrundbild den gewünschten Verlauf angeben.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

(IE ab Version 10)

Syntax

Prinzipiell muss man zwischen zwei Arten von Farbverläufen unterscheiden:

1. Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
2. Radiale Verläufe, kreisförmiger Farbverlauf zwischen zwei Farben

Linearer Verlauf

Zuerst einmal ein einfacher, linearer Verlauf:

1
2
3
4
5
6
7
8

div.lin_grad {
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#adf)); /* Safari, Chrome */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome - neue Syntax! */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}

Anmerkung: Das Firefox Logo im Vordergrund wird als zusätzlicher Background eingebunden, siehe Teil 2.

Prinzipiell haben die Verlauf-Funktionen 4 Argumente um einen Farbverlauf näher zu beschreiben. Die Argumente sind einmal linear oder gradient, welche angeben um welchen Typ von Verlauf es sich handelt. Firefox bietet 2 separate Funktionen dafür an, Safari/Chrome nutzen eine Funktion für beide Typen. Es folgen dann der Start- bzw. Endpunkt und somit die Richtung des Verlaufs. Zu guter Letzt werden noch die Farbcodes für Start- und Endfarbe benötigt.

Bei den Webkit-Browsern erscheint mir dir Syntax insgesamt etwas komplizierter. Also es kann sein, dass es auch kürzer geht aber ich bin ehrlich gesagt froh, dass ich überhaupt einen funktionierenden Verlauf mit Safari hinbekommen habe.

Update: Mittlerweile hat Webkit die Syntax an die von Gecko angepasst, auch Opera unterstützt ab Version 11.10 lineare Verläufe mit einem eigenen Prefix.

Update 2: Die heute herausgegebene Platform Preview des Internet Explorer 10 unterstützt beide Arten von Verläufen.

Update 3: Opera 12 11.6 unterstützt radiale Verläufe per Prefix.

Radialer Verlauf

1
2
3
4
5
6
7
8

div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
background:-webkit-radial-gradient(center, #fff, #adf); /* Safari, Chrome - neue Syntax! */
background:-o-radial-gradient(center, #fff, #adf); /* Opera, funktioniert noch nicht, aber sicherlich bald */
background:-ms-radial-gradient(center, #fff, #adf); /* IE */
background:radial-gradient(center, #fff, #adf); /* W3C Standard */
}

Um einen radialen Verlauf zu bekommen, gehen wir genauso vor wie oben. Im Firefox ist es ganz einfach: Startpunkt, Startfarbe, Endfarbe. Webkit bereitet mir etwas Kopfzerbrechen.. soweit ich das verstanden habe, muss man hier zwei Kreise angeben mit jeweils einem Startpunkt und den Radius des Kreises, sowie Start- und Endfarbe.

Ich will das jetzt mal nicht weiter vertiefen und euch verwirren. Am besten ihr lest euch mal die Spezifikationen durch..

-moz-linear-gradient und -moz-radial-gradient für Firefox und -webkit-gradient für Safari und Chrome (beides auf Englisch).

Fazit

Background Gradients könnten in Zukunft recht interessant werden. Lineare Verläufe werden heutzutage bereits auf fast allen Webseiten eingesetzt (Hintergründe, Buttons). Radiale Verläufe machen sich sicherlich gut, um bestimmte Sachen zu highlighten. Der größte Vorteil ist, dass somit keine Grafiken mehr gebraucht werden, die sinnlos Zeit und Bandbreite vergeuden. Die Syntax ist zwar nicht die einfachste aber mit etwas Geduld und Übung lernt man sie schon kennen. Ich hoffe, dass Webkit hier trotzdem nochmal nachbessert und die Funktion irgendwie vereinfacht. Mit Firefox hingegen kommt man recht schnell ans Ziel.

Lange Rede, kurzer Sinn: Probiert euch am besten selbst mal an den Verläufen, kombiniert eventuell das Ganze dann noch mit mehreren Backgrounds und/oder Background-Size und ihr werdet auf einige lustige Ergebnisse stoßen. Viel Spaß damit.