HTML este limbajul folosit pentru a furniza structura paginilor web, iar CSS ne permite să aplicăm stiluri elementelor. Pe o pagină web, diferite valori ale proprietăților sunt setate pentru a aplica stiluri diferite, cum ar fi culoarea fundalului, dimensiunea fontului, chenarul, raza chenarului și umbra caseta este unul dintre ele.

Acest blog va discuta despre metoda de aplicare a efectelor de umbră elementelor HTML.

Cum să aruncați efectul de umbră pe elementele HTML folosind CSS?

„ cutie-umbră ” proprietatea adaugă o umbră în jurul unui element în care două sau mai multe valori adăugate de efect pot fi separate prin virgule.

Sintaxa proprietății box-shadow este descrisă mai jos.

Sintaxă

cutie-umbră : nici unul |h-offset v-offset estompare răspândire culoare | medalion | iniţială | moștenești ;

Descrierea sintaxei menționate mai sus este listată mai jos:

„ nici unul ”: este valoarea implicită a proprietății box-shadow.
„ h-offset ”: Această valoare reprezintă distanța orizontală.
„ v-offset ”: Această valoare definește distanța verticală.
„ estompa ”: A treia valoare este o neclaritate. Maximizarea valorii acesteia va maximiza efectul de estompare.
„ răspândire ”: A patra valoare reprezintă răspândirea umbrei. Poate deține valori pozitive sau negative, unde valoarea pozitivă mărește spread-ul, iar o valoare negativă o scade.
„ culoare ”: Această valoare este opțională, reprezentând culoarea curentă.
„ iniţială ”: Această valoare stabilește proprietatea valorii sale inițiale.
„ moștenești ”: Această valoare moștenește proprietatea elementului părinte.
„ medalion ”: Valoarea inserată este folosită pentru a face umbre în interiorul cutiei.

Să vedem cum arată efectul de umbră printr-un exemplu practic.

Exemplu

În fișierul HTML, mai întâi, adăugați un „

”. În acest element

, adăugați etichete

și
pentru a furniza conținut paginii web.

HTML

< div >

< h1 > Umbra cutiei < / h1 >

< p > cutie-umbră: 3px 8px < / p >

< / div >

Acum, aplicați proprietățile CSS elementelor HTML adăugate.

CSS

div {

cutie-umbră : 3px 8px ;

}

Elementul div este aplicat cu proprietatea „ cutie-umbră „cu valoarea „ 3px 8px ”, care reprezintă decalajul orizontal și decalajul vertical.

Ieșire

În secțiunea următoare, elementele HTML vor fi stilate cu proprietăți diferite.

CSS

div {

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

cutie-umbră : 3px 8px 9px 4px #f4af1b ;

}

Următoarele sunt proprietățile CSS suplimentare aplicate elementului div:

„ frontieră ” proprietății i se atribuie valoarea 5px solid rgb(255, 111,1) unde 5px indică lățimea chenarului, solid reprezintă stilul chenarului și rgb(255, 111, 1) este culoarea.
„ cutie-umbră ” proprietatea cu valoarea 3px 8px 9px 4px #f4af1b reprezintă h-offset ca 3px, v-offset ca 8px, estompare ca 9px, răspândit ca 4px și #f4af1b specifică culoarea.

Codul de mai sus va afișa elementul div așa cum se arată mai jos:

Acum, în secțiunea următoare, creați două casete reprezentând două elemente div. Vom da fiecăruia cu diferite valori de umbră de casetă și vom observa rezultatele.

HTML

= 'caseta 1' >

> Umbra cutiei >

> cutie-umbră : 3px 8px 9px 4px #f4af1b >

> > >

= 'caseta 2' >

> Umbra cutiei >

> cutie-umbră : 3px 8px 9px 4px #f4af1b >

>

Caseta de stil1 div

#caseta1 {

lăţime : 40% ;

înălţime : 140px ;

frontieră : 5px solid #ff9c83 ;

cutie-umbră : 8px 10px 15px 20px #807f7f ;

}

Aici:

„ #caseta1 ” este folosit pentru a accesa div-ul cu id box1.
„ lăţime ” proprietatea este utilizată pentru setarea lățimii elementului.
„ înălţime ” proprietatea setează înălțimea elementului.
„ frontieră ” are valoarea 5px solid #ff9c83 unde 5px indică lățimea chenarului, solid reprezintă stilul chenarului și #ff9c83 este culoarea.
„ cutie-umbră „proprietatea va fi setată ca „ 8px 10px 15px 20px #807f7f ” unde 8px este offset orizontal, 10px este offset vertical, 15px este efectul de estompare, 20px este efectul de răspândire și #807f7f este culoarea umbrei.

Cutie de stil2 div

#box2 {

lăţime : 40% ;

înălţime : 140px ;

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

cutie-umbră : medalion 4px 8px #f4af1b ;

margine-stânga : 350px ;

}

Se poate observa că am stilizat box2 div cu aceleași proprietăți:

Sfat bonus: Adăugarea mai multor umbre pe elementul HTML

„ cutie-umbră ”proprietatea poate fi utilizată pentru a adăuga mai multe efecte de umbră unui element HTML. Acest lucru se poate face folosind virgule între fiecare umbră, așa cum se arată în exemplul de mai jos:

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

După cum puteți vedea, mai multe umbre au fost aplicate cu succes:

Asta a fost tot despre utilizarea umbrei marginii CSS.

Concluzie

„ cutie-umbră ” proprietatea din CSS este utilizată pentru a aplica efecte de umbră elementelor HTML. Această proprietate constă în principal din două valori care sunt pentru offset orizontal și vertical, dar pot exista mai multe valori, cum ar fi efectul de estompare, efectul de rază de răspândire, culoare și multe altele. Mai mult, puteți adăuga, de asemenea, mai multe umbre elementelor folosind virgulele între fiecare proprietate casetă-umbră. Acest articol a explicat proprietatea CSS box-shadow cu exemple practice.

Umbră chenar CSS