Wie schon am Anfang des letzten Artikels zu lesen war, gibt es seit CSS 3 die box-shadow Eigenschaft, die den Schatten “einfach so” erzeugt, ohne dass man Elemente wrappen muss. Hier erkläre ich kurz diese CSS Eigenschaft, mit der auch zum Beispiel die Seitenleiste ihre Schatten bekommt.

Unterstützung

Die box-shadow Eigenschaft wird ab IE 9, Firefox 4 und Opera 10.5. Außerdem gibt es wie bei vielen anderen CSS 3 Eigenschaften die Möglichkeit, ein -moz- bzw. ein -webkit- davor zu stellen. Dadurch werden die Schatten auch ab Firefox 3.5 und in Safari 3/Chrome unterstützt.

Syntax der Eigenschaft

Wie man sieht, kann jedes Element beliebig viele Schatten erhalten (durch Kommas getrennt).

Die Parameter

• inset Wenn angegeben, ist der Schatten im Element und nicht außerhalb
• xshift/yshift Die Verschiebung des Schattens in die x bzw. y Richtung.
  Wenn man den Schatten rechts-unten haben will, gibt man zum Beispiel 5px 5px an.
• blur Optionale 3. Längenangabe, die angibt, wie viel vom Schatten langsam durchsichtiger wird.
• spread wird zur Größe des Schattens hinzugezählt. Normalerweiße ist die “Schattenbox” genauso groß wie das zu schattierende Element. Wenn ein spread angegeben ist, wird diese Längenangabe zur Größe des Schattens hinzugezählt.
• color Die Farbe des Schattens. Auch wenn diese Angabe optional ist, sollte man sie immer mit definieren, da manche Browser sonst den Schatten nicht anzeigen.

Beispiele

Auch was zum schauen ;)

box-shadow: 5px 5px #888;
Einfacher Schatten

box-shadow: 5px 5px 5px #888;
Schatten mit blur

box-shadow:5px 5px 0px 2px #888;
Ohne Blur, aber mit 2px spread

box-shadow:0px 0px 10px 3px #888;
Ein Schatten ohne Verschiebung, aber mit Blur & Spread

box-shadow: inset 0px 0px 10px 3px #888;
Selber Schatten, aber diesmal nach innen

box-shadow: 5px 5px #888; border-radius: 5px;
Einfacher Schatten + Runde Ecken

.

Mehrere Schatten kombiniert,
siehe unten

Das letzte Beispiel zeigt insgesamt 5 Schatten für 1 Element. Die Schattendefinitionen sind jeweils durch ein Komma getrennt und geben in dieser Reihenfolge folgende Schatten an:

1. Zuerst kommt der scharze Schatten mit 10px Blur und 5px Spread
2. Ein einfacher hellgrüner Schatten oben rechts
3. Der rote Schatten unten rechts, inklusive Blur von 50px
4. Ein einfacher gelber Schatten unten links
5. Der blaue Schatten, wieder mit Blur 50px oben links.

Oder als CSS Definition:

Viel Spaß mit CSS 3, Yoschi