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. Mit den neuen Möglichkeiten von CSS3 ist man jedoch viel flexibler.

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