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.

Realistic effect shadow on paper. Transparent paper and square shadow box objects. The element for advertising messages is isolated on a transparent background. Vector illustration, EPS 10.

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

Diese Box wurde mit den Regeln von oben erstellt. Alle Die hier eine normale Box bzw. garkeine Box sehen sollten den Browser wechseln.

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/.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

WhatsApp chat

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen