CSS3 Box und Text-Shadow
April 27, 2010 | Kommentieren
Firefox und Safari bieten die Möglichkeit an per CSS Schatten-Effekte beim Text oder auch beim Box-Model zu zaubern.
Beim Text-Shadow sieht es so aus:
text-shadow: 2px 2px 2px #000;
Die ersten 2px sind für den Schatten rechts und die nächsten 2px für den Schatten unten.
Danach folgt noch der Abstand in PX und die Farbe des Schatens:
Ich bin ein Text mit Schatten
Beim dem Box-Shadow Effekt siehts ähnlich aus. Man braucht auch hier 3 angeben (Schatten rechts, Schaten unten und der Blur-Effekt)
-moz-box-shadow: 5px 5px 5px #999; /* Firefox hack */ -webkit-box-shadow: 5px 5px 5px #999; /* Safari and Chrome hack */ box-shadow: 5px 5px 5px #999;
Bei dem Beispiel unten habe ich noch ein padding von 10px für den inneren Abstannd hinzugefügt.
Ich bin eine Box mit Schatten
Leider werden diese Eigenschaften (wie immer) von den Internet Explorer nicht ünterstützt.
