CSS box-shadow erzeugt einen oder mehrere Schlagschatten (auch »Drop-Shadow«) für einen HTML-Block ohne Einsatz von Bitmaps.
Heute wird box-shadow von allen modernen Browsern ohne Browser-Präfix gerendert.
CSS3 erblich: nein
box-shadow kann für so ziemlich alles angesetzt werden, was eine Box bildet: auf div-Elemente, auf Texte und auf Tabellen (nicht IE9).
| 2014 | Und ab die Post | Pratchet |
| 2014 | Auf leisen Sohlen | Miller |
Der Schatten wird nur außerhalb oder innerhalb des Elements gerendert, auch wenn das Element semitransparent ist.
box-shadow beeinflußt das Layout und die Position benachbarter Elemente nicht, kann sich aber über bzw. unter benachbarte Elemente legen.
box-shadow: 10px 10px 15px silver;
Vertikaler Farbe des
Versatz Schatten
| |
box-shadow: 10px 10px 15px silver inset;
| | |
Horizontaler | |
Versatz Größe des optional:
Schatten Schatten nach innen
Per Vorgabe fällt ein box-shadow bei positiven Werten für den horizontalen und vertikalen Abstand nach rechts unten.
- Ein negativer Wert für den horizontalen Versatz zieht den Schlagschatten nach links,
- ein negativer Wert für den vertikalen Versatz zieht den Schlagschatten nach oben.
Wird das Schlüsselwort inset im box-shadow aufgeführt, fällt der Schatten innerhalb der Box, so dass das Element wie eine Vertiefung oder eingraviert wirkt.
box-shadow nach links oben
Mit negativen Werten für die Entfernung kann der Schatten in eine andere Richtung fallen.
box-shadow: -10px -10px 5px silver;
box-shadow inset – nach innen
Das optionale Schlüsselwort inset rendert den Schatten innerhalb des Elements und zeigt sich wie eine Vertiefung.
box-shadow: 6px 6px 10px hsla(300,15%,25%,0.3) inset;
Mehr als ein box-shadow
Mehrere Schatten entstehen durch eine Komma-getrennte Liste. Die einzelnen Schatten liegen dabei von vorn (erster Schatten der Liste) nach hinten (letzter Schatten der Liste).
box-shadow: 30px 30px 5px hsla(0,0%,70%,0.5), (hellgrau) -30px -30px 5px hsla(0,0%,20%,0.5), (dunkelgrau) 0px 0px 5px 15px gold
box-shadow mit border-radius
Wenn border-radius für ein Element mit box-shadow angesagt ist, folgt der Schatten der Form der Box – sowohl beim Schatten außerhalb als auch innerhalb des Elements.
Der Schatten der Box wächst mit, wenn border für das Element angegeben wird.
box-shadow und border-image ist nicht unbedingt ein brauchbarer Effekt, auch wenn das Bild für border-image einen transparenten Hintergrund hat.
box-shadow passt sich nicht an das border-image, sondern an die Box an, denn border-image hat keinen Einfluss auf box-shadow.
Omnia Mea Mecum Porto
Am Rande: box-shadow wirkt auch bei Texten, aber genauso wie bei border-image bleibt die Form eines Zeichens oder eines Textes ein Rechteck und box-shadow erzeugt einen eckigen Rahmen. Dafür haben wir dann also text-shadow.