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.
Für IE8 gibts interessante Lösungen
Box Schatten werden nicht vererbt.

Eigenschaften für box-shadow

Box-shadow hat fünf Parameter, wobei teilweis negative Werte erlaubt sind.

  1. X-Verschiebung - horizontale Verschiebung des Schattens.
    Negative Werte ziehen den Schatten nach Links
  2. Y-Verschiebung - vertikale Verschiebung
    Negative Werte ziehen den Schatten nach Oben
  3. Blur - Weichzeichnung-Effekt, hier sind nur positive Werte möglich (optional)
  4. Spread - Ausdehnung des Schattens, Schattenradius (optional)
  5. Farbe - Farbwert des Schattens (optional)
  6. Inset - für innere Schatten (optional)

Beispiele für box-shadow

Box mir einem starken pink Schatten
.simple-pink { box-shadow: 3px 2px 22px #ff6677; }
Schnee mit Verlauf

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

.eiszeit {
box-shadow: inset 2px 16px 55px #ffffff; 
border:1px solid #C4EDFF;
background-color:#C4EDFF;
text-shadow: 0 -0.15em 0 #fff;
}

Schatten Spielereien

Diese Box hat fünf Schatten

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

.multi-shadow {
box-shadow: 0 0 10px 5px #ddd, 
40px -20px #333, 
40px 30px 40px #bbb, 
-40px 20px #999, 
-40px -20px 50px #666;
}

Box Schatten generieren

Der Box-Shadow-Generator visualsiert diese Darstellung perfekt und schreibt zudem gleich den Code.