Box-Shadows – wie war das eigentlich noch ohne?

Der box-shadow ermöglicht es dem Gestalter recht einfach, Schlagschatten an Box-Elementen ohne Grafiken einzurichten.

Die Werte für die Schattenfarbe, die Größe des Schattens und den Abstand, sowie die Weichzeichnung können definiert werden.

Hier ein Beispiel: 

Benutzer der Browser Firefox, Safari/Chrome, Opera und IE9 sollten einen Schatten unter der Box sehen.

Der Code sieht dann so aus:

#beispiel_1 {
box-shadow: 10px 10px 5px #323232;
}

Da aber momentan noch viele Funktionen von CSS3 einen expeimentellen Status haben, muss man für die verschiedenen Browsertypen noch folgende Präfixe verwenden:

#beispiel_1 {
-moz-box-shadow: 10px 10px 5px #323232;
-webkit-box-shadow: 10px 10px 5px #323232;
box-shadow: 10px 10px 5px #323232;
}

Definition

Die Eigenschaft wird wie folgt definiert:

<shadow> = inset? && [<length>{2,4} && <color>?]

Optional kann auch inset verwendet werden, um einen inneren Schatten anzulegen.

Es sind 2 bis 4 Längenangaben notwendig. Die Werte können sowohl negativ als auch postiv sein.

Optional kann eine Farbe angegeben werden. Die Farbwerte können im klassichen Hex-Code, den vordefinierten Konstanten oder mit den neuen CSS3-Farbmöglichkeiten angegeben werden.

Parameter

Länge 1: Horizontaler Versatz – ein positiver Wert zeichnet en Schatten nach rechts, ein negativer Wert nach links.

Länge 2: Vertikaler Versatz – ein positiver Wert zeichnet en Schatten nach unten, ein negativer Wert nach oben.

Länge 3: Weite der Weichzeichnung – nur positive Werte möglich (optional).

Länge 4: Radius des Schattens – ein positiver Wert weitet den Schatten aus, ein negativer zieht den Schatten zusammen (optional).

Farbe: Die Farbe des Schattens (optional).

Inset: Der Schatten geht ins innere der Box (optional).

Beispiele

box-shadow: 10px 10px #323232;
box-shadow: 10px 10px 5px #323232;
box-shadow: 10px 10px 5px 10px #323232;
box-shadow: 10px 10px 5px -10px #323232;
box-shadow: -10px -10px 5px #323232;
box-shadow: inset 5px 5px 5px #323232;
box-shadow: 10px 10px 5px #FFFF66, -10px -10px 5px #FF9900;
box-shadow: 0px 0px 5px #FF9900;
box-shadow: 0px 0px 5px 5px #FF9900;