CSS3: box-shadow für schöne Schatten-Effekte

Schöne neue CSS-Welt. Mit CSS3 wurde box-shadow eingeführt, mit dem man Elementen einen Schatteneffekt verpassen kann. Man hat dabei den praktischen Vorteil, dass sich der Schatten bei Größenänderung automatisch an die Box anpasst und sich bei Verwendung von abgerundeten Ecken mit border-radius ebenfalls abrundet. Supported wird box-shadow von Safari (ab 3.1), Firefox (ab 3.5), Chrome und Opera (ab 10.5). CSS-Chatten nehmen üblicherweise 3 Werte (horizontal offset, vertical offset, blur) und eine Farbe. Die Offset-Werte können positiv oder negativ sein, es ist auch möglich mehrere Schatten-Effekte zu verwenden, die Werte-Angabe werden dann einfach mehrfach nacheinender im CSS notiert. Es ist einiges möglich, es empfiehlt sich, etwas damit herumzuspielen, macht Spaß.

Hier findet Ihr die W3C-Spezifikation.

Und hier habe ich eine kleine Beispielseite zum Thema box-shadow für Euch.

4 thoughts on “CSS3: box-shadow für schöne Schatten-Effekte

Schreibe einen Kommentar