Dieser Artikel ist Teil einer Serie:
Ein Design wie das meines Blogs sind praktisch kaum mit flexibler Breite umtzusetzen. Die diversen Schatteneffekte würden es nötig machen, an allen Kanten und Ecken von Boxen mehrere Einzelgrafiken einzusetzen – das geht, ist aber mühsam, unwartbar und schadet der Performance. Eine Lösung hierfür kündigt sich mit der CSS3-Eigenschaft box-shadow
an.
Was macht box-shadow
?
Mit box-shadow
kann man beliebigen HTML-Elementen einen schönen Schatteneffekt verpassen. Die Spezifikationen sehen dabei auch mehrere Schatten auf einmal vor. Besonders praktisch ist, dass der Schatten bei Größenveränderungen der Box mitwächst oder mitschrumpft und sich bei abgerundeten Ecken ebenfalls abrundet.
Wie benutzt man box-shadow
?
Ein einfacher Schatten ist wie folgt aufgebaut:
/* Einfacher Schatten */
#test {
box-shadow:8px 8px #666;
}


Die ersten beiden Werte beschreiben den horizontalen und vertikalen Versatz des Schattens, für den man positive wie negative Werte eintragen kann. Der letzte Wert legt die Farbe des Schattens fest, wofür man auch eine der neuen Farbangaben von CSS3 einsetzen kann um die Transparenz fein zu steuern. Um eine weiche Schattenkante zu bekommen, fügt man einfach einen Wert für den Weichzeichner hinter den Angaben für den horizontalen und vertikalen Versatz ein:
/* Weicher Schatten */
#test {
box-shadow:8px 8px 8px #666;
}
Mit einer weiteren Angabe kann man den Radius des Schattens kontrollieren:
/* Schatten mit festgelegtem Radius */
#test {
box-shadow:8px 8px 8px 8px #666;
}
Hier können auch negative Werte eingetragen werden, um einen kleineren Schatten zu erzeugen.



Es ist auch möglich, einem Element beliebig viele verschiedene Schatten auf einmal zuzuweisen. Mehrfache Schatten notiert man einfach, jeweils getrennt durch ein Komma, hintereinander. Dabei liegt der zuerst definierte Schatten über allen anderen und der zuletzt definierte ganz unten:
/* Vier Schatten auf einmal */
#test {
box-shadow: 8px 8px 8px red,
-8px 8px 8px green,
8px -8px 8px blue,
-8px -8px 8px yellow;
}

