Design boks-skygger visuelt — juster forskyvning, uskarphet, spredning, farge og gjennomsiktighet, og kopier CSS-en.
box-shadow-egenskapen gir dybde til flate elementer. Den tar fem verdier: den horisontale forskyvningen, den vertikale forskyvningen, uskarphet-radiusen, spredningsradiusen og fargen. En subtil skygge med stor uskarphet og liten forskyvning leses som høyde; en stram skygge med sterk forskyvning leses som en hard kant. Designere justerer disse tallene etter følelse, noe som betyr å dra glidere og se resultatet — nøyaktig det dette verktøyet gjør.
Forhåndsvisningsboksen i midten viser skyggen mens du flytter glidebryterne. CSS-linjen under oppdateres i sanntid: kopier den og lim den inn i stilarket. Verktøyet støtter også innvendige skygger (inset), som tegner innenfor elementet i stedet for utenfor — nyttig for trykknapper, inndatafelt og forsenkede paneler.
Alt kjører i nettleseren. Forhåndsvisningen er en ekte CSS box-shadow brukt på en div, ikke en gjengivelse eller en tilnærming. Det du ser her er det brukerne dine vil se.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
Den utvider eller krymper skyggen før uskarphet. En positiv spredning gjør skyggen større enn elementet; en negativ spredning gjør den mindre. Null betyr at skyggen er like stor som elementet.
Ja, i CSS. Dette verktøyet genererer én skygge. For å legge til flere, skill dem med komma i stilarket.
Den tegner skyggen innenfor elementet i stedet for utenfor. Nyttig for knapper i trykket tilstand eller forsenkede paneler.
Ja. Skyggen følger border-radius til elementet automatisk.
Fordi gjennomsiktighets-glidebryteren trenger en alfakanal. Hex-farger er ugjennomsiktige; rgba lar skyggen være halvgjennomsiktig, noe som ser mer naturlig ut.
Vai.la gjør enhver URL om til en kortlenke med klikkstatistikk, QR Code og din egen biolink.
Vai.la er ikke ansvarlig for hvordan verktøyene brukes, eller for beslutninger tatt på grunnlag av resultatene.