CSS box-shadow-generator: livevisning, kopiér koden

CSS box-shadow-generator

Denne generatoren bygger én CSS box-shadow-verdi fra seks kontroller: horisontal forskyvning, vertikal forskyvning, uskarphetsradius, spredningsradius, en skyggefarge med sin egen opasitetsglidebryter og en inset-bryter. To ekstra fargevelgere setter forhåndsvisningsboksen og bakgrunnen, slik at skyggen ser riktig ut både på lyse og mørke flater, og fire forhåndsinnstillinger, soft, hard, glow og inset, laster en ferdig kombinasjon med ett klikk. Hver endring oppdaterer straks box-shadow-linjen under forhåndsvisningen, klar til å kopieres.

Slik bygges box-shadow-verdien

CSS skriver en skygge i en fast rekkefølge: horisontal forskyvning, vertikal forskyvning, uskarphetsradius, spredningsradius, deretter en farge; for å tegne skyggen innenfor kanten av boksen i stedet for bak den, settes ordet inset foran. Horisontal og vertikal forskyvning flytter skyggen sidelengs eller loddrett, og begge godtar negative verdier ned til -50px, slik at en skygge kan falle til venstre for boksen eller ligge over den. Uskarphetsradiusen, fra 0 til 100px, mykner skyggens kant, og spredningsradiusen, fra -50 til 50px, forstørrer eller forminsker skyggen uavhengig av boksens egen størrelse. Fargevelgerens heksverdi deles opp i røde, grønne og blå komponenter, og opasitetsglidebryteren, fra 0 til 1, blir den fjerde verdien inne i rgba(); ved 0 er skyggen helt gjennomsiktig, ved 1 tilsvarer den nøyaktig den valgte fargen.

Uregnet eksempel

Med en horisontal forskyvning på 8px, en vertikal på 4px, en uskarphet på 20px og en spredning på -3px, sammen med skyggefargen #be123c og en opasitet på 0,4, blir resultatet box-shadow: 8px 4px 20px -3px rgba(190, 18, 60, 0.4). Hekskoden #be123c deles opp i rødt 190, grønt 18 og blått 60, og 0,4 fra opasitetsglidebryteren blir direkte den fjerde rgba()-verdien uten ytterligere omregning. Å slå på inset med de samme seks verdiene tegner den identiske skyggen innenfor kanten av boksen i stedet for bak den, en effekt som ofte brukes til nedtrykte knapper eller forsenkede inntastingsfelt.

Kopierbar CSS-utdata

.kort {
  box-shadow: 8px 4px 20px -3px rgba(190, 18, 60, 0.4);
}