Generator box-shadow

Kako koristiti generator box-shadow

1. Počni od predloška ili zadrži zadanu Meko sjenu. Red Predlošci nudi Meko, Tvrdo, Slojevito, Uzdignuto, Neumorfizam, Unutrašnje i Sjaj.
2. U dijelu Slojevi sjene klikni na sloj da ga odabereš. Svaki sloj možeš pomjerati sa Pomjeri gore i Pomjeri dolje ili ga obrisati sa Ukloni. Dodaj sloj duplicira odabrani sloj da možeš doraditi kopiju.
3. Odabrani sloj uređuješ pod Uredi odabrani sloj: prevuci tačku na podlozi Pomak ili koristi klizače i brojčana polja Horizontalni pomak (px), Vertikalni pomak (px), Zamućenje (px) i Širenje (px).
4. Odaberi Boja sjene biračem boja ili upiši bilo koju CSS boju u polje za kôd, pa postavi Neprozirnost (%). Uključi Inset (unutrašnja sjena) da se sjena crta unutar okvira.
5. Podesi Postavke pregleda (Boja okvira, Boja pozadine, Radijus uglova (px)) da vidiš sjenu na svojim stvarnim bojama. Oni utiču samo na pregled.
6. Kopiraj deklaraciju iz polja CSS kôd dugmetom Kopiraj.

Tastatura: fokusiraj tačku na podlozi Pomak i koristi tipke sa strelicama da je pomjeriš za 1 px, a uz Shift za 10 px.

Sve se događa u tvom pregledniku. Ništa što upišeš ne šalje se na server.

Kako funkcioniše box-shadow

Sintaksa jedne sjene je box-shadow: [inset] x y blur spread color.

• x i y pomjeraju sjenu udesno i nadolje. Negativne vrijednosti je pomjeraju ulijevo i nagore. Izvor svjetla iznad elementa znači pozitivan y.
• Zamućenje (blur) omekšava rub. Ne može biti negativno. Zamućenje 0 daje oštru kopiju okvira.
• Širenje (spread) povećava (pozitivno) ili smanjuje (negativno) sjenu prije zamućenja. Negativno širenje uz veliki y drži sjenu ispod elementa umjesto oko njega.
• Boja obično nosi prozirnost. Ovaj alat neprozirne boje zapisuje kao HEX, a prozirne kao rgba(), što razumiju svi preglednici. Ako upišeš boju koja već ima alfa kanal, Neprozirnost (%) se množi s njim.
• inset stavlja sjenu unutar ivice, kao da je okvir utisnut u stranicu.

Sjena prati border-radius elementa i nikad ne mijenja raspored: ne zauzima prostor i ne izaziva klizače za pomicanje.

Zašto složiti više sjena?

Prave sjene nisu jedan zamućeni pravougaonik. Mala, tamna i oštra sjena leži tik ispod predmeta, a velika, blijeda i zamućena širi se dalje. Slaganje dva do pet slojeva oponaša to i izgleda mnogo prirodnije od jedne teške sjene. Predložak Slojevito u svakom koraku udvostručuje pomak i zamućenje uz nisku neprozirnost, tehniku koju koriste mnogi dizajn sistemi. Uzdignuto oponaša troslojne sjene iz Material Designa.

Prvi sloj u listi crta se iznad ostalih, tačno kao u CSS vrijednosti. Redoslijed je važan uglavnom kad miješaš inset i vanjske sjene ili koristiš jake boje.

Neumorfizam

Neumorfizam („meki UI“) koristi dvije sjene na elementu koji ima istu boju kao pozadina: tamnu pomaknutu nadolje i udesno te svijetlu pomaknutu nagore i ulijevo. Predložak Neumorfizam postavlja obje boje na #e0e5ec. Imaj na umu da ovaj stil ima nizak kontrast, pa dugmad izrađena s njim trebaju jasno stanje fokusa i čitljive oznake.