5. CSS3 – Farbe
In CSS werden Elementen über mehrere Befehle bzw. Eigenschaften Farben zugewiesen. Dabei sind die folgenden die wichtigsten und am meisten genutzten:
- color /* Legt die Vordergrundfarbe (z.B. von Text) fest */
- background-color /* Legt explizit die Hintergrundfarbe fest */
- background /* Legt den Hintergrund fest, allerdings können hier auch URLs zu Bildern eingefügt werden sowie eine Widerholung und Skalierung dieser festgelegt werden */
Die Notation in CSS für Farben lässt sich derweil auf unterschiedliche Art und Weise realisieren. Zum Einen wird hier mit einem Hexadezimalwert gearbeitet, dem eine Raute vorangestellt wird. Dabei gilt es zu beachten, dass am Bildschirm mit RGB-Werten gearbeitet wird und daher je ein Byte (mit einer Wertigkeit von 0 bis 255) für jeden Farbkanal (Rot, Grün, Blau) zur Verfügung steht.
Gültige Farben wäre demnach #8800FF oder auch #42C69F. Im ersteren Beispiel ließe sich die Schreibweise auf #80F vereinfachen. Doppelte Zeichen können hier weggelassen werden, sofern jede dieser drei Zweiergruppen jeweils den gleichen Stellenwert hat (Hier sollte jemand noch einmal nach der Formulierung sehen...). Einie Beispiele dazu:
- #44FF22 ließe sich zu #4F2 vereinfachen
- #3C1A89 ließe sich nicht vereinfachen
- #133CCA ließe sich ebenfalls nicht vereinfachen, da die Bytes wie folgt aussehen würden: 13/3C/CA
- #22FF3A ließe sich auch nicht vereinfachen, da nur zwei der drei Zweiergruppen eine Verkürzung der Schreibweise ermöglichen
Außerdem gibt es die weniger verbreitete Möglichkeit, Farben mit ihren Namen anzusprechen. Dazu gibt es folgende Begrifflichkeiten:
black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal und aqua.
In CSS3 sind weitere Schreibweisen hinzugekommen, die nicht nur im RGB-Modell arbeiten, sondern Farben auch im RGBA- und HSB-Format erkennen. Diese werden mit den folgenden Befehlen aktiviert:
- rgb(R, G, B) /* Ähnlich der "alten" Schreibweise (s.o.) */
Hier werden die Farben noch immer im RGB-Modus angegeben, allerdings ist es möglich, hier für R, G und B mit ganzen Zahlen zwischen 0 und 255 zu arbeiten.
- rgba(R, G, B, A) /* ähnlich rgb(R, G, B) */
Hier kann mit einem Alpha-Wert eine Transparenz angegeben werden. A liegt hier zwischen 0 für transparent bis 1 für opak.
- hsl(H, S, L) /* Hue, Saturation, Lightness */
Hierbei wird ein Farbkreis zugrunde gelegt, der mit 360 Grad alle Farben abdecken kann. 0° bzw. 360° entsprechen hierbei Rot, 120° Grün und 240° Blau. Dieser Wert wird als Ganzzahl für das H angegeben. S steht für die Sättigung, 0% bedeuten daher, dass es sich um einen neutralen Grauton handelt, 100% lassen die Farbe strahlen. Das L für Lightness steht für die Helligkeit und sollte dementsprechend selbsterklärend sein. 0% bedeuten auch hier, dass kein Licht hinzugefügt wird, 100% bedeutet, dass die maximale Helligkeit erreicht ist.
Weitere Informationen zu den einzelnen Angaben der jeweiligen Farben sind unter http://www.w3.org/TR/2003/CR-css3-color-20030514/#colorunits zu finden.