Generator box-shadowa

Kako koristiti generator box-shadowa

1. Kreni od predloška ili zadrži zadanu Meku sjenu. Red Predlošci nudi Meku, Tvrdu, Slojevitu, Uzdignutu, Neumorfizam, Unutarnju i Sjaj.
2. U Slojevi sjene klikni sloj da ga odabereš. Svaki sloj možeš pomaknuti gumbima Pomakni gore i Pomakni dolje ili obrisati gumbom Ukloni. Dodaj sloj udvostručuje odabrani sloj da možeš doraditi kopiju.
3. Odabrani sloj uređuješ pod Uredi odabrani sloj: povuci točku na podlozi Pomak ili koristi klizače i brojčana polja Vodoravni pomak (px), Okomiti pomak (px), Zamućenje (px) i Širenje (px).
4. Odaberi Boju sjene biračem boja ili upiši bilo koju CSS boju u polje za kod, zatim postavi Neprozirnost (%). Uključi Inset (unutarnja sjena) da se sjena crta unutar okvira.
5. Podesi Postavke pregleda (Boja okvira, Boja pozadine, Zaobljenost kutova (px)) da vidiš sjenu na svojim stvarnim bojama. One utječu samo na pregled.
6. Kopiraj deklaraciju iz CSS koda gumbom Kopiraj.

Tipkovnica: fokusiraj točku na podlozi Pomak i tipkama sa strelicama pomiči je za 1 px, a uz Shift za 10 px.

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Kako radi box-shadow

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

• x i y pomiču sjenu udesno i dolje. Negativne vrijednosti pomiču je ulijevo i prema gore. Izvor svjetlosti 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ćivanja. Negativno širenje uz velik 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 njom.
• inset stavlja sjenu unutar obruba, kao da je okvir utisnut u stranicu.

Sjena prati border-radius elementa i nikad ne mijenja raspored: ne zauzima mjesto i ne izaziva klizne trake.

Zašto slagati više sjena?

Prave sjene nisu jedan zamućeni pravokutnik. Mala, tamna, oštra sjena nalazi se tik ispod predmeta, a velika, blijeda, zamućena širi se dalje. Slaganje dva do pet slojeva oponaša to i izgleda puno prirodnije od jedne teške sjene. Predložak Slojevita u svakom koraku udvostručuje pomak i zamućenje uz nisku neprozirnost, što je tehnika koju koriste mnogi dizajnerski sustavi. Uzdignuta oponaša trosložne sjene sustava Material Design.

Prvi sloj na popisu crta se iznad ostalih, toč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 dolje i udesno te svijetlu pomaknutu gore i ulijevo. Predložak Neumorfizam postavlja obje boje na #e0e5ec. Imaj na umu da je taj stil slabog kontrasta pa gumbi izrađeni njime trebaju jasno stanje fokusa i čitljive oznake.