Hintergrundfarben können mit CSS3 in einer neuen Variante angegeben werden. Bisher waren vor allem Hexadezimalzahlen und RGB-Werte üblich um die Farbe zu bestimmen (Beispiele):

Hexadezimalzahl

RGB-Wert

Neu in CSS3 ist das HSL-Farbmodell. Dies ist ein bißchen „menschenfreundlicher“ (Beispiel):

Was bedeutet HSL?

  • Das H gibt den Farbton an, wobei dieser Wert den Winkel im Farbkreis bestimmt. Mögliche Werte sind also von 0 bis 360. Das Gute hierbei ist, dass nur durch Herauf- oder Heruntersetzen dieses Wertes die Farbe verändert werden kann. Entsprechend des Farbkreises ergibt ein geringer Wert einen Rotton, es folgen gelb, grün und blau
  • Das S bestimmt die Sättigung. Die möglichen Werte gehen von 0% (nicht gesättigt/grau) bis 100% (vollkommen gesättigt).
  • Das L die Helligkeit. Die möglichen Werte gehen von 0% (schwarz) bis 100% (weiß).

Transparenzen mit CSS3

Ebenfalls neu hinzugekommen mit CSS3 sind Farbtransparenzen, die sich nicht von den Eltern- auf die Kind-Elemente vererben. Wenn also nur der Hintergrund und nicht die Schrift in der gleichen Box transparent werden soll. Dafür gibt es nun die HSLA- und RGBA-Anweisungen. Hier kommt ein 4. Wert, das A (Alpha-Wert der Farbe) hinzu, der die opacity/Deckkraft der Farbe angibt. Die möglichen Werte gehen von 0 (völlig transparent) bis 1 (keine Transparenz). Die Werte dazwischen, also 0.1 bis 0.9 gibt man mit Punkt als Trenner an, wobei man die vorangestellte 0 optional weglassen kann (Beispiel):

Diese Anweisungen funktionieren in allen Browsern mit Ausnahme des Internet Explorers 6 bis 8. Da alles andere zu kompliziert wird, gibt man für diesen Browser am besten einfach eine Ersatzfarbe per RGB-Anweisung an (Beispiel):

Moderne Browser werten automatisch die RGBA-Anweisung aus und verwerfen die erste Anweisung, während o.g. Versionen des IEs die 2. Anweisung verwerfen und die RGB-Anweisung auswerten, da sie mit dem RGBA-Befehl nichts anfangen können.