Waarom één schaduw nep leest en drie echt

Een voorwerp op een vlak werpt drie schaduwen tegelijk: een strakke donkere contactschaduw eronder, een middenschaduw die van het licht af verschoven is, en een brede vage omgevingsschaduw van licht dat door de ruimte kaatst. Eén laag heeft één verschuiving en één blur, dus die kan een van de drie zijn, niet alle drie. De preset Popover geeft elke laag één taak: 0 1px 2px op 4%, 0 4px 8px -2px op 6%, 0 12px 24px -6px op 10%, samen 20%, minder inkt dan de meeste schaduwen van één laag.

Negatieve spread is het deel dat mensen weglaten. Spread vergroot de schaduw voordat hij geblurd wordt, dus een blur van 24px zonder correctie loopt net zo ver naar opzij uit als naar onderen, en het element leest alsof het in mist zweeft. De spread ongeveer een kwart van de blur naar binnen halen houdt de brede laag netjes onder het element.

Waarom de schaduwkleur geen zwart hoort te zijn

Puur zwart over een gekleurd vlak leggen trekt het naar neutraal grijs, dus het beschaduwde gebied leest kouder en minder verzadigd dan het vlak ernaast. Op een bijna witte pagina is het verschil klein; op een merkkleur of warm papier is het wat een kaart vies laat lijken in plaats van opgetild. Gebruik in plaats daarvan een donkere toon van de tint van het vlak.

In donkere modus is het nog duidelijker: een zwarte schaduw op een bijna zwarte achtergrond is onzichtbaar, want niets is donkerder dan de pagina. Elevatie in donkere modus vraagt een hogere alpha, een koudere toon dan het vlak, of juist een haarlijn als rand.

De Tailwind-vorm

De uitvoer is de vorm met een arbitraire waarde, shadow-[0_1px_2px_rgb(11_28_30_/_0.06)], met underscores voor spaties. Meerdere lagen gescheiden door komma's werken, en inset binnen de blokhaken ook, maar de compiler herschrijft elke kleur naar var(--tw-shadow-color, …), dus een kleurutility shadow-* op hetzelfde element overschrijft de hele stapel. De vorm met een arbitraire property, [box-shadow:…], slaat die variabelen helemaal over.

Veelvoorkomende problemen

De schaduw is afgekapt. Een voorouder met overflow: hidden knipt hem af. Zet de schaduw op het afknippende element, of gebruik filter: drop-shadow() op de ouder.
Hij volgt de rechthoek, niet de vorm.box-shadow volgt de border box en zijn radius, dus een schaduw op een transparante PNG of een SVG-icoon trekt de box na. filter: drop-shadow() volgt het alfakanaal en kost meer om te tekenen.
Animeren hapert. Een geblurde schaduw wordt elk frame opnieuw getekend. Zet de hoverschaduw op een pseudo-element en animeer daar de opacity van.

Veelgestelde vragen

Wat is het verschil tussen blur en spread?

Blur maakt de rand zachter zonder de grootte te veranderen. Spread verandert de grootte voor het blurren: positief groeit, negatief krimpt. Spread zonder blur geeft een kopie van het element met harde randen, en zo worden platte lange schaduwen en harde verschoven randen gebouwd.

Beïnvloedt een box-shadow de lay-out?

Nee. Hij tekent buiten de border box en neemt geen ruimte in, dus hij duwt nooit een buur weg. Dat is het verschil met een outline met offset, en de reden dat een schaduw uit een scrollcontainer kan lopen en afgeknipt wordt.

Hoeveel lagen zijn te veel?

Bij drie vlakt de opbrengst af, vier is een plafond voor een modal. Elke laag is nog een geblurde tekenronde over dezelfde pixels, dus een schaduw van zes lagen op tweehonderd rijen is meetbaar. Niets hier houdt je bij een bepaald aantal tegen: stapel er zoveel als het effect vraagt, en de link draagt ze allemaal.

Waarom ziet mijn schaduw er grijs uit in plaats van zacht?

Puur zwart op lage dekking haalt de verzadiging weg uit wat eronder ligt, dus het beschaduwde gebied leest kouder dan het vlak ernaast. Gebruik in plaats daarvan een donkere toon van de tint van het vlak. Het is de ene aanpassing die het verschil maakt tussen een schaduw die ontworpen lijkt en een schaduw die uit een template komt.