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.