Schaduwgenerator

Ja, je kunt meerdere schaduwen toevoegen om complexe diepte en effecten te creëren. Elke schaduw kan afzonderlijk worden aangepast.

Een inset-schaduw verschijnt binnen het element in plaats van erbuiten. Terwijl een normale box-shadow buiten verschijnt, creëert inset een verzonken, ingedrukt effect.

Echte schaduwen zijn niet zwart; het is de achtergrondkleur die donkerder wordt, en ze verzachten naar de randen toe. Stapel in plaats van één zware schaduw met 30% zwart twee of drie zeer flauwe lagen met verschillende vervagingsstralen — bijvoorbeeld 1 px strak tegen de rand, 8 px daarachter en een heel lichte van 24 px verder naar buiten. Ga uit van licht van boven: geef de schaduw alleen een verticale verschuiving en laat de horizontale op nul.

In een statische lay-out is de kost verwaarloosbaar, maar dat verandert zodra je animeert. De box-shadow-waarde laten overgaan bij hover dwingt de browser de vervaging elk frame opnieuw te berekenen, wat op zwakkere apparaten zichtbaar hapert. Wil je een schaduw die groeit bij interactie, animeer dan de opacity of transform van een vooraf getekende schaduwlaag — dat loopt veel soepeler.