Vorm · T-10
Schaduw maken
Eén schaduw ziet er vaak uit als een grijze vlek. Kleurstaal stapelt er een paar, elk twee keer zo ver en zo zacht, zoals echt licht valt. Je ziet meteen hoe het staat op licht en op donker.
Je bestanden blijven op je toestel
Vragen
Goed om te weten
Waarom meerdere lagen?
Echte schaduwen zijn scherp dicht bij het voorwerp en vervagen verder weg. Een paar lagen die elk twee keer zo ver en zacht zijn, bootsen dat na. Eén laag oogt vlak.
Waarom schaduwen in plaats van randen?
Een schaduw toont wat boven de pagina ligt en wat erin gedrukt is, zonder lijnen die het beeld drukker maken. Zo werken alle sites van nealvdv: opgetild om te klikken, ingedrukt waar je typt.
Is een schaduw genoeg om een knop te herkennen?
Niet altijd. Voor toegankelijkheid moet een knop ook zonder schaduw herkenbaar zijn, door zijn tekst, vorm of kleur. Gebruik de schaduw als extra, niet als enige teken.
Zo werkt het
Schaduw maken in drie stappen
Begin bij een voorbeeld
Zacht, zwevend, opgetild of ingedrukt. Of stel zelf afstand, vervaging en sterkte in.
Bekijk licht en donker
Links een lichte pagina, rechts een donkere. Op donker wordt de schaduw zwart en sterker, anders zie je ze niet.
Kopieer de CSS
Als variabele, met een donkere versie voor wie donkere modus gebruikt.