Generator box-shadow

Kaj je to orodje?

box-shadow je lastnost CSS, ki izriše senco za (ali znotraj) elementa. Ročno zapisana zahteva do pet vrednosti v vrstnem redu — vodoravni odmik, navpični odmik, polmer zabrisanosti, polmer širjenja in barvo — plus izbirno ključno besedo inset, kar je vse zlahka pomešati ali narediti prešibko/premočno na prvi poskus.

To orodje spremeni to v neposredno upravljanje: povleci drsnik, opazuj, kako se senca spremeni na škatli v predogledu v živo, in kopiraj natančno kodo CSS, ko izgleda prav. Izbirnik barv skupaj z drsnikom prosojnosti samodejno generira ustrezno vrednost rgba(), saj prosojne sence na splošno izgledajo boljše kot popolnoma neprosojne.

Zakaj ga uporabiti?

• Predogled v živo se posodablja takoj, ko prilagodiš katerikoli nadzor — poglej natančno senco, preden se zavežeš h kodi.
• Popoln nadzor nad offset-x, offset-y, zabrisanostjo, širjenjem, barvo in prosojnostjo na enem mestu.
• En klik doda inset za vtisnjen/vdrt videz namesto lebdeče sence padanja.
• Izpiše kodo CSS, pripravljeno za lepljenje, kjer je barva že pretvorjena v rgba() pri izbrani prosojnosti.
• Deluje v celoti v tvojem brskalniku — nič od tega, kar nastaviš, se nikamor ne nalaga.
• Brezplačno, brez registracije, deluje na mobilnih napravah.

Kako ga uporabljati

1. Nastavi offset-x in offset-y, da pozicioniraš senco — pozitivne vrednosti jo potisnejo desno/navzdol, negativne levo/navzgor.
2. Povečaj polmer zabrisanosti, da omehčaš rob sence; povečaj širjenje, da senca postane večja od elementa samega.
3. Izberi barvo in prilagodi prosojnost — večina realističnih senc uporablja 15–40 % prosojnosti namesto polne črne.
4. Obkljukaj 'inset', če želiš, da se senca prikaže znotraj roba elementa namesto za njim.
5. Kopiraj generirano kodo CSS in jo prilepi v svojo slogovno datoteko.

Primer

Vnos

Odmik: 0px, 10px · Zabrisanost: 20px · Širjenje: 0px · Barva: črna pri 35 % prosojnosti

Rezultat

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

Mehka senca neposredno pod elementom brez vodoravnega odmika — eden najpogostejših slogov sence za kartice/gumbe.

Ena senca proti slojenim sencam

To orodje ustvari en sam sloj sence, kar pokrije veliko večino resnične uporabe — gumbi, kartice, modalna okna in spustni meniji skoraj vedno uporabljajo eno samo senco. CSS podpira tudi z vejico ločene več sence na istem elementu za bolj dodelane učinke globine (npr. tesna, temna senca, naslojena pod mehko, širšo), a to je izboljšava, ki jo lahko dodaš ročno: tu generiraj eno senco, nato podvoji vrstico, prilagodi drugi niz vrednosti in ju poveži z vejico.

Pogosti vzorci box-shadow

• Rahel dvig kartice: majhen odmik (0–4px), zmerna zabrisanost (8–16px), 10–20 % prosojnosti črne.
• Dvignjen modal/spustni meni: večji odmik (4–10px) in zabrisanost (20–30px), 20–35 % prosojnosti za močnejši občutek lebdenja.
• Vtisnjen/notranji gumb: obkljukaj inset, uporabi majhen 'negativen' odmik in zmerno zabrisanost, tako da senca deluje kot vdolbina, ne dvig.
• Barvni sij: izberi barvo znamke namesto črne, dvigni prosojnost na 40–60 % in nekoliko povečaj širjenje za mehak učinek sija okoli gumbov.
• Ostra/trda senca: nastavi zabrisanost na 0 in širjenje na 0 za trdno, odmaknjeno siluto namesto mehke sence.

Kombiniranje z zaobljenimi vogali

Sence in zaobljeni vogali se uporabljajo skupaj ves čas — kartice, gumbi in modalna okna skoraj vedno kombinirajo oba. Uporabi generator border-radius, da zaobliš vogale istega elementa, nato uporabi obe generirani izjavi CSS skupaj.

→ Generator border-radius · Pretvornik enot

Pogosta vprašanja