CSS3 Box- und Textshadow

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. Der folgende CSS-Code zeigt den Cross-Browser-Syntax.

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 🙂

Empfehlenswert ist noch die Seite http://pixeltuner.de/css3-text-shadow/, auf der etliche weitere Beispiele gezeigt werden. Wer lieber einen Generator verwenden möchte findet Etliche im Netz: z.B.: http://css3gen.com/text-shadow/.