Senca je učinek, ki spusti ali doda senco za izbranimi elementi HTML, ko so upodobljeni na spletni strani. Ta učinek je mogoče doseči z uporabo ' padajoča senca() »metoda kot vrednost za CSS« filter ' ali z uporabo ' box-shadow ” lastnina. Z uporabo lastnosti »box-shadow« je mogoče vizualno izboljšavo, uporabniško izkušnjo, poudarek in fokus usmeriti na določen ciljni element HTML.
Ta priročnik prikazuje postopek ustvarjanja učinka padajoče sence z uporabo lastnosti box-shadow:
-
- Ustvarite trdno senco z uporabo lastnosti box-shadow
- Naredite zamegljeno senco z uporabo lastnosti box-shadow
- Razširite območje sence
Kako narediti sence v CSS3 z uporabo lastnosti box-shadow?
' box-shadow Lastnost omogoča razvijalcu, da vzpostavi vizualno hierarhijo z navedbo relativnega položaja elementov na strani. Z njegovo uporabo lahko ustvarjalci spletnih strani ustvarijo iluzijo predmetov, ki mečejo sence na površine, kar daje elementom bolj interaktiven občutek.
Sintaksa
Lastnost 'box-shadow' ima sintakso:
box-shadow: [ horizontalni odmik ] [ navpični odmik ] [ polmer zameglitve ] [ polmer širjenja ] [ barva ] ;
Razlaga izrazov, uporabljenih v zgornji sintaksi:
-
- Sprva je ' horizontalni odmik ” pridobi/shrani položaj osi X in “ negativno ” vrednost nastavi senco v levo in obratno.
- ' navpični odmik ” shrani položaj osi Y, vrednost “ pozitivno ” nastavi senco v smeri navzdol in obratno v primeru “ negativno ” vrednost.
- Nato je ' polmer zameglitve ” vrednost kot iz imena nastavi zamegljenost sence.
- ' polmer širjenja ” vrednost določa, za koliko polmera naj se razširi senca.
- ' barva ' nastavi barvo sence, lahko je v ' HSL « ali » RGB ” tudi format.
Zdaj pa se sprehodimo skozi nekaj primerov za boljše razumevanje:
Primer 1: Uporabite trdno senco z uporabo lastnosti box-shadow
Za nastavitev trdne padajoče sence se kot vrednost vstavijo samo smeri in barva sence. box-shadow ” Lastnost:
< stil >.boxShadowExample {
širina: 210px;
obroba: 2px polna koruzna svila;
višina: 210px;
Barva ozadja: #f0f0f0;
box-shadow: 10px 10px gozdnozelena;
}
stil >
V zgornji kodi:
-
- Najprej je izbran element HTML z razredom ' boxShadowExample ”. In vrednost ' 210 slikovnih pik « je na voljo » višina « in » premer ” lastnosti. Uporabite tudi ' meja « in » Barva ozadja ” lastnosti za boljšo vizualizacijo.
- Nato nastavite vrednost ' 10px 10px gozdnozelena ' do ' box-shadow Lastnost CSS. ' 10 slikovnih pik ” je vodoravni in navpični odmik, ki določa lokacijo, kjer mora biti uporabljena senca. In ' gozdnozelen ” je barva sence.
Po kompilaciji je spletna stran videti takole:
Izhod potrjuje, da je bila z lastnostjo box-shadow postavljena polna padajoča senca.
Primer 2: Uporabite zamegljeno senco z uporabo lastnosti box-shadow
Če želite narediti že uporabljeno senco zamegljeno, se pred barvo vstavi še ena številska vrednost za ' box-shadow ” lastnina. Obiščite spodnjo posodobljeno kodo:
< stil >.boxShadowExample {
širina: 210px;
obroba: 2px polna koruzna svila;
višina: 210px;
barva ozadja: whitesmoke;
box-shadow: 10px 10px 15px gozdnozelena;
}
stil >
Glede na zgornjo kodo je senca zdaj ' 15 slikovnih pik ” zamegljen. Po koncu faze prevajanja je spletna stran videti takole:
Zgornja slika prikazuje, da je senca zdaj zamegljena.
Primer 3: Razširitev območja sence
Vrednost razmika je posredovana » box-shadow ” lastnost za razširitev področja sence. Vrednost razmika mora biti v številčni obliki. Tako kot v spodnjem delčku kode je območje sence razširjeno na ' 20 slikovnih pik ”:
< stil >.boxShadowExample {
širina: 210px;
obroba: 2px polna koruzna svila;
višina: 210px;
barva ozadja: whitesmoke;
box-shadow: 10px 10px 15px 20px gozdnozelena;
}
stil >
Po izvedbi je senca zdaj videti takole:
Kot lahko vidite, je območje sence zdaj povečano za 20px.
Zaključek
' box-shadow Lastnost se uporablja za ustvarjanje padajoča senca ” na izbrane elemente HTML. ' padajoča senca ' lastnost sprejme pet vrednosti, ' horizontalni odmik ”, “ navpični odmik ”, “ polmer zameglitve ”, “ polmer širjenja « in » barva ”. Vrednosti »horizontalnega odmika« in »navpičnega odmika« določata dimenzije sence, od koder naj senca pojavi. Vrednost »polmer zamegljenosti« naredi senco zamegljeno, vrednost »polmer širjenja« pa razširi območje sence.