Box-Shadow in CSS3

Mit CSS3 sind die Zeiten vorbei, als Schattenwurf dem Programmierer den Angstschweißt auf die Stirn getrieben hat. Jede erdenkliche Form von Schatten ist mit dem box-shadow möglich, wenn man nur weiß, wie.
Vom Schlagschatten bis hin zu feinen und diffusen, richtungsungebundenen Schattenwürfen hat der Programmierer mit box-Shadows alle Möglichkeiten, einen Schatten realistisch nachzubauen, ohne ein Grafikprogramm bemühen zu müssen.

Durch Angabe heller Farbwerte kann auch ein Schein nach außen erzielt werden. Objekte können mit box-shadow dadurch einen strahlenden Glanz erhalten.

Zu guter Letzt kann man box-Shadow auch dazu verwenden, den Schatten nach innen fallen zu lassen. Somit sind die gebräuchlichsten Effekte möglich, um Objekte mit einem realistischen Schattenwurf darzustellen und damit der Website Plastizität zu verleihen.


Die Syntax von Box-Shadow

box-shadow: offsetLinks, offsetOben, (radiusWeichzeichner), (überfüllung), (farbe)

  • offset: Der Abstand zur Box, auf die sich der box-shadow bezieht von links und von oben. Auch negative Werte sind möglich
  • radiusWeichzeichner: Anzahl an Pixeln, über die der Schatten von der angegebenen Farbe ins Transparente verschwimmt
  • Überfüllung: Die Überfüllung des Schattens. Anzahl an Pixeln, über die der box-Shadow über die Box hinauswächst
  • Farbe: Farbwert des Schattens in Hex-Code, rgba-Wert oder Farbname

Beispiele mit Code für Box-Shadow

Beispiele aus dem wirklichen Leben für gut gestaltete Schattenwürfe, wie man Sie oft verwendet, finden Sie nachfolgend. Machen Sie mit uns posten Sie Ihre eigenen box-shadow Werte – wir verlängern die Liste gerne.

CSS3 Box CSS3 Code

Harter Schlagschatten

Box-Shadow ohne Schnörkel

box-shadow: 5px 5px #888

Weicher Schatten

Diffuses Licht erzeugt weichere Schatten, die mit dem optionalen dritten Parameter reguliert werden können

box-shadow: 5px 5px 3px #888

Licht von Oben

Bei vielen Lichtquellen entstehen häufig Körperschatten rings um das Objekt. Dazu einfach im box-shadow die offsets weglassen.

box-shadow: 0px 0px 5px #888

Schwere Schatten

Nahes, schwaches Licht kann weitere Schatten werfen. Dafür ist der optionale vierte Parameter, die Überfüllung zuständig

box-shadow: 0px 0px 5px 5px #888

Reduzierter Schatten

Überfüllung ist aber auch für leichte Schatten bei einer Lichtquelle sehr geeignet, indem sie mit negaivem Vorzeichen die Ausbreitung des box-shadows reduziert

box-shadow: 0px 8px 6px -6px #888

Schatten nach Innen

Schatten fällt aber nicht nur nach außen. Mit dem inset Argument, kann man auch Schattenwurf nach innen herstellen.

box-shadow: inset 0px 0px 10px #888

Schein nach außen

Licht und Schatten sind ja letztlich eins; daher kann mit box-shadow auch ein Schein nach außen produziert werden. Die negative Überfüllung sorgt dafür, dass der Schein realistisch bleibt

box-shadow: 0px 0px 10px -2px #FFF

Browsersupport für box-shadow

Alle aktuellen Browser unterstützen box-shadow ab folgenden Versionen:

  • IE9
  • Firefox 4 (ältere mit suffix -moz)
  • Safari 5.1.1.
  • Chrome und Opera alle Versionen

Verwandte Artikel zu „box-shadow“

Dieser Beitrag wurde unter CSS3 abgelegt und mit , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *