CSS3 Box Shadow - Box Schatten

CSS3 bietet die Möglichkeit, für Boxen einen Schatten-Effekte zu definieren. Firefox, Opera, Google Chrome und Safari unterstützen das bereits. Diese Eigenschaft ist in Entwicklung, deshalb verwenden Webkit- und Mozilla-Browser ein Präfix.
Box Schatten werden nicht vererbt.

Eigenschaften für box-shadow

Box-shadow hat fünf parameter, wobei teilweis negative Werte erlaubt sind.
Diese Angaben müssen mehrfach mit gleichen Parametern definiert werden:
box-shadow (Opera)
-moz-box-shadow (Mozilla)
-webkit-box-shadow (Webkit).

1. X-Verschiebung - horizontale Verschiebung des Schattens.
   Negative Werde ziehen den Schatten nach Links
2. Y-Verschiebung - vertikale Verschiebung
   Negative Werde ziehen den Schatten nach Oben
3. Blur - Weichzeichnung-Effekt, hier sind nur positive Werde möglich
4. Farbe - Farbwert des Schattens
5. Inset - für Innere Schatten werden

Beispiele für box-shadow

.simple-pink {
 -webkit-box-shadow: 9px 8px 22px #ce9cc0; /* webkit browser*/ 
 -moz-box-shadow: 9px 8px 22px #ce9cc0; /* firefox */ 
 box-shadow: 9px 8px 22px #ce9cc0; /* w3c standart */
 }

In diesem Beispiel haben die Box und die Schrift einen Schatten.

.eiszeit {
-webkit-box-shadow: inset 2px 16px 55px #ffffff;/* webkit browser*/ 
-moz-box-shadow: inset 2px 16px 55px #ffffff;/* firefox */
 box-shadow: inset 2px 16px 55px #ffffff; /* w3c standart */
border:1px solid #C4EDFF;
background-color:#C4EDFF;
text-shadow: 0 -0.15em 0 #fff;
}

Schatten Spielereien

Schatten können belieblig oft eingesetzt werden. Komma getrennt werden sie nacheinander aufgeführt.

.multi-shadow {
-moz-box-shadow: 0 0 10px 5px #564B47, 40px -20px #97827F, 
40px 30px 40px #B0ADAB, 
-40px 20px #E0A3B7, 
-40px -20px 50px #DB7093;
-webkit-box-shadow: 0 0 10px 5px #564B47, 
40px -20px #97827F, 
40px 30px 40px #B0ADAB, 
-40px 20px #E0A3B7, -
40px -20px 50px #DB7093;
box-shadow: 0 0 10px 5px #564B47, 
40px -20px #97827F, 
40px 30px 40px #B0ADAB, 
-40px 20px #E0A3B7, 
-40px -20px 50px #DB7093;
}

Box Schatten generieren

Der Box-Shadow-Generator visualsiert diese darstellung perfekt und schreibt zudem gleich den code.