Dropshadow ist ein Filter, der dem Umriss eines Elements folgt statt seiner Box. Für freigestellte Bilder und Symbole ist er die richtige Wahl.
- Dropshadow
Filterfunktion, die einen Schatten entlang der sichtbaren Form eines Elements legt.
Beispiel: „Ein Dropshadow erkennt durchsichtige Bereiche und lässt sie aus.“Abgrenzung zu box-shadow: Der box-shadow folgt immer dem Rechteck der Box, das Dropshadow dem Umriss.
Wofür er gebraucht wird
.logo { filter: drop-shadow(0 2px 4px rgb(0 28 68 / 0.2)); }Für freigestellte Bilder, Symbole und SVG-Grafiken. Ein box-shadow legte dort einen rechteckigen Schatten hinter ein rundes Logo, was sofort auffällt.
Was er kostet
Er ist aufwendiger zu berechnen als ein gewöhnlicher Schatten, weil der Browser den Umriss auswerten muss. Bei wenigen Elementen spielt das keine Rolle, bei einer Liste aus hundert Symbolen schon.