Nolaižamā ēna ir efekts, kas nolaiž vai pievieno ēnu aiz atlasītajiem HTML elementiem, kad tie tiek renderēti tīmekļa lapā. Šo efektu var panākt, izmantojot ēnas () 'metode kā CSS vērtība' filtru ' īpašumu vai izmantojot ' kaste-ēna ” īpašums. Izmantojot rekvizītu “box-shadow”, vizuālo uzlabojumu, lietotāja pieredzi, uzsvaru un fokusu var piesaistīt konkrētam mērķtiecīgam HTML elementam.
Šajā rokasgrāmatā ir parādīta pilināmā ēnas efekta izveides procedūra, izmantojot rekvizītu box-shadow:
-
- Izveidojiet cietu ēnu, izmantojot lodziņa ēnu rekvizītu
- Izveidojiet izplūdušu ēnu, izmantojot lodziņa ēnu rekvizītu
- Paplašiniet izlaižamo ēnu apgabalu
Kā izveidot krītošās ēnas programmā CSS3, izmantojot lodziņa ēnu rekvizītu?
' kaste-ēna ” rekvizīts ļauj izstrādātājam izveidot vizuālu hierarhiju, norādot elementu relatīvo pozīciju lapā. Izmantojot to, tīmekļa lapu veidotāji var radīt ilūziju, ka objekti met ēnas uz virsmām, piešķirot elementiem interaktīvāku sajūtu.
Sintakse
Īpašumam “box-shadow” ir šāda sintakse:
kastes ēna: [ horizontālā nobīde ] [ vertikālā nobīde ] [ izplūduma rādiuss ] [ izplatības rādiuss ] [ krāsa ] ;
Iepriekš minētajā sintaksē izmantoto terminu skaidrojums:
-
- Sākotnēji ' horizontālā nobīde ” izgūst/saglabā X ass pozīciju, un negatīvs ” vērtība iestata ēnu pa kreisi un otrādi.
- ' vertikālā nobīde ' vērtība saglabā Y ass pozīciju, ' pozitīvs ” vērtība iestata ēnu lejupvērstā virzienā un otrādi gadījumā negatīvs ” vērtību.
- Tālāk “ izplūduma rādiuss ” vērtība kā no nosaukuma nosaka ēnas izplūdumu.
- ' izplatības rādiuss ” vērtība norāda, cik lielā rādiusā ēnai ir jāizvēršas.
- ' krāsa ” iestata ēnas krāsu, tā var būt HSL ” vai “ RGB ” formātā arī.
Tagad apskatīsim dažus piemērus, lai labāk izprastu:
1. piemērs: lietojiet cieto krītošo ēnu, izmantojot lodziņa ēnu rekvizītu
Lai iestatītu cieto ēnu, tikai virzieni un ēnas krāsa tiek ievietota kā vērtība “ kaste-ēna ” īpašums:
< stils >.boxShadowExample {
platums: 210 pikseļi;
apmale: 2 pikseļi cieta kukurūzas zīda;
augstums: 210 pikseļi;
fona krāsa: #f0f0f0;
box-shadow: 10px 10px mežzaļš;
}
stils >
Iepriekš minētajā kodā:
-
- Pirmkārt, tiek atlasīts HTML elements, kura klase ir “ boxShadowExample ”. Un vērtība ' 210 pikseļi ” tiek nodrošināts augstums ' un ' platums ” īpašības. Izmantojiet arī ' robeža ' un ' fona krāsa ” īpašības labākai vizualizācijai.
- Pēc tam iestatiet vērtību ' 10px 10px mežzaļš 'uz' kaste-ēna CSS īpašums. ' 10 pikseļi ” ir horizontālā un vertikālā nobīde, kas nosaka vietu, kur jāpiemēro ēna. Un ' mežzaļš ” ir ēnas krāsa.
Pēc apkopošanas tīmekļa lapa izskatās šādi:
Izvade apstiprina, ka ir ievietota cietā tipa nolaižamā ēna, izmantojot rekvizītu box-shadow.
2. piemērs: uzklājiet izplūdušo ēnu, izmantojot lodziņa ēnu rekvizītu
Lai padarītu jau lietoto ēnu izplūdušu, pirms 'krāsas' tiek ievietota vēl viena skaitliska vērtība. kaste-ēna ” īpašums. Apmeklējiet tālāk norādīto atjaunināto kodu:
< stils >.boxShadowExample {
platums: 210 pikseļi;
apmale: 2 pikseļi cieta kukurūzas zīda;
augstums: 210 pikseļi;
fona krāsa: whitesmoke;
box-shadow: 10px 10px 15px mežzaļš;
}
stils >
Saskaņā ar iepriekš minēto kodu ēna tagad ir “ 15 pikseļi ” aizmiglots. Pēc kompilācijas posma beigām tīmekļa lapa izskatās šādi:
Iepriekš redzamajā attēlā redzams, ka ēna tagad ir izplūdusi.
3. piemērs: izlaižamo ēnu apgabala paplašināšana
Starpības vērtība tiek sniegta ' kaste-ēna ” īpašums ēnas reģiona paplašināšanai. Starpības vērtībai jābūt skaitliskā formātā. Tāpat kā zemāk esošajā koda fragmentā, ēnu apgabals tiek paplašināts līdz “ 20 pikseļi ”:
< stils >.boxShadowExample {
platums: 210 pikseļi;
apmale: 2 pikseļi cieta kukurūzas zīda;
augstums: 210 pikseļi;
fona krāsa: whitesmoke;
box-shadow: 10px 10px 15px 20px mežzaļš;
}
stils >
Pēc izpildes pilināmā ēna tagad izskatās šādi:
Kā redzat, ēnas apgabals tagad ir palielināts par 20 pikseļiem.
Secinājums
' kaste-ēna Īpašums tiek izmantots, lai izveidotu ēnas ” ietekme uz atlasītajiem HTML elementiem. ' ēnas 'īpašums pieņem piecas vērtības, ' horizontālā nobīde ”, “ vertikālā nobīde ”, “ izplūduma rādiuss ”, “ izplatības rādiuss ' un ' krāsa ”. Vērtības “horizontālā nobīde” un “vertikālā nobīde” nosaka ēnas izmērus, no kurienes ēnai vajadzētu parādīties. Vērtība “izplūšanas rādiuss” padara ēnu izplūdušu, bet “izkliedes rādiusa” vērtība paplašina ēnas apgabalu.