Senka oko elementa se crta iz pet brojeva i jedne boje: koliko se pomera u stranu i naniže, koliko joj je ivica meka, koliko raste ili se skuplja i koliko je providna. Pomerajte klizače ispod, gledajte kako se kutija menja u realnom vremenu i kopirajte gotovu box-shadow deklaraciju pravo u svoj stil.
Kako radi
Horizontalni i vertikalni pomeraj guraju senku levo/desno i gore/dole; pozitivne vrednosti je pomeraju udesno i naniže, negativne u suprotnom smeru. Poluprečnik zamućenja omekšava ivicu — vrednost 0 daje oštru konturu, veći brojevi rasplinut sjaj. Širenje uvećava senku (pozitivno) ili je uvlači (negativno) pre nego što se primeni zamućenje, i tako pravite senku užu ili širu od same kutije. Boja se spaja sa klizačem providnosti u rgba() vrednost, pa alfa kanal određuje koliko senka propušta pozadinu — većina stvarnih senki je znatno ispod pune jačine.
Kada uključite „inset“, senka se crta unutar elementa umesto spolja, što je korisno za pritisnute dugmad, udubljena polja i unutrašnje ivice. Jednom elementu možete dodeliti i više senki tako što deklaracije razdvojite zapetama — čest trik za slojevitu elevaciju u stilu Material dizajna — mada ovaj generator pravi jednu senku koju možete umnožiti i ručno dopuniti. box-shadow rade svi savremeni pregledači bez prefiksa; svojstvo bez prefiksa radi još od Internet Explorera 9.
Primeri iz prakse
Suptilna senka kartice
X 0, Y 4, zamućenje 12, širenje 0, crna sa 12% providnosti daju box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); — mekano podizanje koje deluje kao izdignuta kartica, bez preteranog utiska.
Oštra pomerena senka
X 6, Y 6, zamućenje 0, širenje 0, crna sa 100% providnosti daju box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1); — jasan blok bez zamućenja, tipičan za neobrutalistički i retro dizajn.
Udubljeno (inset) polje
Uključite inset uz X 0, Y 2, zamućenje 4, širenje 0, crna sa 15% daju box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15); — utisak uvučenog polja u fokusu ili pritisnutog prekidača.
Česta pitanja
Šta radi vrednost širenja (spread)?
Širenje menja veličinu senke pre nego što se primeni zamućenje. Pozitivno širenje čini senku većom od elementa sa svih strana; negativno je skuplja ka unutra. Zgodno je za senku koja tesno prati kutiju ili se ravnomerno prostire izvan nje.
Koja je razlika između inset i spoljne senke?
Podrazumevano se senka crta izvan elementa, kao da lebdi iznad stranice. Ključna reč inset je prebacuje unutra, pa se senka baca na unutrašnju površinu — to je efekat koji želite za pritisnuta dugmad, udubljene panele i unutrašnji sjaj.
Kako da dodam više senki?
Svojstvo box-shadow prima listu razdvojenu zapetama, na primer box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.08);. Svaka senka se crta preko prethodne, i tako se pravi slojevita, uverljiva elevacija. Ovaj alat daje jednu senku, pa je kopirajte i dodatne vrednosti nalepite iza zapete.
Zašto koristiti rgba i klizač providnosti umesto pune boje?
Stvarne senke su poluprovidne, pa boje ono što je iza njih umesto da nacrtaju ravan blok. rgba() sa niskom alfom (najčešće 10–25%) čini senku uverljivom i propušta pozadinu, što potpuno neprovidna boja ne može.
Mogu li pomeraji biti negativni?
Da. Negativan horizontalni pomeraj baca senku levo od elementa, a negativan vertikalni je baca naviše. Kombinujte ih da postavite izvor svetlosti kao da dolazi iz donjeg desnog ugla.
Koja je razlika između box-shadow i filter: drop-shadow?
box-shadow prati pravougaoni okvir elementa (poštujući border-radius), pa uvek crta zaobljeni pravougaonik. filter: drop-shadow() prati stvarni oblik koji je nacrtan, uključujući providnost u PNG-u i nepravilne SVG-ove, pa može da baci senku i na nepravougaone oblike. Za obične kutije je box-shadow pravi izbor i bolje se ponaša.
Da li box-shadow utiče na raspored?
Ne. Senke se crtaju izvan modela kutije i nikada ne zauzimaju prostor niti pomeraju druge elemente, za razliku od ivice. Zato senku možete dodati ili uvećati bez ponovnog raspoređivanja stranice.
Da li su velike zamućene senke loše za performanse?
Veoma veliki poluprečnici zamućenja, mnogo naslaganih senki ili senke koje se animiraju u svakom kadru mogu biti skupe za iscrtavanje, naročito na slabijim uređajima. Za statični interfejs retko je problem; ako animirate senku, razmislite o animiranju providnosti na pseudo-elementu.
Kako da napravim elevaciju u stilu Material dizajna?
Material elevacija koristi dve ili tri naslagane senke odjednom — tesnu, tamniju senku blizu elementa i širu, svetliju dalje. Napravite svaki sloj ovde i spojite ih u jednu box-shadow deklaraciju razdvojenu zapetama da dobijete željeni nivo elevacije.
Zašto zaobljena kutija i dalje ima kvadratnu senku?
Ne bi trebalo — box-shadow poštuje border-radius, pa zaobljena kutija automatski dobija zaobljenu senku. Kvadratna senka obično znači da je radius postavljen na dete-element, a ne na onaj koji nosi senku.
Šta se dešava ako zamućenje postavim na negativan broj?
Negativan poluprečnik zamućenja nije ispravan CSS i pregledači ga ignorišu, pa ovaj generator ograničava zamućenje na nulu. Ako želite senku manju od kutije, koristite negativno širenje.
Da li išta što unesem napušta moj računar?
Ne. Pregled i generisani kod nastaju u potpunosti u vašem pregledaču pomoću JavaScripta; ništa se ne šalje na server.
Srodni alati
Generator CSS gradijenta
Napravi linearne i radijalne CSS gradijente uz živi pregled i kopiraj kod.
Alati za programere
CSS minifikacija
Minifikujte CSS u pregledaču — uklonite komentare i razmake da smanjite fajl, uz poređenje veličine pre i posle. Ništa se ne šalje.
Alati za programere
Konverter boja
Pretvarajte boje između HEX, RGB i HSL, sa podrškom za providnost i živim uzorkom. Radi u pregledaču.
Alati za programere
Provera kontrasta boja
Proverite WCAG odnos kontrasta između boje teksta i pozadine, sa AA i AAA prolazom ili padom.
Alati za programere
PX u REM konverter
Pretvarajte između px i rem za bilo koju osnovnu veličinu fonta, uz brzu referentnu tabelu. Za rad sa CSS-om.
Alati za programere
JSON formatiranje
Ulepšajte, proverite ili minifikujte JSON u pregledaču — uz jasne poruke o greškama. Ništa se ne šalje.
Alati za programere