CSS3 Shadow (Text & Box)

CSS3 unterstützt 2 Arten des shadow-Effekts (Schatten). Zum einen den Box-Shadow, d.h. einen Schatten um einen div-container und zweitens den Text-Shadow – ein Schatten für Texte.

Der CSS3 box-Shadow

Der CSS3-Box-Shaddow erlaubt das Zeichnen eines Schattens rund um eine CSS-Box.

box-shadow: 3px 3px 7px #888;
 -moz-box-shadow: 3px 3px 7px #888;
-webkit-box-shadow: 3px 3px 7px #888;

Die ersten beiden Parameter geben die Richtung (X- und Y-Koordinaten) an, in die der Shadow verlaufen soll. Soll der Shadow gleichmäßig um die ganze Box verlaufen, so sind beide Parameter auf 0 zu setzten. Der dritte Parameter gibt die Shadow-Stärke an, d.h. wie groß der Schatten ist. Der letzte Parameter gibt die Farbe im üblichem CSS-Stil an, in der der Shadow dargstellt werden soll.

Beispielbox für den CSS3 Box Shadow

Der CSS3 Text Shadow

Der Text Shodow ist keine Erfindung von CSS3. Bereits der Safari 1 konnte damit umgehen, weil der Text Shadow bereits in CSS2 definiert war. Beim Text Shadow sind die Parameter identisch zum Box Shadow. Der Unterschied liegt darin, dass jetzt der Shadow nicht um die Box, sondern um den Text innerhalb der Box dargstellt wird.

text-shadow: 3px 3px 3px #888;

Beispiel CSS Text-Shadow

Die Nutzer eines der folgenden Browser: Safari 3+, Opera 9.5, Firefox 3.1, Konqueror sehen jetzt ein Beispiel.
Beispieltext mit den CSS3 Regeln von oben.
Alle anderen haben Pech gehabt 🙂

Im Netz gibt es eine Vielzahl von weiteren Seiten die tolle Beispiele zeigen, wie z.B. http://pixeltuner.de/css3-text-shadow/. Außerdem gibt es etliche Seiten, die sogenannte Generatoren anbieten, mit denen man sich schnell die gewünschten Effekte zurechtklicken kann (z.B: http://css3gen.com/text-shadow/).