CSS box-shadow-generator

Hoe het werkt

Box-shadow neemt vier getallen en een kleur in een vaste volgorde, en het verschil tussen een schaduw die als diepte leest en eentje die als sticker leest zit helemaal in die getallen. Zien hoe het verandert terwijl je sleept is veel sneller dan raden.

Wat de vier getallen betekenen

In volgorde: horizontale verschuiving, verticale verschuiving, vervagingsstraal en spreiding. Verschuivingen verplaatsen de schaduw; vervaging verzacht de rand; spreiding laat hem groeien of krimpen vóór het vervagen. Een negatieve spreiding trekt de schaduw naar binnen, waarmee je een strakke schaduw onder een kaart krijgt zonder dat die aan de zijkanten uitloopt.

Het echt laten lijken

Licht komt meestal van boven, dus een kleine positieve verticale verschuiving zonder horizontale verschuiving leest als natuurlijk. Grote, zeer transparante schaduwen lezen als zachte diepte; kleine, donkere, scherpe lezen als een uitgeknipte sticker. Echte voorwerpen werpen schaduwen die vager zijn naarmate ze verder van het oppervlak liggen — een grotere vervaging impliceert een hoger element.

Inset-schaduwen

Een inset-schaduw wordt binnen het element getekend in plaats van erbuiten, waarmee ingedrukte knoppen, invoervelden en verzonken panelen worden gemaakt. Dezelfde vier getallen gelden, alleen wijzen ze naar binnen.

Meerdere schaduwen tegelijk

CSS accepteert een door komma's gescheiden lijst, en twee lagen — één strak en donker, één breed en vaag — ziet er aanzienlijk beter uit dan één enkele. Deze generator maakt er één; plak er zelf twee samen voor het gelaagde effect.