Box Shadow Generaator

Mis see tööriist on?

box-shadow on CSS omadus, mis joonistab elemendi taha (või sisse) varju. Käsitsi kirjutatuna võtab see kuni viis väärtust järjekorras — horisontaalne nihe, vertikaalne nihe, hägusraadius, hajumisraadius ja värv —, pluss valikulise inset märksõna, mida kõike on lihtne segamini ajada või esimesel korral liiga õrnaks/liiga raskeks teha.

See tööriist muudab selle otseseks manipuleerimiseks: lohista liugurit, jälgi, kuidas vari elavas eelvaate kastis muutub, ja kopeeri täpne CSS, kui see hea välja näeb. Värvivalija koos läbipaistmatuse liuguriga genereerib automaatselt korrektse rgba() väärtuse, kuna läbipaistvad varjud näevad üldiselt paremad välja kui täiesti läbipaistmatud.

Miks seda kasutada?

• Elav eelvaade uueneb kohe iga muudatuse tegemisel — näe täpset varju enne, kui koodile pühendud.
• Täielik kontroll nihke-x, nihke-y, häguse, hajumise, värvi ja läbipaistmatuse üle ühes kohas.
• Ühe klõpsuga lisatav inset vajutatud/süvendatud välimuse jaoks tavalise ujuva langevarju asemel.
• Väljastab kopeerimiseks valmis CSS-i, kus värv on juba teisendatud rgba()-ks sinu valitud läbipaistmatuse juures.
• Töötab täielikult su brauseris — midagi, mida seadistad, ei laadita kuhugi üles.
• Tasuta, registreerimist pole vaja, töötab mobiilis.

Kuidas kasutada

1. Sea nihke-x ja nihke-y varju paigutamiseks — positiivsed väärtused liigutavad seda paremale/alla, negatiivsed vasakule/üles.
2. Suurenda hägusraadiust, et varju serva pehmendada; suurenda hajumist, et vari oleks elemendist endast suurem.
3. Vali värv ja kohanda läbipaistmatust — enamik realistlikke varje kasutab 15–40% läbipaistmatust, mitte täismusta.
4. Märgi „inset”, kui soovid, et vari ilmuks elemendi piirjoone sisse, mitte selle taha.
5. Kopeeri genereeritud CSS ja kleebi see oma stiililehele.

Näide

Sisend

Nihe: 0px, 10px · Hägusus: 20px · Hajumine: 0px · Värv: must 35% läbipaistmatusega

Tulemus

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Pehme vari otse elemendi all ilma horisontaalse nihketa — üks levinumaid kaardi/nupu varjustiile.

Üks vari vs. kihilised varjud

See tööriist loob ühe varjukihi, mis katab enamiku reaalseid kasutusjuhtumeid — nupud, kaardid, modaalaknad ja rippmenüüd kasutavad peaaegu alati üht varju. CSS toetab ka komaga eraldatud mitut varju samal elemendil keerulisemate sügavusefektide jaoks (nt kitsas, tume vari kihina laia, pehme varju all), kuid see on täiendus, mille saad käsitsi lisada: genereeri siin üks vari, seejärel kahekordista rida, kohanda teist väärtuste komplekti ja ühenda need komaga.

Levinud box-shadow mustrid

• Õrn kaardi kergitus: väike nihe (0–4px), mõõdukas hägusus (8–16px), 10–20% läbipaistmatusega must.
• Kõrgendatud modaal/rippmenüü: suurem nihe (4–10px) ja hägusus (20–30px), 20–35% läbipaistmatus tugevama hõljumistunde jaoks.
• Vajutatud/süvendatud nupp: märgi inset, kasuta väikest negatiivsena tunduvat nihet ja mõõdukat hägusust, et vari mõjuks mõlgistusena, mitte kergitusena.
• Värviline sära: vali musta asemel brändi värv, tõsta läbipaistmatus 40–60%-ni ja suurenda veidi hajumist nuppude ümber pehme sära efekti jaoks.
• Terav/kõva vari: sea hägusus ja hajumine mõlemad 0-le pehme varju asemel tugeva, nihkega siluetti jaoks.

Paaris ümardatud nurkadega

Varjusid ja ümardatud nurki kasutatakse pidevalt koos — kaardid, nupud ja modaalaknad kombineerivad peaaegu alati mõlemat. Kasuta Border Radius Generaatorit sama elemendi nurkade ümardamiseks ja rakenda mõlemad genereeritud CSS-deklaratsioonid koos.

→ Border Radius Generaator · Ühikute Teisendaja

Korduma kippuvad küsimused