CSS3 im Detail: Box-Shadow

von

Der neunte und damit letzte Teil der CSS3 im Detail – Reihe: Box-Shadow.

Bax-Shadow wird dazu verwendet einem Element einen oder mehrere Schlagschatten zu verleihen. Allerdings verhält sich Box-Shadow etwas anders als das uns schon bekannte Text-Shadow. In diesem Teil erfahrt ihr, wie man Box-Shadow richtig benutzt und was für ein Potential diese Property hat.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Firefox Safari Opera Chrome Internet Explorer

Syntax

Box-Shadow ist ähnlich aufgebaut wie Text-Shadow, unterscheidet sich aber in einigen wesentlichen Dingen. Allen voran können wir noch nicht auf browserspezifische Präfixe verzichten, d. h. dass Webkit-Browser und aktuelle Firefox-Versionen Box-Shadow noch mit ihren jeweiligen Kürzeln implementiert haben.

Der Code für einen normalen, cross-browser-kompatiblen Schlagschatten lautet daher wie folgt:

1
2
3
4
5

div.boxshadow {
	-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* Firefox - alte Syntax */
	-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* Safari, Chrome - alte Syntax */
	box-shadow:5px 5px 5px rgba(0,0,0,0.5); /* alle neuen Browser, W3C Standard */
}

Wie bei text-shadow auch, stehen auch hier die Werte für Verschiebung entlang der X-Achse, Verschiebung entlang der Y-Achse, Schattengröße und Schattenfarbe. (Da alle Browser, die Box-Shadow unterstützen auch den RGBa-Farbraum darstellen können, bietet es sich an, diesen hier gleich mal zu verwenden.)

Obiger Code erzeugt dieses Bild:

Box mit Schlagschatten

Ebenso können wir bei box-shadow mehrere Schatten durch Komma getrennt angeben:

1
2
3
4
5
6

div.moreboxshadows {
	/*Lila, Gruen, Gelb*/
	-moz-box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
	-webkit-box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
	box-shadow:15px 15px 10px rgba(255,0,255,0.5),10px -10px 5px rgba(0,255,0,0.5),-10px 10px 5px rgba(255,255,0,0.5);
}
Mehrere bunte Schlagschatten

Man beachte, dass der Schatten, der an erster Stelle steht, auch “oben auf” liegt. Das heißt, er ist dem Betrachter am nächsten. In diesem Fall ist der gelbe Schatten ganz unten, darüber wird der grüne und zum Schluss der lila Schatten gezeichnet. Durch die RGBa-Farbwerte kommt es außerdem zur Mischung der Farben.

Zwei weitere (optionale) Parameter

Box-Shadow hat aber noch zwei weitere Parameter, der erste ist inset. Ist inset gesetzt, verläuft der Schatten nach innen statt nach außen. Ein Beispiel:

1
2
3
4
5

div.innerboxshadow {
	-moz-box-shadow:inset 5px 5px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 0 10px #000;
	box-shadow:inset 0 0 10px #000;
}
inset-Shadow

Der andere Parameter ist ein vierter Pixel-Wert, der den Grad der Überfüllung des Schattens angibt – auch negative Werte sind erlaubt! Damit kann man den Schatten kräftiger/schwächer erscheinen lassen. Verdeutlicht nochmal am allerersten Beispiel:

1
2
3
4
5

div.strongboxshadow {
	-moz-box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
	box-shadow:5px 5px 5px 10px rgba(0,0,0,0.5);
}
Box mit Schlagschatten

Durch alle sechs Parameter haben wir im Prinzip die gleichen Möglichkeiten zum Erstellen eines Schattens, die wir auch aus Photoshop kennen.

Schatten in Photoshop

Einstellungen Schlagschatten in Photoshop

Box-Shadow funktioniert übrigens ganz wunderbar im Zusammenspiel mit Border-Radius und es lassen sich zusammen mit weiteren CSS3 Properties allerhand schöne Dinge anstellen. Ein gutes Beispiel sind Buttons:

CSS3 Button

Fazit

Soweit zu den eher spektakulären visuellen Neuerungen, die mit CSS3 und den neuen Browserversionen Einzug halten werden. Einiges davon ist heute schon ohne große Bedenken einsetzbar und wird in Zukunft gehäuft anzutreffen sein. Box-Shadow ist da keine Ausnahme und meiner Meinung nach ein sehr Nützliches Tool, um schnell und unproblematisch diverse Schatteneffekte zu erzeugen. Das alles spart uns Zeit und wiedereinmal Bandbreite, denn wo sonst aufwändige Grafiken für Schatten erstellt werden mussten, kommt jetzt nur noch ein Dreizeiler zum Einsatz. Schöne neue Welt. Mit diesem Teil endet die CSS3 im Detail-Reihe, ich hoffe ihr konntet einiges mitnehmen und nutzt das Gelernte. ;)

Die hier könnten dich auch interessieren…

nach oben