Wie man standardmäßig eine Farbe in CSS wählt, ist wohl jedem Webdesigner bekannt. Einfach den Farbwert per Hexcode oder verkürzten Hexcode angeben und gut ist. Seit geraumer Zeit gibt es aber auch noch andere Möglichkeiten dein Farbwert anzugeben. Während die Variante mit rgb(x,y,z) eigentlich nur das Pendant zum herkömmlichen Hexcode in dezimaler Schreibweise darstellt, bietet die Variante rgba(x,y,z,a) zusätzlich noch einen Alphakanal. Dieser kann Werte zwischen 0 und 1 annehmen. Damit ist es möglich halbtransparente Farben zu vergeben.
Für mich persönlich ist das ganze vor allem für Hintergründe, Hover und Schatten recht praktisch, da so das jonglieren mit transparenten PNG’s entfällt und somit Traffik und Ladezeit gespart werden kann.
Gerade in Verbindung mit box-shadow lassen sich so wunderschöne Schlagschatten mit wenigen Zeilen Code erstellen. Diese auch skalieren noch einwandfrei mit, ohne das man sich wie früher auf Containergrößen festlegen oder äußerst aufwendig mit Grafiken arbeiten musste.