Experimente mit der CSS-Eigenschaft box-shadow

20. Mai 2010 - XHTML / CSS - 6 Kommentare

CSS3 wird ein Segen für Webdesigner und vor allem -entwickler. Mit der CSS-Eigenschaft box-shadow lassen sich ohne jede Grafik Schatten um Block-Level-Elemente werfen. Wer jedoch gleiche Darstellung in alles Browsern anstrebt, sollte box-shadow mit Vorsicht genießen. Hier ein paar Experimente.

CSS-Eigenschaft box-shadow

Neben dem bereits vorgestellten text-shadow gibt es auch einen CSS-Befehl der uns Schatten um Block-Level-Elemente (z. B. div) werfen lässt. Die CSS3-Eigenschaft box-shadow.

Ich sag’s am besten gleich. Der IE spielt hier nicht mit! In einem gewissen Rahmen lässt auch dieser sich den Boxschatten aufzwingen, jedoch wird dieser weitaus weniger schön gerendert.

Aber auch die Webkit-Fraktion (Safari/Chrome) und der Firefox spielen nur mit den Prefixen -webkit bzw. -moz mit. Wer also auf CSS-valides Entwickeln pocht, kann das Weiterlesen ab sofort einstellen.

Sprungmarken

• Die Schreibweise
• Beispiele einfacher Boxschatten
• Beispiele innerer Boxschatten
• Beispiele für Boxschatten mit Radius
• Beispiele mehrfacher Boxschatten
• box-shadow im IE (Internet Explorer)

Die Schreibweise

.shadow {
    -moz-box-shadow: 2px 2px 2px 2px #eee;
    -webkit-box-shadow: 2px 2px 2px 2px #eee;
    box-shadow: 2px 2px 2px 2px #eee;
    /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */
}

Bemerkung:
Der erste Wert von box-shadow gibt den Versatz des Schattens von links an, der zweite die Verrückung nach unten, der dritte Wert den Grad der Unschärfe des Schattens, der optionale vierte Wert bestimmt den Schattenradius und die letzte Angabe ist der Hex-Code der gewünschten Farbe des Schattens.

Beispiele einfacher Boxschatten

Mit box-shadow lassen sich ohne jegliche Grafiken verblüffende Effekte erzeugen.

Das CSS dazu

-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;

Allein diese Parameter versprechen schon eine unheimliche Vielfalt, um Block-Elemente in unseren Webdesigns plastischer erscheinen zu lassen.

Das CSS dazu

-moz-box-shadow: 1px 1px 0px #000;
-webkit-box-shadow: 1px 1px 0px #000;
box-shadow: 1px 1px 0px #000;

Auch wenn es hier noch rudimentär erscheint. Mit dem Spiel der Offsets (Versätze), dem Blur (Unschärfe) und der Farbe lässt sich sehr leicht Perspektive erzeugen.

Das CSS dazu

-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
box-shadow: 0px 0px 2px #000;
border: 1px solid #fff;

In Kombination mit dem normalen border lassen sich perspektivisch ausgefeiltere Ergebnisse erzielen.

Das CSS dazu

-moz-box-shadow: -5px -5px 5px #ddd;
-webkit-box-shadow: -5px -5px 5px #ddd;
box-shadow: -5px -5px 5px #ddd;

Negativer Versatz ist ebenfalls möglich. Damit können wir die Lichtquelle und somit den Schatten beliebig steuern.

Beispiele innerer Boxschatten

Die CSS-Eigenschaft box-shadow hat einen weiteren interessanten Parameter. Mit der Angabe inset können Boxschatten auch nach innen dargestellt werden.

Das CSS dazu

-moz-box-shadow: inset 2px 2px 5px #000;
-webkit-box-shadow: inset 2px 2px 5px #000;
box-shadow: inset 2px 2px 5px #000;

Der innere Boxschatten lässt Elemente perspektivisch nach hinten setzen. Die Box erscheint somit wie eingestanzt.

Das CSS dazu

-moz-box-shadow: inset 0px 0px 10px #fff;
-webkit-box-shadow: inset 0px 0px 10px #fff;
box-shadow: inset 0px 0px 10px #fff;

Wenn man der Versatz des box-shadow auf 0 setzt, wird der Schatten gleichmäßig um das Element gelegt. Das gilt auch für den äußeren Schatten.

Beispiele für Boxschatten mit Radius

Ein vierter Parameter von box-shadow lässt uns den Schattenradius gesondert festlegen. Wie in diesen Beispielen zu sehen, verwende ich einen border-radius von 5px. Der Schattenradius kann ein anderer sein.

Das CSS dazu

-moz-box-shadow: 5px 5px 10px 10px #000fff;
-webkit-box-shadow: 5px 5px 10px 10px #000fff;
box-shadow: 5px 5px 10px 10px #000fff;

Mit dem vierten Parameter lässt sich der Schattenradius erhöhen.

Das CSS dazu

-moz-box-shadow: 0px 0px 2px 2px yellow;
-webkit-box-shadow: 0px 0px 2px 2px yellow;
box-shadow: 0px 0px 2px 2px yellow;

Auch ein kleinerer Schattenradius lässt sich einstellen.

Beispiele mehrfacher Boxschatten

Die Möglichkeit wie auch bei text-shadow mehrere Schatten zu kombinieren habe ich bei Peter Kröner entdecken können. In seinem Beispiel kombiniert er vier verschiedenfarbige Boxschatten auf einmal.

Das CSS dazu

-moz-box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;
-webkit-box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;
box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;

Dieses Gebilde ist grafisch sicher optimierbar, bildet aber hervorragend die Möglichkeiten von box-shadow ab.

box-shadow im IE (Internet Explorer)

Mit dem shadow filter lassen sich, wenn auch wesentlich eingeschränkter, Boxschatten im Internet Explorer darstellen. Unseren Boxschatten könnten wir wie folgt erweitern:

Das CSS dazu

-moz-box-shadow: 1px 1px 3px #666;
-webkit-box-shadow: 1px 1px 3px #666;
box-shadow: 1px 1px 3px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);

Hier die Ansicht im IE

Das ist nicht sonderlich schön und noch weniger valide, aber manchem mag es zumindest eine kleine Erleichterung sein und besseres ist der gemeine IE-Nutzer eh nicht gewöhnt.

Fazit

Wie bereits in der Einleitung gesagt, mit der CSS-Eigenschaft box-shadow sollte man, wenn einem Browserkompatibilität am Herzen liegt, vorsichtig umgehen. Aber gerade mit der Lösung für den IE finde ich den zurückhaltenen Einsatz des Boxschattens durchaus okay.

Relevante Links

• W3C über box-shadow
• Mozilla über -moz-box-shadow
• Webkit über -webkit-box-shadow
• Microsoft über Shadow Filter
• Schönes neues CSS: box-shadow – Peter Kröner
• CSS Box Shadow – CSS-Tricks

Schlagwörter: box-shadow, CSS3