Dieser Artikel ist Teil einer Serie:

  1. CSS-Counter
  2. Border-Image
  3. Box-Shadow
  4. Box-Si­zing
  5. Die Rückkehr der Tabellen
  6. CSS-Transforms
  7. Die Appearance-Eigenschaft
  8. Der General Sibling Com­bi­na­tor
  9. font-size-adjust
  10. Farben mit RGBA und HSL(A)
  11. Schat­ten­ef­fek­te

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.