CSS: Schatten mit box-shadow

Mit der CSS-Eigenschaft “box-shadow” lassen sich ganz einfach Schatten zu einem Objekt hinzufügen: Dazu braucht man neben der Farbe nur die Größe und sowohl die vertikale als auch die horizontale Position. So lässt sich der Schatten auch nur nach unten positionieren, ohne eine Verschiebung nach rechts oder links!

Der Code für einen hell-grauen Schatten mit nur leichtem Versatz sieht also so aus:

box-shadow:1px 1px 5px #333333;

Der erste Wert steht dabei für einen horizontalen Versatz nach rechts oder links, der zweite Wert für den vertikalen Versatz nach unten. 5px gibt an, wie groß der Schatten sein soll – der letzte Wert definiert die Schatten-Farbe.

Damit der Schatten auch in älteren Versionen von Firefox, Safari oder Chrome angezeigt wird, hilft es, die speziellen Browser-Prefixe zu verwenden:

.schatten {
-moz-box-shadow:1px 1px 5px #333333;
-webkit-box-shadow:1px 1px 5px #333333;
box-shadow:1px 1px 5px #333333;
}

Fügt man einem Element jetzt die Klasse “schatten” hinzu, wird der Schatten angezeigt: Hier im Beispiel links ohne Schatten, im Beispiel rechts mit Schatten.

Code für den Schatten im Beispiel:

<div style="width:200px;height:100px;
background-color:#FFFFFF;border:1px solid #000;
box-shadow:1px 1px 5px #333333;
-webkit-box-shadow:1px 1px 5px #333333;
-moz-box-shadow:1px 1px 5px #333333;"></div>

 
box-shadow oder text-shadow?

Die Eigenschaft “text-shadow” gibt es schon seit CSS2, sie ist also deutlich älter ist “box-shadow”. Trotzdem ist text-shadow nicht auf Texte begrenzt und box-schadow kann ebenfalls für einen Schatten in einem Text verwendet werden.

Auch die Syntax ist sonst gleich:

text-shadow:1px 1px 5px #333333;

Der erste Wert steht wieder für einen horizontalen Versatz nach rechts oder links, der zweite Wert für den vertikalen Versatz. Der Wert 5px gibt an, wie groß der Schatten sein soll. Das letzte ist wieder die Schatten-Farbe.

Text-shadow erlaubt aber nicht nur einen Schatten: Insgesamt lassen sich sechs verschiedene Schatten damit an ein Objekt anhängen! Das ist praktisch: Durch mehrere kombinierte text-shadow Anweisungen lässt sich so zum Beispiel eine Outline um Text realisieren. Damit wird der Text auch auf unterschiedlichen Hintergründen besser lesbar.