Bei einem aktuellen Projekt, ist das Screendesign so gestaltet, dass transparente Schatten zum Einsatz kommen. Um transparente PNG-Grafiken dafür zu vermeiden, sollte die CSS-Anweisung box-shadow zum Einsatz kommen. Allerdings lassen sich damit nur Schattierungen, unter Angabe eines Farbwerts mit Hexadezimal-Werten (also z.B. #ccc) und somit ohne transparenten Einstellungsmöglichkeiten umsetzen.

Um jedoch für transparente Schatten keine PNG-Grafiken einsetzen zu müssen, bietet sich die Angabe des rgba()-Statements an, wie folgendes Beispiel zeigt:

#box {
  box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -3px 3px 0px rgba(0, 0, 0, 0.1);
}

Bei rgba() werden bei den ersten 3 Parametern die RGB-Werte einer Farbe eingegeben. Als 4. Parameter lässt sich ein Alpha-Wert hinzufügen. In diesem Fall bekommt das Element mit der ID #box einen schwarzen Schatten zugewiesen, der eine Transparenz von 10% aufweist.

Zur vollständigen Erklärung des Beispiels: -moz-box-shadow wird für Gecko-basierte Browser (z.B. Firefox) und -webkit-box-shadow wird für Webkit-basierte Browser (z.B. Google Chrome oder Safari) benötigt.

Bei css-tricks.com gibt es eine Übersicht über die Browser-Unterstütztung von rgba() und werden Möglichkeiten für die Verwendung von RGB-Farbangaben im Internet Explorer gezeigt.