Farbverläufe mit CSS3 und ohne Grafik

Jahrelang haben sich Webdesigner mit GIF- in letzter Zeit auch mit PNG-Grafiken abgemüht, um ihren Produkten ein gefälliges Aussehen zu geben. Jetzt zeichnet sich Licht am Ende des Tunnels ab.

Syntax

-moz-linear-gradient(Startpunkt oder Winkel,Farbstop,Farbstop[,Farbstop,...])

Startpunkt / Winkel

Der Startpunkt kann festgelegt werden durch:

eines Schlüsselworte left, center, right, top, bottom
die Kombination von zwei der genannten Schlüsselwort, z.B. top left
eine oder zwei Angaben in % oder Pixel
die Angabe eines Winkels, z.B. 45deg

Farbstop

Ist sind mindestens zwei Angaben erforderlich, sonst gibt es keinen Farbverlauf. Einen Farbstop-Angabe kann bestehen aus:

einem normalen hexadezimalen Farbwert (#ff0000) bzw. einem Schlüsslwort (z.B. red)
einer Farbangabe mit rgb(rot,blau,grün) bzw. mit rgba(rot,blau,grün,Alpha-Wert)
der Kombination einer Farbangabe mit einer Angabe in % oder Pixel zur Positionsangabe. Wenn diese Angabe fehlt, dann werden die Farben gleichmäßig verteilt.

Beispiele

Einfacher horizontaler Verlauf

Text im Farbverlauf

fett

kursiv