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

Text im Farbverlauf