Generator sence elementa (box-shadow)

Kako uporabljati generator sence elementa

1. Začni s predlogo ali pusti privzeto Mehka senco. Vrstica Predloge ponuja Mehka, Ostra, Večplastna, Dvignjenost, Neumorfizem, Notranja in Sij.
2. V razdelku Plasti sence klikni plast, da jo izbereš. Vsako plast lahko premakneš z gumbom Premakni gor ali Premakni dol ali jo izbrišeš z gumbom Odstrani. Dodaj plast podvoji izbrano plast, tako da lahko prilagajaš kopijo.
3. Izbrano plast urejaš pod Uredi izbrano plast: povleci piko v polju Odmik ali uporabi drsnike in številska polja Vodoravni odmik (px), Navpični odmik (px), Zamegljenost (px) in Razširitev (px).
4. Z izbirnikom barv izberi Barva sence ali v kodno polje vpiši poljubno CSS-barvo, nato nastavi Neprosojnost (%). Obkljukaj Notranja senca (inset), če želiš senco narisati znotraj okvirja.
5. Z Nastavitve predogleda (Barva okvirja, Barva ozadja, Polmer vogalov (px)) si oglej senco na svojih dejanskih barvah. Vplivajo samo na predogled.
6. Deklaracijo iz polja Koda CSS kopiraš z gumbom Kopiraj.

Tipkovnica: izberi piko v polju Odmik in s smernimi tipkami jo premakneš za 1 px, s Shiftom pa za 10 px.

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Kako deluje box-shadow

Sintaksa ene sence je box-shadow: [inset] x y blur spread barva.

• x in y premakneta senco v desno in navzdol. Negativne vrednosti jo premaknejo v levo in navzgor. Svetlobni vir nad elementom pomeni pozitiven y.
• Zamegljenost omehča rob. Ne more biti negativna. Zamegljenost 0 da ostro kopijo okvirja.
• Razširitev senco poveča (pozitivna vrednost) ali skrči (negativna), še preden se zamegli. Negativna razširitev z velikim y obdrži senco pod elementom namesto okoli njega.
• Barva običajno vsebuje prosojnost. To orodje neprosojne barve zapiše kot HEX, prosojne pa kot rgba(), kar razumejo vsi brskalniki. Če vneseš barvo, ki že ima kanal alfa, jo Neprosojnost (%) pomnoži.
• inset postavi senco znotraj obrobe, kot da bi bil okvir vtisnjen v stran.

Senca sledi lastnosti border-radius elementa in nikoli ne spremeni postavitve: ne zavzame prostora in ne sproži drsnih trakov.

Zakaj uporabiti več plasti sence?

Prave sence niso en sam zamegljen pravokotnik. Majhna, temna, tesna senca leži tik pod predmetom, velika, bleda in zamegljena pa se razprostira dlje. Z zlaganjem dveh do petih plasti to posnemaš in rezultat je videti veliko naravnejši kot ena težka senca. Predloga Večplastna pri vsakem koraku podvoji odmik in zamegljenost z nizko neprosojnostjo; to tehniko uporablja veliko oblikovalskih sistemov. Dvignjenost posnema trislojne sence sistema Material Design.

Prva plast na seznamu je naslikana nad ostalimi, natanko tako kot v vrednosti CSS. Vrstni red je pomemben predvsem, kadar mešaš notranje in zunanje sence ali uporabljaš močne barve.

Neumorfizem

Neumorfizem (»mehki uporabniški vmesnik«) na elementu, ki ima enako barvo kot ozadje, uporablja dve senci: temno, zamaknjeno navzdol in v desno, ter svetlo, zamaknjeno navzgor in v levo. Predloga Neumorfizem obe barvi nastavi na #e0e5ec. Upoštevaj, da ima ta slog nizek kontrast, zato morajo imeti gumbi, ustvarjeni z njim, jasno stanje fokusa in berljive oznake.