Um einen Hintergrund-Verlauf (gradient) mit CSS3 umzusetzen, musst du derzeit für Webkit (Safari, Chrome) und Mozilla (Firefox) noch unterschiedlichen CSS-Code nutzen. Da Internet Explorer und Opera derzeit leider noch keine CSS3 Verläufe unterstützen, kannst du für diese Browser entweder eine alternative Hintergrund-Farbe wählen, oder wie gewohnt ein JPG-Image als Verlauf einsetzen.

CSS3-Verlauf für Safari, Google Chrome (Webkit)

Hintergrund-Verläufe mit CSS3

Der CSS-Code für dieses Beispiel sieht so aus:

[php]
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9900), to(#99FFCC));
[/php]

Erklärung:
Als ersten Wert gibst du an, ob der Verlauf linear oder radial sein soll. Dann folgen die x- und y-Koordinaten für die Anfangsposition des Verlaufs (0, 0 also links oben). Danach gibst du die x- und y-Koordinaten für die Endposition des Verlaufs an (0, 100%, also links unten). Als nächstes gibst du die Farben des Verlaufs an, also von orange zu Türkis (from(#FF9900), to(#99FFCC)).

Firefox Browser (Mozilla)

Hintergrund-Verläufe mit CSS3

Der Code für dieses Beispiel sieht so aus:

[php]
background: -moz-linear-gradient(top, #00CCCC, #00FF99);
[/php]

Erklärung:
Die Art des Verlaufs (linear oder radial) wird bereits im Wert selbst festgelegt (moz-linear-gradient). Erster Wert ist die Position für den Beginn des Verlaufs (hier: top). Dann folgt die erster Farbe (#00CCCC) gefolgt von der zweiten Farbe (#00FF99).

Weitere Optionen

Natürlich kannst du den Verlauf auch nur bis zu einem bestimmten Punkt laufen lassen.

Hintergrund-Verläufe mit CSS3

Der Code für dieses Beispiel sieht so aus:

[php]
background: #CCFFCC; /*alternative Hintergrundfarbe für IE*/
background: -webkit-gradient(linear, 0 0, 0 20%, from(#CCFF66), to(#fff));
background: -moz-linear-gradient(top, #CCFF66, #fff 20%);
[/php]

Willst du einen mehrfarbigen Verlauf erstellen, nutzt du die Funktion Color-Stop:

Hintergrund-Verläufe mit CSS3

Der Code sieht dann so aus:

[php]
background:#CCFFCC; /*alternative Hintergrundfarbe für IE*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCFF66), color-stop(20%, white), color-stop(60%, yellow));
background: -moz-linear-gradient(top, #CCFF66, white 20%, yellow 60%);
[/php]

Für Mozilla gibst du an, dass du bei 20% des Verlaufs bei Weiß angekommen sein willst. Für Webkit nutzt du einen zweiten color-stop und legen fest, bei wie viel Prozent welche Farbe erscheinen soll.

Wie du siehst kannst du mit CSS3 gradients schnell wunderschöne Verläufe erzeugen. Für ältere Browser-Versionen, sowie IE6, 7, 8 und Opera kannst du, falls der Verlauf für das Design nicht unbedingt notwendig ist, eine alternative Hintergrund-Farbe wählen. So kannst du das Laden eines extra Bildes vermeiden.

Ich hoffe dir hat mein kleiner Beitrag über CSS3-Verläufe gefallen :-)

Was denkst du über den Einsatz von CSS3? Würdest du die neuen CSS3-Methoden bereits einsetzen, und in Kauf nehmen, dass deine Seite nicht in allen Browsern gleich aussieht. Oder denkst du es ist sinnvoller abzuwarten, bis wirklich alle Browser CSS3 unterstützen?

Deine Meinung zum Thema interessiert mich sehr. Schreibe mir doch einfach einen Kommentar!