Razumijevanje CSS svojstva box-shadow
Svojstvo box-shadow u CSS-u omogućuje dodavanje jedne ili više sjena oko okvira elementa. Pravilno konfigurirana sjena ključna je za stvaranje vizualne hijerarhije na web stranicama, jer ljudskom oku signalizira koji su elementi podignuti iznad pozadine, a koji su u ravnini s njom.
Generator sjena (Box Shadow) omogućuje vizualno oblikovanje ovih parametara u stvarnom vremenu. Svaka se sjena iscrtava u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo, što znači da se obrada podataka odvija lokalno na Vašem uređaju.
Uloga pomaka, zamućenja i širenja u dizajnu sjene
Fizikalna svojstva sjene u CSS-u definirana su četirima ključnim numeričkim vrijednostima koje izravno utječu na percepciju dubine:
- Vodoravni pomak: Kontrolira položaj sjene po x-osi. Raspon vrijednosti na klizaču je od -50px do 50px. Pozitivne vrijednosti pomiču sjenu udesno, dok je negativne vrijednosti pomiču ulijevo.
- Okomiti pomak: Kontrolira položaj sjene po y-osi. Raspon vrijednosti je od -50px do 50px. Pozitivne vrijednosti pomiču sjenu prema dolje, a negativne prema gore.
- Zamućenje (Blur): Određuje koliko će rubovi sjene biti oštri ili meki. Raspon je od 0px (potpuno oštar rub) do 100px (vrlo mekana, raspršena sjena).
- Širenje (Spread): Definira rastezanje ili skupljanje sjene prije nego što se primijeni zamućenje. Raspon se kreće od -50px do 50px. Pozitivna vrijednost uzrokuje rast sjene u svim smjerovima, dok negativna vrijednost povlači sjenu prema unutra, čineći je manjom od samog elementa.
Razlika između normalne i unutarnje sjene
Zadani način rada CSS sjene stvara vanjsku sjenu koja se projicira iza elementa, dajući dojam da element lebdi iznad pozadine. Aktiviranjem opcije Unutarnja sjena (Inset) mijenja se smjer projekcije.
Kada je uključena opcija Unutarnja sjena (Inset), sjena se iscrtava unutar granica elementa, stvarajući vizualni efekt udubljenja. Ovaj je efekt koristan za elemente koji trebaju izgledati pritisnuto ili utisnuto u površinu, kao što su aktivirani gumbi ili polja za unos podataka.
Tehnike slaganja više slojeva za postizanje dubine
U stvarnom svijetu, sjene rijetko padaju kao jedan homogeni sloj. Da bi se postigao realizam i mekoća u web dizajnu, preporučuje se slaganje više slojeva sjena.
Alat omogućuje upravljanje slojevima pomoću sljedećih kontrola:
- Dodaj sloj: Stvara novi sloj sjene s podrazumijevanim vrijednostima.
- Ukloni sloj: Briše trenutno odabrani sloj.
Generator unaprijed iscrtava pet slojeva. Prvi sloj ima zadane vrijednosti 0 8 24 -4 uz 18% neprozirnosti crne boje, dok su ostala četiri sloja inicijalno skrivena i mogu se aktivirati po potrebi. Kada koristite više slojeva, CSS izlaz generira sve slojeve kao vrijednosti odvojene zarezom unutar jednog box-shadow svojstva. Kombiniranjem uske, tamnije sjene s vrlo niskim zamućenjem i široke, prozirnije sjene s velikim zamućenjem postiže se prirodan prijelaz i dubina.
Pregled kontrola i izlaznih vrijednosti
Sučelje alata podijeljeno je na upravljačke elemente i izlazni CSS kod. Svaki Sloj sadrži neovisne kontrole:
| Kontrola u sučelju | Raspon / Tip | Opis funkcije |
|---|---|---|
| Vodoravni pomak | -50px do 50px | Pomiče sjenu lijevo ili desno |
| Okomiti pomak | -50px do 50px | Pomiče sjenu gore ili dolje |
| Zamućenje (Blur) | 0px do 100px | Definira mekoću ruba sjene |
| Širenje (Spread) | -50px do 50px | Povećava ili smanjuje fizičku veličinu sjene |
| Boja sjene | Odabir boje | Definira nijansu sjene pomoću palete |
| Neprozirnost (Opacity) | Klizač | Podešava prozirnost sloja sjene |
| Unutarnja sjena (Inset) | Preklopnik | Prebacuje sjenu s vanjske na unutarnju stranu |
Nakon što prilagodite parametre, generirani kod se prikazuje u sekciji CSS, odakle ga možete kopirati klikom na gumb Kopiraj CSS.
Često postavljana pitanja (FAQ)
Što točno kontroliraju offset, blur i spread?
Pomak (offset) pomiče sjenu lijevo/desno i gore/dolje, zamućenje (blur) omekšava njezine rubove, a širenje (spread) je povećava ili smanjuje prije zamućenja. Negativno širenje uvlači sjenu unutra, što je korisno za usku, blisku sjenu.
Što radi opcija inset?
Normalna sjena pada izvan elementa, poput svjetla iza podignute kartice. Opcija "Inset" okreće sjenu prema unutra, pa element izgleda utisnuto — što je korisno za udubljena polja za unos ili pritisnute gumbe.
Zašto slagati više od jednog sloja sjene?
Jedna sjena iznad određene veličine izgleda ravno. Stvarna elevacija obično kombinira usku, tamnu sjenu s mekom, širom sjenom — dodajte drugi sloj i prilagodite svaki zasebno kako biste postigli taj učinak.