Zo werkt de eigenschap box-shadow
Vijf waarden in een vaste volgorde
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25); betekent verschuiving X, verschuiving Y, vervaging, spreiding en kleur. De volgorde ligt vast: de browser leest de getallen op positie, niet op betekenis. De eerste twee zijn verplicht, de rest niet.
Verschuiving
Een positieve X schuift de schaduw naar rechts, een positieve Y naar beneden. Een schaduw naar beneden oogt natuurlijk, omdat licht meestal van boven valt. Geen verschuiving met wel vervaging geeft een gelijkmatige gloed rond het element.
Vervaging wordt gehalveerd
Hier gaat het het vaakst mis. Een vervaging van 12 pixels betekent niet dat de schaduw 12 pixels verder reikt: de ene helft valt binnen de rand van de schaduw, de andere erbuiten. Het werkelijke bereik buiten de rand is dus de verschuiving plus zes, plus de spreiding.
Spreiding
Vergroot de schaduw aan alle kanten voordat de vervaging wordt toegepast. Een negatieve waarde verkleint hem – zo maakt u een smalle, dichte schaduw onder een kaart.
Kleur en dekking
Bijna altijd is dit zwart met lage dekking, geen grijs. Grijs blijft op elke achtergrond grijs, terwijl half doorzichtig zwart de kleur van de ondergrond overneemt. Daardoor lijkt het een echte schaduw.
Binnenschaduw
Het woord inset vóór de getallen keert de schaduw naar binnen: het element lijkt ingedrukt. Zo'n schaduw komt nooit buiten de rand en heeft dus geen "bereik buiten de rand".
Veelgestelde vragen over CSS-schaduwen
Neemt een schaduw ruimte in op de pagina?
Nee. Naburige elementen merken hem niet op en schuiven niet op – de schaduw kan over wat ernaast staat heen vallen. Hebt u tussenruimte nodig, gebruik dan een margin, geen schaduw.
Waarom is mijn schaduw niet zichtbaar?
Drie gangbare oorzaken: een dekking van nul, geen verschuiving en geen vervaging (dan zit de schaduw volledig achter het element), of overflow: hidden op het bovenliggende element, dat hem afknipt.
Hoeveel schaduwen kan ik stapelen?
Zoveel als u wilt – gescheiden door komma's, en de eerste in de lijst wordt het dichtst bij de lezer getekend. Gelaagde schaduwen geven een zachtere diepte dan één grote. Deze pagina maakt één laag; extra lagen voegt u eenvoudig toe met een komma.
box-shadow of filter: drop-shadow?
box-shadow tekent een rechthoek die de vorm van de rand volgt. drop-shadow volgt de werkelijke vorm – de omtrek van een transparante PNG of een SVG. Voor een afgeronde kaart gebruikt u de eerste, voor een pictogram met uitsparingen de tweede.
En een schaduw voor tekst?
Dat is een andere eigenschap – text-shadow, en die heeft geen spreiding: alleen verschuiving, vervaging en kleur.