Slik fungerer CSS-egenskapen box-shadow
Egenskapen box-shadow i CSS brukes til å legge til skyggeeffekter rundt rammen på et element. For å mestre denne egenskapen må man forstå hvordan de ulike parameterne samhandler for å lure det menneskelige øyet til å oppfatte dybde på en flat skjerm.
Når du designer en skygge, definerer du hvordan lyset treffer elementet. Dette gjøres ved å justere posisjon, skarphet og størrelse. CSS-syntaksen krever spesifikke verdier i en bestemt rekkefølge, og denne generatoren lar deg manipulere disse verdiene visuelt og i sanntid.
Parametere for skyggedesign
For å skape nøyaktige visuelle effekter må du justere flere uavhengige egenskaper. Verktøyet gir deg direkte kontroll over følgende parametere for hvert lag:
- Horisontal forskyvning: Justerer skyggens posisjon langs x-aksen. En positiv verdi flytter skyggen til høyre, mens en negativ verdi flytter den til venstre. Glidebryteren går fra -50px til 50px.
- Vertikal forskyvning: Justerer skyggens posisjon langs y-aksen. En positiv verdi flytter skyggen nedover, mens en negativ verdi flytter den oppover. Glidebryteren går fra -50px to 50px.
- Uskarphet (blur): Bestemmer hvor myke eller skarpe kantene på skyggen skal være. En verdi på 0px gir en helt skarp kant, mens høyere verdier opptil 100px sprer fargen utover i en jevn overgang.
- Spredning (spread): Bestemmer om skyggen skal utvides eller krympes før uskarpheten tas i bruk. En positiv verdi gjør skyggen større, mens en negativ verdi trekker skyggen innover. Glidebryteren går fra -50px til 50px.
- Skyggefarge og Dekkevne (opacity): Lar deg velge fargetone og hvor gjennomsiktig skyggen skal være. Dette er avgjørende for å unngå for harde, urealistiske skygger.
Forskjellen på ytre skygge og indre skygge (inset)
Standardoppførselen til en box-shadow er å kaste skyggen på utsiden av elementets ramme. Dette skaper en illusjon av at elementet svever eller er løftet opp fra bakgrunnen, som et fysisk kort.
Ved å aktivere Indre skygge (inset) snur du denne effekten fullstendig. Skyggen tegnes da på innsiden av elementets ramme. Dette får elementet til å se nedsenket eller presset inn i bakgrunnen. Denne teknikken brukes ofte på inndatafelt (inputs) eller knapper som er trykket ned, for å gi brukeren visuell tilbakemelding om interaksjon.
Skape dybde med flere skyggelag
En enkelt skygge kan ofte se kunstig eller flat ut hvis den strekkes for langt. I den fysiske verden består skygger sjelden av bare én skarp eller ensartet mørk overgang, fordi lys reflekteres fra flere vinkler.
For å oppnå realistisk dybde kan du stable flere skyggelag oppå hverandre. Verktøyet pre-rendrer fem lag, der det første laget starter med standardverdiene 0 8 24 -4 og en 18% gjennomsiktig svart farge, mens de resterende fire lagene i utgangspunktet er skjult.
Ved å bruke Legg til lag kan du aktivere og finjustere flere lag uavhengig av hverandre. En vanlig teknikk er å kombinere:
- Et tett, mørkt skyggelag med lav uskarphet og negativ spredning for å definere elementets fysiske nærhet til bakgrunnen.
- Et bredere, lysere skyggelag med høy uskarphet og lav dekkevne for å simulere det generelle omgivelseslyset.
Når du har konfigurert lagene dine, genererer verktøyet en samlet CSS-kode der lagene listes opp som kommaseparerte verdier i en enkelt box-shadow-deklarasjon. Du kan fjerne uønskede lag igjen ved å bruke knappen Fjern lag.
Personvern og lokal prosessering
Når du designer skygger med dette verktøyet, foregår all databehandling lokalt. Hver skygge rendres i nettleseren din. Ingenting du angir her lastes opp til BroBroGo. Dette betyr at du kan arbeide med designet ditt uten at parametere, fargevalg eller kildekode sendes over internett.
Ofte stilte spørsmål
Hva styrer egentlig offset, blur og spread?
Forskyvning (offset) flytter skyggen til venstre/høyre og opp/ned, uskarphet (blur) gjør kantene mykere, og spredning (spread) gjør skyggen større eller mindre før den blir uskarp. En negativ spredning trekker skyggen innover, noe som er nyttig for en tett og nær skygge.
Hva gjør inset-valget?
En vanlig skygge faller på utsiden av elementet, som lyset bak et opphøyd kort. Inset flipper den inn på innsiden i stedet, slik at elementet ser nedsenket ut — praktisk for dype inndatafelt eller nedtrykte knapper.
Hvorfor stable mer enn ett skyggelag?
En enkelt skygge ser flat ut over en viss størrelse. Realistisk dybde kombinerer vanligvis en tett, mørk skygge med en myk, bredere skygge — legg til et ekstra lag og juster dem uavhengig for å oppnå denne effekten.