Skyggegenerator (CSS box-shadow)

Slik bruker du skyggegeneratoren

1. Start med en forhåndsinnstilling, eller behold standardskyggen Myk. Raden Forhåndsinnstillinger har Myk, Hard, Flerlags, Høyde, Neumorphism, Innvendig og Glød.
2. Under Skyggelag klikker du på et lag for å velge det. Hvert lag kan flyttes med Flytt opp og Flytt ned, eller slettes med Fjern. Legg til lag dupliserer det valgte laget, slik at du kan justere en kopi.
3. Rediger det valgte laget under Rediger det valgte laget: dra prikken i feltet Forskyvning, eller bruk glidebryterne og tallfeltene for Horisontal forskyvning (px), Vertikal forskyvning (px), Uskarphet (px) og Utvidelse (px).
4. Velg en Skyggefarge med fargevelgeren, eller skriv inn en hvilken som helst CSS-farge i kodefeltet, og sett deretter Dekkevne (%). Huk av for Innvendig (indre skygge) for å tegne skyggen inni boksen.
5. Juster Innstillinger for forhåndsvisning (Boksfarge, Bakgrunnsfarge, Hjørneradius (px)) for å se skyggen på dine egne farger. De påvirker bare forhåndsvisningen.
6. Kopier deklarasjonen fra CSS-kode med Kopier.

Tastatur: sett prikken i feltet Forskyvning i fokus og bruk piltastene for å flytte den 1 px om gangen, eller 10 px med Shift.

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Slik fungerer box-shadow

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

• x og y flytter skyggen mot høyre og nedover. Negative verdier flytter den mot venstre og oppover. Med lyskilden over elementet er y positiv.
• Uskarphet myker opp kanten. Den kan ikke være negativ. Uskarphet 0 gir en skarp kopi av boksen.
• Utvidelse gjør skyggen større (positiv) eller mindre (negativ) før den gjøres uskarp. En negativ utvidelse med stor y holder skyggen under elementet i stedet for rundt det.
• Farge har vanligvis gjennomsiktighet. Dette verktøyet skriver ugjennomsiktige farger som HEX og halvgjennomsiktige som rgba(), noe alle nettlesere forstår. Hvis du skriver inn en farge som allerede har en alfakanal, ganges Dekkevne (%) med den.
• inset legger skyggen innenfor kanten, som om boksen var presset ned i siden.

Skyggen følger border-radius til elementet og endrer aldri layouten: den tar ingen plass og utløser ikke rullefelt.

Hvorfor bruke flere skygger i lag?

Ekte skygger er ikke ett uskarpt rektangel. En liten, mørk og tett skygge ligger rett under objektet, og en stor, svak og uskarp skygge brer seg lenger bort. Når du legger to til fem lag oppå hverandre, etterligner du dette, og det ser mye mer naturlig ut enn én tung skygge. Forhåndsinnstillingen Flerlags dobler forskyvning og uskarphet i hvert trinn med lav dekkevne, en teknikk som mange designsystemer har gjort kjent. Høyde etterligner de tredelte skyggene i Material Design.

Det første laget i listen males øverst, akkurat som i CSS-verdien. Rekkefølgen betyr mest når du blander innvendige og utvendige skygger eller bruker sterke farger.

Neumorphism

Neumorphism («soft UI») bruker to skygger på et element som har samme farge som bakgrunnen: en mørk forskjøvet nedover og mot høyre, og en lys forskjøvet oppover og mot venstre. Forhåndsinnstillingen Neumorphism setter begge fargene til #e0e5ec. Husk at denne stilen har lav kontrast, så knapper som bygges med den, trenger en tydelig fokustilstand og lesbare etiketter.