Nuleidžiamas šešėlis yra efektas, kuris nuleidžia arba prideda šešėlį už pasirinktų HTML elementų, kai jie pateikiami tinklalapyje. Šį efektą galima pasiekti naudojant ' mesti šešėlį() 'metodas kaip CSS reikšmė' filtras “ nuosavybę arba naudojant „ dėžutė-šešėlis ' nuosavybė. Naudojant „box-shadow“ ypatybę, vizualinis patobulinimas, vartotojo patirtis, akcentai ir dėmesys gali būti atkreiptas į konkretų tikslinį HTML elementą.
Šiame vadove parodyta šešėlių efekto kūrimo procedūra naudojant langelio šešėlio savybę:
-
- Sukurkite kietą šešėlį naudodami langelio šešėlio ypatybę
- Sukurkite neryškų šešėlį naudodami langelio šešėlio ypatybę
- Išplėskite šešėlių sritį
Kaip sukurti šešėlius CSS3 naudojant langelio šešėlio ypatybę?
„ dėžutė-šešėlis ” ypatybė leidžia kūrėjui nustatyti vaizdinę hierarchiją, nurodant santykinę elementų padėtį puslapyje. Jį naudodami tinklalapių kūrėjai gali sukurti iliuziją, kad objektai meta šešėlius ant paviršių, suteikdami elementams interaktyvesnį pojūtį.
Sintaksė
Ypatybės „box-shadow“ sintaksė yra tokia:
langelio šešėlis: [ horizontalus poslinkis ] [ vertikalus poslinkis ] [ suliejimo spindulys ] [ plitimo spindulys ] [ spalva ] ;
Terminų, naudojamų aukščiau pateiktoje sintaksėje, paaiškinimas:
-
- Iš pradžių „ horizontalus poslinkis “ nuskaito / išsaugo X ašies padėtį, o „ neigiamas “ reikšmė nustato šešėlį į kairę ir atvirkščiai.
- „ vertikalus poslinkis “ reikšmė išsaugo Y ašies padėtį, „ teigiamas “ reikšmė nustato šešėlį žemyn, ir atvirkščiai, jei „ neigiamas “ vertė.
- Toliau „ suliejimo spindulys “ reikšmė, kaip iš pavadinimo, nustato šešėlio neryškumą.
- „ plitimo spindulys “ reikšmė nurodo, kokiu spinduliu šešėlis turėtų išsiplėsti.
- „ spalva “ nustato šešėlio spalvą, ji gali būti „ HSL “ arba „ RGB “ formatu taip pat.
Dabar panagrinėkime kelis pavyzdžius, kad geriau suprastume:
1 pavyzdys: Taikykite kietą šešėlį naudodami langelio šešėlio ypatybę
Norint nustatyti kietą šešėlį, tik kryptys ir šešėlio spalva įterpiamos kaip reikšmė į „ dėžutė-šešėlis ' nuosavybė:
< stilius >.boxShadowExample {
plotis: 210px;
kraštinė: 2 pikseliai kieto kukurūzų šilko;
aukštis: 210px;
fono spalva: #f0f0f0;
langelis-šešėlis: 10px 10px miško žalias;
}
stilius >
Aukščiau pateiktame kode:
-
- Pirmiausia pasirenkamas HTML elementas, kurio klasė yra ' boxShadowExample “. Ir vertė ' 210 taškų “ pateikiama „ aukščio “ ir „ plotis “ savybes. Taip pat naudokite „ siena “ ir „ fono spalva “ savybės geresnei vizualizacijai.
- Tada nustatykite reikšmę ' 10 piks. 10 piks. miško žalia “ į „ dėžutė-šešėlis “ CSS nuosavybė. „ 10 piks “ – tai horizontalus ir vertikalus poslinkis, nurodantis vietą, kur reikia taikyti šešėlį. Ir ' miško žaluma “ – tai šešėlio spalva.
Po kompiliavimo tinklalapis atrodo taip:
Išvestis patvirtina, kad naudojant laukelio šešėlio savybę buvo įdėtas kietojo tipo šešėlis.
2 pavyzdys: taikykite neryškų šešėlį naudodami langelio šešėlio ypatybę
Kad jau pritaikytas šešėlis būtų neryškus, prieš „“ spalvą įterpiama dar viena skaitinė reikšmė dėžutė-šešėlis ' nuosavybė. Apsilankykite toliau pateiktame atnaujintame kode:
< stilius >.boxShadowExample {
plotis: 210px;
kraštinė: 2 pikseliai kieto kukurūzų šilko;
aukštis: 210px;
fono spalva: whitesmoke;
langelis-šešėlis: 10px 10px 15px miško žalias;
}
stilius >
Pagal aukščiau pateiktą kodą šešėlis dabar yra ' 15 piks “ neryškus. Pasibaigus kompiliavimo etapui, tinklalapis atrodo taip:
Aukščiau pateiktame paveikslėlyje parodyta, kad šešėlis dabar yra neryškus.
3 pavyzdys: šešėlių srities išplėtimas
Skirtumo vertė pateikiama „ dėžutė-šešėlis ” nuosavybė šešėlio regionui išplėsti. Skirtumo vertė turi būti skaitmeninio formato. Kaip ir toliau pateiktame kodo fragmente, šešėlinė sritis išplečiama iki „ 20 piks “:
< stilius >.boxShadowExample {
plotis: 210px;
kraštinė: 2 pikseliai kieto kukurūzų šilko;
aukštis: 210px;
fono spalva: whitesmoke;
langelis-šešėlis: 10px 10px 15px 20px miško žaluma;
}
stilius >
Po vykdymo krentantis šešėlis dabar atrodo taip:
Kaip matote, šešėlio sritis dabar padidinta 20 pikselių.
Išvada
„ dėžutė-šešėlis turtas naudojamas kuriant mesti šešėlį “ efektas pasirinktiems HTML elementams. „ mesti šešėlį “ nuosavybė priima penkias vertes, “ horizontalus poslinkis “, „ vertikalus poslinkis “, „ suliejimo spindulys “, „ plitimo spindulys “ ir „ spalva “. Vertės „horizontalus poslinkis“ ir „vertikalus poslinkis“ nustato šešėlio matmenis, iš kurių turėtų atsirasti krentantis šešėlis. „Suliejimo spindulio“ reikšmė padaro šešėlį neryškų, o „skleidimo spindulio“ vertė išplečia šešėlio sritį.