Box-shadow-generator

Sådan bruger du box-shadow-generatoren

1. Start med en forudindstilling, eller behold standardskyggen Blød. Rækken Forudindstillinger har Blød, Hård, Lagdelt, Højde, Neumorphism, Indvendig og Glød.
2. Under Skyggelag klikker du på et lag for at vælge det. Hvert lag kan flyttes med Flyt op og Flyt ned eller slettes med Fjern. Tilføj lag duplikerer det valgte lag, så du kan justere en kopi.
3. Rediger det valgte lag under Rediger det valgte lag: træk i prikken i feltet Forskydning, eller brug skyderne og talfelterne til Vandret forskydning (px), Lodret forskydning (px), Sløring (px) og Spredning (px).
4. Vælg en Skyggefarve med farvevælgeren, eller skriv en vilkårlig CSS-farve i kodefeltet, og angiv derefter Opacitet (%). Sæt kryds i Inset (indvendig skygge) for at tegne skyggen inde i boksen.
5. Justér Indstillinger for eksemplet (Boksens farve, Baggrundsfarve, Hjørneradius (px)), så du kan se skyggen på dine egne farver. De påvirker kun eksemplet.
6. Kopiér erklæringen fra CSS-kode med Kopiér.

Tastatur: giv prikken i feltet Forskydning fokus, og brug piletasterne til at flytte den 1 px ad gangen eller 10 px med Shift.

Værktøjet virker i din browser, og intet, du indtaster, sendes til en server.

Sådan virker box-shadow

Syntaksen for én skygge er box-shadow: [inset] x y blur spread color.

• x og y flytter skyggen mod højre og nedad. Negative værdier flytter den mod venstre og opad. En lyskilde over elementet svarer til en positiv y.
• Blur (sløring) gør kanten blødere. Den kan ikke være negativ. Sløring på 0 giver en skarp kopi af boksen.
• Spread (spredning) gør skyggen større (positiv) eller mindre (negativ), før den slores. En negativ spredning kombineret med en stor y holder skyggen under elementet i stedet for rundt om det.
• Farven har som regel gennemsigtighed. Værktøjet skriver uigennemsigtige farver som HEX og gennemsigtige som rgba(), som alle browsere forstår. Hvis du indtaster en farve, der allerede har en alfakanal, ganges den med Opacitet (%).
• inset lægger skyggen inden for kanten, som om boksen var trykket ned i siden.

Skyggen følger elementets border-radius og ændrer aldrig layoutet: den fylder intet og udløser ingen rullebjælker.

Hvorfor lægge flere skygger i lag?

Rigtige skygger er ikke ét sløret rektangel. En lille, mørk og skarp skygge ligger lige under objektet, og en stor, svag og sløret skygge breder sig længere væk. Hvis du stabler to til fem lag, efterligner du det, og resultatet ser langt mere naturligt ud end én tung skygge. Forudindstillingen Lagdelt fordobler forskydning og sløring i hvert trin med lav opacitet, en teknik mange designsystemer har gjort kendt. Højde efterligner de tre skyggelag i Material Design.

Det første lag på listen males øverst, præcis som i CSS-værdien. Rækkefølgen betyder mest, når du blander indvendige og udvendige skygger eller bruger kraftige farver.

Neumorphism

Neumorphism (»soft UI«) bruger to skygger på et element, der har samme farve som sin baggrund: en mørk forskudt nedad og mod højre og en lys forskudt opad og mod venstre. Forudindstillingen Neumorphism sætter begge farver til #e0e5ec. Husk, at stilen har lav kontrast, så knapper bygget med den har brug for en tydelig fokustilstand og læsbare tekster.