Ang drop shadow ay isang epekto na bumaba o nagdaragdag ng anino sa likod ng mga napiling elemento ng HTML kapag na-render sa webpage. Ang epektong ito ay maaaring makamit gamit ang ' drop-shadow() 'paraan bilang isang halaga para sa CSS ' salain ” ari-arian o gamit ang “ kahon-anino ” ari-arian. Sa pamamagitan ng paggamit ng 'box-shadow' na pag-aari, ang visual na pagpapahusay, karanasan ng user, diin, at pagtutok ay maaaring makuha sa isang partikular na naka-target na elemento ng HTML.
Ipinapakita ng gabay na ito ang pamamaraan ng paggawa ng drop shadow effect gamit ang box-shadow property:
-
- Gumawa ng Solid Drop Shadow Gamit ang Box-shadow Property
- Gumawa ng Malabong Drop Shadow Gamit ang Box-shadow Property
- Palawakin ang Drop Shadow Area
Paano Gumawa ng Mga Drop Shadow sa CSS3 Gamit ang Box-shadow Property?
Ang ' kahon-anino Binibigyang-daan ng ” property ang developer na magtatag ng visual hierarchy sa pamamagitan ng pagpahiwatig ng kaugnay na posisyon ng mga elemento sa page. Sa pamamagitan ng paggamit nito, ang mga tagalikha ng web page ay maaaring lumikha ng ilusyon ng mga bagay na naglalagay ng mga anino sa mga ibabaw, na nagbibigay sa mga elemento ng mas interactive na pakiramdam.
Syntax
Ang property na 'box-shadow' ay may syntax ng:
box-shadow: [ pahalang na offset ] [ patayong offset ] [ blur radius ] [ spread radius ] [ kulay ] ;
Isang paliwanag ng mga terminong ginamit sa syntax sa itaas:
-
- Sa simula, ang ' pahalang na offset ' kinukuha / iniimbak ang posisyon ng X-axis, at ang ' negatibo Ang halaga ay nagtatakda ng anino sa kaliwa at kabaliktaran.
- Ang ' patayong offset 'Ang halaga ay nag-iimbak ng Y-axis na posisyon, ang ' positibo Itinatakda ng halaga ng ” ang anino sa pababang direksyon, at kabaliktaran sa kaso ng “ negatibo ” halaga.
- Susunod, ang ' blur radius ” value bilang mula sa pangalan ay nagtatakda ng blurriness ng anino.
- Ang ' spread radius Tinutukoy ng halaga ng ” kung gaano karaming radius ang dapat lumawak ng anino.
- Ang ' kulay ' nagtatakda ng kulay ng anino, maaari itong nasa ' HSL 'o' RGB ” format din.
Ngayon, talakayin natin ang ilang halimbawa para sa mas mahusay na pag-unawa:
Halimbawa 1: Ilapat ang Solid Drop Shadow Gamit ang Box-shadow Property
Para sa pagtatakda ng solidong drop shadow, ang mga direksyon at kulay ng anino lamang ang ipinapasok bilang isang halaga sa ' kahon-anino ” ari-arian:
< istilo >.boxShadowExample {
lapad: 210px;
hangganan: 2px solid cornsilk;
taas: 210px;
kulay ng background: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
istilo >
Sa code sa itaas:
-
- Una, ang HTML na elemento ay pinili na mayroong klase ng “ boxShadowExample ”. At ang halaga ng ' 210px ' ay ibinibigay sa ' taas 'at' lapad ' ari-arian. Gayundin, gamitin ang ' hangganan 'at' kulay ng background ” properties para sa mas magandang visualization.
- Susunod, itakda ang halaga ng ' 10px 10px forestgreen ' sa ' kahon-anino ” pag-aari ng CSS. Ang ' 10px ” ay ang pahalang at patayong offset na tumutukoy sa lokasyon kung saan kailangang ilapat ang anino. At ang ' forestgreen ” ang kulay ng anino.
Pagkatapos ng compilation, lalabas ang webpage na ganito:
Kinukumpirma ng output na isang solid-type na drop shadow ang inilagay gamit ang box-shadow property.
Halimbawa 2: Ilapat ang Blurry Drop Shadow Gamit ang Box-shadow Property
Upang gawing malabo ang nailapat na anino, isa pang numerical value ang ipinapasok bago ang kulay para sa “ kahon-anino ” ari-arian. Bisitahin ang na-update na code sa ibaba:
< istilo >.boxShadowExample {
lapad: 210px;
hangganan: 2px solid cornsilk;
taas: 210px;
kulay ng background: whitesmoke;
box-shadow: 10px 10px 15px forestgreen;
}
istilo >
Ayon sa code sa itaas, ang anino ngayon ay ' 15px ” malabo. Pagkatapos ng pagtatapos ng bahagi ng compilation, ganito ang hitsura ng webpage:
Ang figure sa itaas ay nagpapakita na ang anino ay malabo na ngayon.
Halimbawa 3: Pagpapalawak ng Drop Shadow Area
Ang spread value ay ibinibigay sa ' kahon-anino ” ari-arian para sa pagpapalawak ng rehiyon ng anino. Ang halaga ng spread ay dapat nasa numerical na format. Tulad ng sa ibaba ng snippet ng code, ang rehiyon ng anino ay pinalawak sa ' 20px ”:
< istilo >.boxShadowExample {
lapad: 210px;
hangganan: 2px solid cornsilk;
taas: 210px;
kulay ng background: whitesmoke;
box-shadow: 10px 10px 15px 20px forestgreen;
}
istilo >
Pagkatapos ng pagpapatupad, ang drop shadow ay lilitaw na tulad nito:
Tulad ng nakikita mo ang rehiyon ng anino ay nadagdagan na ngayon ng 20px.
Konklusyon
Ang ' kahon-anino 'Ang ari-arian ay ginagamit para sa paglikha ng isang ' drop-shadow ” epekto sa mga napiling elemento ng HTML. Ang ' drop-shadow 'Tumatanggap ang ari-arian ng limang halaga,' pahalang na offset ”, “ patayong offset ”, “ blur radius ”, “ spread radius 'at' kulay ”. Itinatakda ng mga value na 'horizontal offset' at 'vertical offset' ang mga sukat para sa anino kung saan dapat lumabas ang drop shadow. Ang halaga ng 'blur radius' ay ginagawang malabo ang anino at ang halaga ng 'spread radius' ay nagpapalawak sa rehiyon ng anino.