Box Shadow Generator
Generate box shadows
Generate box shadows Wordt lokaal uitgevoerd in uw browser
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
De Box Shadow Generator bouwt een schaduw op van offset, vervaging, spreiding, kleur en dekking, met een live preview en de CSS. De twee instellingen die mensen verwarren zijn vervaging en spreiding: vervaging verzacht de rand naar buiten en naar binnen ten opzichte van de vorm van de schaduw, terwijl spreiding de eigen grootte van de schaduw vergroot of verkleint voordat er vervaging optreedt. Negatieve spreiding zorgt ervoor dat een zachte schaduw er niet uitziet als een halo. Daarom gebruiken de standaardwaarden hier een kleine negatieve waarde.
Where people use the
- Een hoogteschaal bouwen voor kaarten, modals en menu's.
- Een ingedrukte of gefocuste staat maken met een inzetschaduw.
- Een rand verzachten zonder een echte rand toe te voegen.
- Controleren hoe de schaduwwaarden van een ontwerpspecificatie er daadwerkelijk uitzien.
How to use the
- 1
Stel de offsets in
Offset X verplaatst de schaduw naar rechts, offset Y verplaatst deze naar beneden. Negatieve waarden verplaatsen het de andere kant op.
- 2
Stel vervaging en spreiding in
Vervaging verzacht de rand. Verspreiding vergroot de schaduw voordat deze vervaagt; gebruik een kleine negatieve spreiding voor een schaduw die onder het element zit in plaats van eromheen.
- 3
Kies kleur en dekking
Puur zwart bij volledige dekking ziet er hard uit. Een lage dekking, ergens tussen de 8 en 20 procent, wordt eerder als diepte dan als vuil gelezen.
- 4
Vink inzet aan als je een innerlijke schaduw wilt
Inset trekt de schaduw binnen het element in plaats van erachter, wat past bij geperste toestanden en putten.
- 5
Kopieer de CSS
De regel bevat de rgba-kleur, zodat deze rechtstreeks in een stylesheet kan worden geplakt.
Tips en beste praktijken
- Twee gelaagde schaduwen zien er veel beter uit dan één zware.
- Houd de lichtbron consistent: als één kaart goed wordt geworpen, moeten ze dat allemaal doen.
- Kijk of er schaduwen worden geknipt door een ouder terwijl de overloop verborgen is.
Veelgestelde vragen
Wat is het verschil tussen onscherpte en spreiding?
Verspreiding verandert de grootte van de vorm van de schaduw vóór enige verzachting: positief om te groeien en negatief om te krimpen. Vervaging verzacht vervolgens de rand met de opgegeven straal. Om een strakke schaduw onder een kaart te krijgen, heb je een kleine onscherpte en een licht negatieve spreiding nodig.
Waarom ziet mijn schaduw er grijs en vies uit?
Omdat het puur zwart is met een hoge dekking. Gebruik een lage alfa, ongeveer 0,08 tot 0,2, en overweeg om de schaduw naar de achtergrondtint te verven, die veel natuurlijker leest.
Kan ik meer dan één schaduw hebben?
Ja. Scheid verschillende schaduwen met komma's in dezelfde declaratie; ze stapelen van voren naar achteren, dus de eerste staat bovenaan. Gelaagde schaduwen laten zien hoe zachte, realistische hoogten worden opgebouwd.
Heeft een doosschaduw invloed op de lay-out?
Nee. Schaduwen worden buiten de doos van het element geschilderd en nemen geen ruimte in beslag, zodat ze kunnen worden geknipt door een ouder met verborgen overloop of door een strakke container.
Is het animeren van een doosschaduw duur?
Ja, relatief. Het veranderen van vervaging of spreiding dwingt de browser om de schaduw elk frame opnieuw te schilderen. Voor vloeiende bewegingen kunt u de dekking animeren of in plaats daarvan transformeren, of cross-faden tussen twee vooraf weergegeven schaduwen.