Schönes neues CSS: box-shadow

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

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;
}
Ein einfacher Schatten Ein weicher Schatten

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.

Schatten mit erhöhtem Radius Schatten mit verringertem Radius Mehrfach-Schatten

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;
}
Innerer Schatten

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)

  1. 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.

  2. 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?

  3. Peter

    29. Juni 2009, 09:29 Uhr

    Zitat Glödu:

    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?

    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.

  4. 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.

  5. schnalle

    24. Juli 2009, 07:42 Uhr

    Zitat Jeena Paradies:

    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.

    na, "ihr" browser ist halt meist der ie7.

  6. 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.

  7. Matze

    9. November 2009, 11:36 Uhr

    Zitat Andi:

    Leider wirds noch 10 Jahre dauern, bis eine Mehrzahl der verwendeten Browser CSS3 unterstützen. Schade eigentlich, da es einige nützliche Funktionen gibt.

    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.

  8. 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 :)

  9. ...

    18. April 2010, 13:47 Uhr

    opera 10 unterstützt box-shadow.
    ich benutze opera und es funktioniert.

  10. eiapopeia

    16. Mai 2010, 14:45 Uhr

    Zitat ...:

    opera 10 unterstützt box-shadow.
    ich benutze opera und es funktioniert.

    Und zwar seit Version 10.5.
    Sie sind bislang sogar die ersten (IMHO auch einzigen), die das Originale Tag unterstützen.

  11. 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?

  12. 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?

  13. 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?

  14. 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 :)

  15. 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.

  16. 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

  17. 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; :)

  18. 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!

  19. Peter Kröner

    25. Mai 2012, 11:59 Uhr

    Ist nicht ganz unkompliziert, aber so geht‘s.

    CSS Please könnte auch helfen.

  20. 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

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon