Box-shadow generator

Zo gebruik je de box-shadow generator

1. Begin met een voorinstelling, of houd de standaardschaduw Zacht. De rij Voorinstellingen biedt Zacht, Hard, Gelaagd, Elevatie, Neumorphism, Binnen en Gloed.
2. Klik bij Schaduwlagen op een laag om haar te selecteren. Elke laag kun je verplaatsen met Omhoog en Omlaag, of verwijderen met Verwijderen. Laag toevoegen dupliceert de geselecteerde laag, zodat je een kopie kunt bijstellen.
3. Bewerk de geselecteerde laag onder Geselecteerde laag bewerken: sleep de stip in het vlak Verschuiving, of gebruik de schuifregelaars en getalvelden voor Horizontale verschuiving (px), Verticale verschuiving (px), Vervaging (px) en Spreiding (px).
4. Kies een Schaduwkleur met de kleurkiezer of typ een willekeurige CSS-kleur in het codeveld, en stel dan de Dekking (%) in. Vink Inset (binnenschaduw) aan om de schaduw binnen het kader te tekenen.
5. Pas de Instellingen voorbeeld aan (Kleur kader, Achtergrondkleur, Hoekstraal (px)) om de schaduw op je echte kleuren te zien. Ze beïnvloeden alleen het voorbeeld.
6. Kopieer de declaratie uit CSS-code met Kopiëren.

Toetsenbord: geef de stip in het vlak Verschuiving de focus en verplaats haar met de pijltjestoetsen per 1 px, of per 10 px met Shift.

Hoe box-shadow werkt

De syntaxis van één schaduw is box-shadow: [inset] x y blur spread color.

• x en y verschuiven de schaduw naar rechts en naar beneden. Negatieve waarden verschuiven haar naar links en naar boven. Een lichtbron boven het element betekent een positieve y.
• Vervaging (blur) maakt de rand zachter. Ze kan niet negatief zijn. Een vervaging van 0 geeft een scherpe kopie van het kader.
• Spreiding (spread) vergroot (positief) of verkleint (negatief) de schaduw voordat ze vervaagd wordt. Een negatieve spreiding met een grote y houdt de schaduw onder het element in plaats van eromheen.
• Kleur bevat meestal transparantie. Deze tool schrijft dekkende kleuren als HEX en doorschijnende als rgba(), wat elke browser begrijpt. Typ je een kleur die al een alfakanaal heeft, dan wordt die vermenigvuldigd met de Dekking (%).
• inset plaatst de schaduw binnen de rand, alsof het kader in de pagina is gedrukt.

De schaduw volgt de border-radius van het element en verandert de lay-out nooit: ze neemt geen ruimte in en veroorzaakt geen schuifbalken.

Waarom meerdere schaduwen stapelen?

Echte schaduwen zijn geen enkele vervaagde rechthoek. Een kleine, donkere, strakke schaduw ligt vlak onder het object, en een grote, vage, wazige schaduw reikt verder. Door twee tot vijf lagen te stapelen boots je dat na, en dat oogt veel natuurlijker dan één zware schaduw. De voorinstelling Gelaagd verdubbelt bij elke stap de verschuiving en vervaging met een lage dekking, een techniek die veel designsystemen populair hebben gemaakt. Elevatie bootst de drielaagse schaduwen van Material Design na.

De eerste laag in de lijst wordt boven de andere getekend, precies zoals in de CSS-waarde. De volgorde doet er vooral toe als je inset- en buitenschaduwen combineert of felle kleuren gebruikt.

Neumorphism

Neumorphism (“soft UI”) gebruikt twee schaduwen op een element met dezelfde kleur als zijn achtergrond: een donkere naar rechtsonder verschoven en een lichte naar linksboven. De voorinstelling Neumorphism zet beide kleuren op #e0e5ec. Houd er rekening mee dat deze stijl weinig contrast heeft: knoppen die je ermee bouwt, hebben een duidelijke focusstatus en leesbare labels nodig.