Delovanje lastnosti box-shadow v CSS
Lastnost box-shadow v jeziku CSS omogoča dodajanje senc okoli okvirja elementa. Senca je določena z vodoravnim in navpičnim odmikom glede na element, zameglitvijo, polmerom razširitve ter barvo. Generator za box-shadow omogoča vizualno prilagajanje teh parametrov z drsniki, pri čemer se koda CSS posodablja v realnem času.
Pri oblikovanju sence se uporabljajo naslednje vrednosti:
- Vodoravni odmik: Premakne senco levo ali desno. Pozitivne vrednosti premaknejo senco v desno, negativne pa v levo.
- Navpični odmik: Premakne senco navzgor ali navzdol. Pozitivne vrednosti potisnejo senco navzdol, negativne pa navzgor.
- Zameglitev (Blur): Določa, kako mehki bodo robovi sence. Vrednost 0px pomeni oster rob, višje vrednosti pa ustvarijo bolj razpršeno senco.
- Razširitev: Spreminja velikost sence pred nanosom zameglitve. Pozitivna vrednost senco poveča, negativna vrednost pa jo potegne navznoter.
Nastavitve in parametri v generatorju
Orodje ponuja natančen nadzor nad vsakim parametrom sence prek namenskih vnosnih polj in drsnikov:
| Parameter | Razpon vrednosti | Opis delovanja |
|---|---|---|
| Vodoravni odmik | -50px do 50px | Premik sence po vodoravni osi. |
| Navpični odmik | -50px do 50px | Premik sence po navpični osi. |
| Zameglitev (blur) | 0px do 100px | Mehčanje in razpršitev robov sence. |
| Razširitev (spread) | -50px do 50px | Povečanje ali pomanjšanje sence. Negativne vrednosti potegnejo senco navznoter. |
| Barva sence | Izbira barve | Izbira barvnega odtenka sence. |
| Prosojnost | Nastavljiv drsnik | Določanje stopnje prosojnosti sence. |
| Notranja senca (inset) | Vklop / Izklop | Preklop med zunanjo in notranjo senco. |
Orodje vnaprej pripravi pet plasti, pri čemer ima prva plast privzete vrednosti 0 8 24 -4 in 18-odstotno prosojno črno barvo, medtem ko so ostale plasti sprva skrite.
Ustvarjanje globine z več plastmi senc
Ena sama senca pogosto deluje umetno in plosko. Za doseganje realističnega učinka globine oblikovalci in razvijalci spletnih strani pogosto zložijo več plasti senc drugo na drugo.
Z gumbom Dodaj plast lahko v generatorju ustvarite novo plast sence s privzetimi vrednostmi. Gumb Odstrani plast izbriše izbrano plast. Ko uporabljate več plasti, generator združi vse definirane sence v eno samo deklaracijo box-shadow v kodi CSS, kjer so posamezne plasti ločene z vejico.
Z zlaganjem plasti lahko kombinirate:
- Tesno, temnejšo senco z majhnim odmikom in zameglitvijo, ki definira stik elementa s podlago.
- Širšo, mehkejšo in bolj prosojno senco z večjim odmikom in zameglitvijo, ki simulira naravno razpršitev svetlobe v prostoru.
Razlika med zunanjo in notranjo senco (inset)
Privzeto se senca izriše izven meja elementa, kar ustvari občutek, da je element dvignjen nad ozadje (na primer učinek dvignjene kartice).
Ko vklopite možnost Notranja senca (inset), se smer sence obrne. Senca se izriše znotraj meja elementa, kar ustvari vizualni učinek vdolbine. Ta pristop je uporaben za oblikovanje elementov, ki morajo delovati pritisnjeni ali vtisnjeni v površino, kot so vdolbena vnosna polja ali aktivna stanja gumbov.
Zasebnost in obdelava podatkov
Vsaka senca se izriše v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo. Celoten postopek generiranja kode in vizualnega predogleda poteka lokalno na vaši napravi.
Pogosta vprašanja
Kaj natančno določajo odmik, zameglitev in razširitev?
Odmik (offset) premakne senco levo/desno in gor/dol, zameglitev (blur) zmehča njene robove, razširitev (spread) pa jo poveča ali pomanjša pred zameglitvijo. Negativna razširitev potegne senco navznoter, kar je uporabno za tesne, bližnje sence.
Kaj naredi možnost inset?
Običajna senca pade izven elementa, kot svetloba za dvignjeno kartico. Možnost Inset jo obrne navznoter, tako da je element videti vtisnjen — priročno za vdolbena vnosna polja ali pritisnjene gumbe.
Zakaj bi uporabili več kot eno plast sence?
Ena sama senca je nad določeno velikostjo videti ploska. Realistična globina običajno združuje tesno, temno senco z mehko, širšo senco — dodajte drugo plast in prilagodite vsako posebej, da dosežete ta učinek.