Ang HTML ay ang wikang ginagamit upang magbigay ng istruktura ng mga web page, at pinapayagan kami ng CSS na maglapat ng mga istilo sa mga elemento. Sa isang web page, ang iba't ibang value ng property ay nakatakdang maglapat ng iba't ibang istilo, gaya ng background-color, font-size, border, border-radius, at box-shadow ay isa sa mga ito.

Tatalakayin ng blog na ito ang paraan upang mailapat ang mga epekto ng anino sa mga elemento ng HTML.

Paano Mag-drop ng Shadow Effect sa HTML Elements Gamit ang CSS?

Ang ' kahon-anino ” property ay nagdaragdag ng anino sa paligid ng isang elemento kung saan ang dalawa o higit pang mga idinagdag na value ng effect ay maaaring paghiwalayin ng mga kuwit.

Ang syntax ng box-shadow property ay inilarawan sa ibaba.

Syntax

kahon-anino : wala |h-offset v-offset blur spread color | inset | inisyal | magmana ka ;

Ang paglalarawan ng nabanggit na syntax ay nakalista sa ibaba:

“ wala ”: Ito ang default na halaga ng box-shadow property.
“ h-offset ”: Ang halagang ito ay kumakatawan sa pahalang na distansya.
“ v-offset ”: Tinutukoy ng value na ito ang patayong distansya.
“ lumabo ”: Ang pangatlong value ay blur. Ang pag-maximize sa halaga nito ay magma-maximize sa blur effect.
“ paglaganap ”: Ang ikaapat na value ay kumakatawan sa shadow spread. Maaari itong magkaroon ng mga positibo o negatibong halaga, kung saan pinapataas ng positibong halaga ang spread, at binabawasan ito ng negatibong halaga.
“ kulay ”: Opsyonal ang value na ito, na kumakatawan sa kasalukuyang kulay.
“ inisyal ”: Itinatakda ng value na ito ang property ng paunang value nito.
“ magmana ka ”: Ang value na ito ay nagmamana ng property ng parent element nito.
“ inset ”: Ginagamit ang inset value para gumawa ng mga anino sa loob ng kahon.

Tingnan natin kung ano ang hitsura ng epekto ng anino sa pamamagitan ng isang praktikal na halimbawa.

Halimbawa

Sa HTML file, una, magdagdag ng '

”. Sa loob ng elementong

na ito, magdagdag ng mga tag na

at
upang magbigay ng nilalaman sa web page.

HTML

< div >

< h1 > Ang Anino ng Kahon < / h1 >

< p > box-shadow: 3px 8px < / p >

< / div >

Ngayon, ilapat ang mga katangian ng CSS sa mga idinagdag na elemento ng HTML.

CSS

div {

kahon-anino : 3px 8px ;

}

Ang div element ay inilapat sa property na “ kahon-anino 'na may halaga' 3px 8px ”, na kumakatawan sa pahalang na offset at patayong offset.

Output

Sa susunod na seksyon, ang mga elemento ng HTML ay i-istilo na may iba't ibang mga katangian.

CSS

div {

hangganan : 5px solid rgb ( 255 , 111 , 1 ) ;

kahon-anino : 3px 8px 9px 4px #f4af1b ;

}

Ang mga sumusunod ay ang mga karagdagang katangian ng CSS na inilapat sa elemento ng div:

“ hangganan Ang ” property ay itinalaga ang value na 5px solid rgb(255, 111,1) kung saan ang 5px ay nagpapahiwatig ng lapad ng border, solid ang kumakatawan sa istilo ng border, at rgb(255, 111, 1) ang kulay.
“ kahon-anino Ang ” property na may value na 3px 8px 9px 4px #f4af1b ay kumakatawan sa h-offset bilang 3px, ang v-offset bilang 8px, blur bilang 9px, spread bilang 4px, at #f4af1b ang tumutukoy sa kulay.

Ipapakita ng ibinigay na code sa itaas ang elemento ng div tulad ng ipinapakita sa ibaba:

Ngayon, sa susunod na seksyon, lumikha ng dalawang kahon na kumakatawan sa dalawang elemento ng div. Bibigyan namin ang bawat isa ng iba't ibang halaga ng box-shadow at obserbahan ang mga resulta.

HTML

= 'kahon1' >

> Ang Anino ng Kahon >

> kahon-anino : 3px 8px 9px 4px #f4af1b >

> > >

= 'kahon2' >

> Ang Anino ng Kahon >

> kahon-anino : 3px 8px 9px 4px #f4af1b >

>

Style box1 div

#box1 {

lapad : 40% ;

taas : 140px ;

hangganan : 5px solid #ff9c83 ;

kahon-anino : 8px 10px 15px 20px #807f7f ;

}

dito:

“ #box1 Ang ” ay ginagamit para ma-access ang div na may id box1.
“ lapad Ang ” property ay ginagamit para sa pagtatakda ng lapad ng elemento.
“ taas Itinatakda ng ” property ang taas ng elemento.
“ hangganan Ang ” ay binibigyan ng value na 5px solid #ff9c83 kung saan ang 5px ay nagpapahiwatig ng lapad ng border, solid ay kumakatawan sa istilo ng border, at #ff9c83 ang kulay.
“ kahon-anino 'Ang ari-arian ay itatakda bilang ' 8px 10px 15px 20px #807f7f ” kung saan ang 8px ay horizontal offset, 10px ay vertical offset, 15px ang blur effect, 20px ang spread effect, at #807f7f ang kulay ng shadow.

Style box2 div

#kahon2 {

lapad : 40% ;

taas : 140px ;

hangganan : 5px solid rgb ( 255 , 111 , 1 ) ;

kahon-anino : inset 4px 8px #f4af1b ;

margin-kaliwa : 350px ;

}

Mapapansing na-istilo namin ang box2 div na may parehong mga katangian:

Tip sa Bonus: Pagdaragdag ng Maramihang Mga Shadow sa HTML Element

Ang ' kahon-anino ” Ang ari-arian ay maaaring magamit upang magdagdag ng maramihang mga epekto ng anino sa isang elemento ng HTML. Magagawa ito gamit ang mga kuwit sa pagitan ng bawat anino tulad ng ipinapakita sa halimbawa sa ibaba:

kahon-anino : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

Gaya ng nakikita mo, maraming anino ang matagumpay na nailapat:

Iyon ay tungkol sa paggamit ng CSS border shadow.

Konklusyon

Ang ' kahon-anino ” Ang pag-aari sa CSS ay ginagamit upang maglapat ng mga epekto ng anino sa mga elemento ng HTML. Pangunahing binubuo ang property na ito ng dalawang value na para sa horizontal offset at vertical offset, ngunit maaaring mayroong maraming value gaya ng para sa blur effect, spread radius effect, kulay, at higit pa. Bukod dito, maaari ka ring magdagdag ng maraming anino sa mga elemento sa pamamagitan ng paggamit ng mga kuwit sa pagitan ng bawat box-shadow property. Ipinaliwanag ng artikulong ito ang CSS box-shadow property na may mga praktikal na halimbawa.

CSS border shadow