Generator senke (CSS box-shadow)

Kako se koristi generator senke

1. Počni od gotove senke ili zadrži podrazumevanu Meka senku. Red Gotove senke nudi Meka, Oštra, Slojevita, Visina, Neumorfizam, Unutrašnja i Sjaj.
2. U odeljku Slojevi senke klikni sloj da ga izabereš. Svaki sloj možeš da pomeriš dugmadima Pomeri gore i Pomeri dole ili da ga obrišeš dugmetom Ukloni. Dodaj sloj duplira izabrani sloj da možeš da podesiš njegovu kopiju.
3. Izabrani sloj menjaš u odeljku Uredi izabrani sloj: prevuci tačku u polju Pomeraj ili koristi klizače i brojčana polja Horizontalni pomeraj (px), Vertikalni pomeraj (px), Zamućenje (px) i Širenje (px).
4. Izaberi Boja senke biračem boje ili upiši bilo koju CSS boju u polje za kod, pa podesi Providnost (%). Uključi Unutrašnja senka (inset) da se senka crta unutar okvira.
5. Prilagodi Podešavanja pregleda (Boja okvira, Boja pozadine, Zaobljenje uglova (px)) da vidiš senku na svojim pravim bojama. Ona utiču samo na pregled.
6. Kopiraj deklaraciju iz odeljka CSS kod dugmetom Kopiraj.

Tastatura: fokusiraj tačku u polju Pomeraj i strelicama je pomeraj za 1 px, a uz Shift za 10 px.

Alat radi u tvom pregledaču. Ništa što upišeš ne šalje se na server.

Kako radi box-shadow

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

• x i y pomeraju senku udesno i naniže. Negativne vrednosti je pomeraju ulevo i naviše. Izvor svetlosti iznad elementa znači pozitivno y.
• Zamućenje (blur) omekšava ivicu. Ne može biti negativno. Zamućenje 0 daje kopiju okvira oštrih ivica.
• Širenje (spread) povećava (pozitivno) ili smanjuje (negativno) senku pre nego što se zamuti. Negativno širenje uz veliko y drži senku ispod elementa umesto oko njega.
• Boja obično nosi providnost. Ovaj alat neprovidne boje ispisuje kao HEX, a providne kao rgba(), što razumeju svi pregledači. Ako upišeš boju koja već ima alfa kanal, Providnost (%) se množi sa njom.
• inset stavlja senku unutar ivice, kao da je okvir utisnut u stranicu.

Senka prati border-radius elementa i nikada ne menja raspored: ne zauzima mesto i ne izaziva klizače.

Zašto slagati više senki?

Prave senke nisu jedan zamućeni pravougaonik. Mala, tamna, oštra senka nalazi se tik ispod predmeta, a velika, bleda i mutna širi se dalje. Slaganje dva do pet slojeva oponaša to i izgleda mnogo prirodnije od jedne teške senke. Gotova senka Slojevita udvostručuje pomeraj i zamućenje na svakom koraku uz malu providnost, tehniku koju su popularizovali mnogi dizajn sistemi. Visina oponaša senke sa tri sloja iz sistema Material Design.

Prvi sloj na listi crta se iznad ostalih, tačno kao u CSS vrednosti. Redosled je važan uglavnom kad mešaš unutrašnje i spoljašnje senke ili koristiš jake boje.

Neumorfizam

Neumorfizam („meki UI“) koristi dve senke na elementu iste boje kao pozadina: tamnu pomerenu dole i udesno i svetlu pomerenu gore i ulevo. Gotova senka Neumorfizam postavlja obe boje na #e0e5ec. Imaj na umu da ovaj stil ima slab kontrast, pa dugmad izrađena njime treba da imaju jasno stanje fokusa i čitljive oznake.