Und schließlich gibt es noch (zumindest im Firefox 3.5) die Möglichkeit, einem Element einen inneren Schatten zuzuweisen. Dazu muss man einfach lediglich das inset
-Schlüsselwort irgendwo in der Schattendefinition unterbringen:
/* Innerer Schatten */
#test {
box-shadow:inset 8px 8px 8px #666;
}
Für all das gibt es wie immer eine Testseite und wer faul ist, wird seine Freude an diesem Box-Shadow-Generator haben.
Welche Browser unterstützen box-shadow
?
In Sachen Bowserunterstützung sieht es vergleichsweise finster aus. Zwar unterstützt neben den beiden Webkit-Browsern Safari und Chrome auch der Firefox 3.5 box-shadow
(jeweils mit -webkit
bzw -moz
-Präfix), aber zwischen dem, was die drei Browser am Ende optisch abliefern, bestehen noch sichtbare Unterschiede.
Opera hat box-shadow
noch nicht implementiert und ehe es einen Internet Explorer mit CSS3-Features gibt, friert die Hölle zu. Das ist schon recht schade, weil box-shadow
meiner Ansicht eher weniger dafür taugt, wie Textschatten und runden Ecken als zusätzliche Deko zu fungieren, auf die man zur Not auch verzichten kann. Wenn wir umfassenden Support für dieses Feature hätten, könnten wir hingegen so manches Byte an Grafikdatei einsparen und flexible Layouts einfacher und/oder schöner gestalten. Aber noch ist es wohl nicht so weit.
Kommentare (20)
Jeena Paradies ¶
25. Juni 2009, 22:34 Uhr
Wobei ich mittlerweile dazu übergegangen bin solche Schönheits-Dinger einfach einzubauen, wer einen Browser hat der das kann sieht es, alle anderen halt nicht. Die meisten Kunden gucken sich das eh nur in "ihrem" Browser an und merken den Unterschied nicht einmal.
Glödu ¶
28. Juni 2009, 23:58 Uhr
Was ich nicht verstehen kann ist, warum die verschiedenen Browser propietäre Eigenschaften benutzen. Warum kann das nicht über die festgelegten CSS-Eigenschaften, wie in diesem Fall box-shadow, geschehen?
Peter ¶
29. Juni 2009, 09:29 Uhr
Zitat Glödu:
Das geschieht ja letztlich. Die Eigenschaften mit den propietären Präfixen sind lediglich Work-in-Progress-Versionen – sobald die Implementierung perfekt ist, fliegen die Präfixe raus.
Andi ¶
30. Juni 2009, 07:10 Uhr
Leider wirds noch 10 Jahre dauern, bis eine Mehrzahl der verwendeten Browser CSS3 unterstützen. Schade eigentlich, da es einige nützliche Funktionen gibt.
schnalle ¶
24. Juli 2009, 07:42 Uhr
Zitat Jeena Paradies:
na, "ihr" browser ist halt meist der ie7.
Satan ¶
8. Oktober 2009, 17:53 Uhr
Ich versuche eigentlich immer, möglichst übersichtliches HTML zu produzieren, damit Templates einfacher zu gestalten und zu ändern sind. Deswegen hab ich auch massig abgerundete Ecken, RGBA-Farben und Box-Shadows im Einsatz. Schade, dass Opera 10 damit noch nicht wirklich klarkommt. Und wer den IE benutzt, ist... selbst schuld.
Matze ¶
9. November 2009, 11:36 Uhr
Zitat Andi:
10 Jahre? Da bin ja schon alt und grau...
Wenn man bedenkt, dass Firefox und Chrome zusammen nach einigen Statistiken jetzt schon knapp 50 Prozent der Marktanteile haben, ist diese Einschätzung wohl etwas sehr pessimistisch.
cheffe ¶
17. Dezember 2009, 07:57 Uhr
IE unterstützt box-shadow, geht eben beim IE über die Filterfunktion:
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#555555, offX=2, offY=2, positive=true);
leider gibt es (noch) keinen Blur-Effekt, aber so ist das doch auch schon was :)
... ¶
18. April 2010, 13:47 Uhr
opera 10 unterstützt box-shadow.
ich benutze opera und es funktioniert.
eiapopeia ¶
16. Mai 2010, 14:45 Uhr
Zitat ...:
Und zwar seit Version 10.5.
Sie sind bislang sogar die ersten (IMHO auch einzigen), die das Originale Tag unterstützen.
Melanie ¶
24. März 2011, 10:36 Uhr
Hallo,
kann es sein dass box-shadow ignoriert wird sobald dem Element eine feste Breite oder auch nur width: auto; zugeordnet wird?
Ist bei mir nämlich der Fall... ich muss (leider) in einigen Fällen einem link und teils input-Feldern eine feste Breite zuordnen und der Schatteneffekt verschwindet dann einfach... übersehe ich grad etwas oder ist das ein bug?
Peter ¶
24. März 2011, 14:55 Uhr
Eigentlich sollte das nicht passieren. In der Test-Seite haben die Elemente ja auch feste Breiten und da funktioniert alles wunderbar. Könnte es vielleicht etwas damit zu tun haben, dass die besagten Elemente (Links und Inputs) Inline(-Box?)-Elemente sind? Wobei ich auch das sehr seltsam fände ... ist das Problem in allen Browsern da?
Don ¶
12. April 2011, 14:42 Uhr
Hi,
ja, das box-shadow ist eine gute Sache, nur ist die Performance in Safari 5.0 bei einem blur von <10px schon recht schlecht. beim vertikalen Scrollen ruckelt es stark und man merkt das unangenehm.
Deshalb würde ich sagen, den box-shadow vorsichtig und nur bei Form-Elementen oder kleineren Boxen einsetzen?
Peter ¶
12. April 2011, 16:21 Uhr
Nach allem was ich weiß ist das nur in Safari in spürbares Problem. Da soll Apple lieber mal seinen Browser reparieren :)
bedunet ¶
11. Juli 2011, 09:28 Uhr
10 Jahre hat es nun nicht gedauert bis der IE etwas mit box-shadow anfangen kann. Der IE9 zeigt einen weichen Schatten an - grade ausprobiert. Und mit den neuesten Versionen von Chrome und Firefox kann man auch auf die Präfixe verzichten.
Hans Kloss ¶
19. Januar 2012, 12:48 Uhr
Man soll nicht vergessen, dass die Schatten bei IE nicht so transparent sind wie bei den anderen Browsern
Ingo ¶
28. Februar 2012, 10:25 Uhr
Tolle Seite, auch wenn es schon älter ist. Allerdings finde ich, dass hier eine Sache fehlt. Ein Schatten auf allen vier Seiten (gleichfarbig). Wollte es schon so machen wie in dem Beispiel oben, mit den verschiedenen Farben, bis ich dann merkte, dass das ja auch einfacher geht mit box-shadow: 0 0 5px 5px #999999; :)
Sascha ¶
25. Mai 2012, 10:48 Uhr
Ich bin über die Websuche hierauf gestoßen, meine Anfrage ist aber etwas anders. Ich möchte nicht einen Schatten bei der Box realisieren, sondern einen Farbverlauf innerhalb der Box.
Wie löst man sowas im Jahr 2012 am schönsten, so dass es auch von der Mehrzahl der Browser sauber interpretiert wird?
Ich möchte das in die Boxen der Webseite (Sidebar) einbauen, die ich hier auch angegeben habe.
Falls da jemand einen Tipp hat würde ich mich freuen!
Peter Kröner ¶
25. Mai 2012, 11:59 Uhr
Ist nicht ganz unkompliziert, aber so geht‘s.
CSS Please könnte auch helfen.
Heuler ¶
24. Juli 2012, 23:10 Uhr
An alle wenn man bei den Box-Shadow-Generator ein Schatten generiert
fehlt am ende ein Semikolon also bei copy and paste auf passen kein Semikolon
also noch was eine toole Seite hast du