HTML és el llenguatge utilitzat per proporcionar l'estructura de les pàgines web, i CSS ens permet aplicar estils als elements. En una pàgina web, s'estableixen diferents valors de propietat per aplicar diferents estils, com ara el color de fons, la mida de la font, la vora, el radi de la vora i l'ombra de la caixa és un d'ells.

Aquest bloc parlarà del mètode per aplicar efectes d'ombra als elements HTML.

Com deixar l'efecte d'ombra en elements HTML mitjançant CSS?

El ' caixa-ombra ” La propietat afegeix una ombra al voltant d'un element on dos o més valors d'efecte afegit es poden separar per comes.

La sintaxi de la propietat box-shadow es descriu a continuació.

Sintaxi

caixa-ombra : cap |h-offset v-offset desenfocament desenfocat color | incrustat | inicial | tu heretes ;

La descripció de la sintaxi esmentada anteriorment es mostra a continuació:

“ cap ”: és el valor per defecte de la propietat box-shadow.
“ h-offset ”: aquest valor representa la distància horitzontal.
“ desplaçament en v ”: Aquest valor defineix la distància vertical.
“ borrós ”: El tercer valor és un borrós. Maximitzar el seu valor maximitzarà l'efecte de desenfocament.
“ propagació ”: El quart valor representa la propagació de l'ombra. Pot contenir valors positius o negatius, on el valor positiu augmenta el spread, i un valor negatiu el disminueix.
“ color ”: aquest valor és opcional i representa el color actual.
“ inicial ”: aquest valor estableix la propietat del seu valor inicial.
“ tu heretes ”: aquest valor hereta la propietat del seu element pare.
“ incrustat ”: el valor inserit s'utilitza per fer ombres dins de la caixa.

Vegem com es veu l'efecte d'ombra a través d'un exemple pràctic.

Exemple

Al fitxer HTML, primer, afegiu un '

”. Dins d'aquest element

, afegiu etiquetes

i
per proporcionar contingut a la pàgina web.

HTML

< div >

< h1 > L'ombra de la caixa < / h1 >

< pàg > caixa-ombra: 3px 8px < / pàg >

< / div >

Ara, apliqueu les propietats CSS als elements HTML afegits.

CSS

div {

caixa-ombra : 3 píxels 8 píxels ;

}

L'element div s'aplica amb la propietat ' caixa-ombra 'amb el valor' 3px 8px ”, que representa el desplaçament horitzontal i el desplaçament vertical.

Sortida

A la secció següent, els elements HTML tindran un estil amb diferents propietats.

CSS

div {

frontera : 5 píxels sòlid rgb ( 255 , 111 , 1 ) ;

caixa-ombra : 3 píxels 8 píxels 9 píxels 4 píxels #f4af1b ;

}

A continuació es mostren les propietats CSS addicionals aplicades a l'element div:

“ frontera ” se li assigna el valor 5px sòlid rgb(255, 111,1) on 5px indica l'amplada de la vora, sòlid representa l'estil de la vora i rgb (255, 111, 1) és el color.
“ caixa-ombra ” amb el valor 3px 8px 9px 4px #f4af1b representen el desplaçament h com a 3px, el desplaçament v com a 8px, el desenfocament com a 9px, distribuït com a 4px i #f4af1b especifica el color.

El codi indicat anteriorment mostrarà l'element div tal com es mostra a continuació:

Ara, a la secció següent, creeu dos quadres que representin dos elements div. Donarem a cadascun amb diferents valors d'ombra de caixa i observarem els resultats.

HTML

= 'caixa 1' >

> L'ombra de la caixa >

> caixa-ombra : 3 píxels 8 píxels 9 píxels 4 píxels #f4af1b >

> > >

= 'caixa 2' >

> L'ombra de la caixa >

> caixa-ombra : 3 píxels 8 píxels 9 píxels 4 píxels #f4af1b >

>

Caixa d'estil 1 div

#caixa 1 {

amplada : 40% ;

alçada : 140 píxels ;

frontera : 5 píxels sòlid #ff9c83 ;

caixa-ombra : 8 píxels 10 píxels 15 píxels 20 píxels #807f7f ;

}

Aquí:

“ #caixa 1 ” s'utilitza per accedir al div amb id box1.
“ amplada ” s'utilitza per configurar l'amplada de l'element.
“ alçada La propietat estableix l'alçada de l'element.
“ frontera ” té el valor 5px sòlid #ff9c83 on 5px indica l'amplada de la vora, el sòlid representa l'estil de la vora i #ff9c83 és el color.
“ caixa-ombra La propietat s'establirà com a 8px 10px 15px 20px #807f7f ” on 8px és el desplaçament horitzontal, 10px és el desplaçament vertical, 15px és l'efecte de desenfocament, 20px és l'efecte de propagació i #807f7f és el color de l'ombra.

Caixa d'estil 2 div

#caixa 2 {

amplada : 40% ;

alçada : 140 píxels ;

frontera : 5 píxels sòlid rgb ( 255 , 111 , 1 ) ;

caixa-ombra : incrustat 4 píxels 8 píxels #f4af1b ;

marge-esquerra : 350 píxels ;

}

Es pot observar que hem dissenyat el box2 div amb les mateixes propietats:

Consell addicional: afegir diverses ombres a l'element HTML

El ' caixa-ombra La propietat es pot utilitzar per afegir múltiples efectes d'ombra a un element HTML. Això es pot fer utilitzant comes entre cada ombra, tal com es mostra a l'exemple següent:

caixa-ombra : 6 píxels 6 píxels rgb ( 91 , 0 , 143 ) , 12 píxels 5 píxels rgb ( 201 , 8 , 8 ) , 16 píxels 16 píxels 8 píxels rgb ( 226 , 213 , 29 ) ;

Com podeu veure, s'han aplicat correctament diverses ombres:

Això es tractava de l'ús de l'ombra de la vora CSS.

Conclusió

El ' caixa-ombra La propietat de CSS s'utilitza per aplicar efectes d'ombra als elements HTML. Aquesta propietat consta principalment de dos valors que són per a desplaçaments horitzontals i verticals, però hi pot haver diversos valors, com ara l'efecte de desenfocament, l'efecte de radi de propagació, el color i molt més. A més, també podeu afegir diverses ombres als elements utilitzant comes entre cada propietat de caixa-ombra. Aquest article ha explicat la propietat CSS box-shadow amb exemples pràctics.

Ombra de vora CSS