HTML er språket som brukes for å gi strukturen til nettsider, og CSS tillater oss å bruke stiler på elementene. På en nettside er forskjellige egenskapsverdier satt til å bruke forskjellige stiler, for eksempel bakgrunnsfarge, skriftstørrelse, kantlinje, kantradius og boksskygge er en av dem.

Denne bloggen vil diskutere metoden for å bruke skyggeeffekter på HTML-elementer.

Hvordan slippe skyggeeffekt på HTML-elementer ved hjelp av CSS?

« boks-skygge ” egenskap legger til en skygge rundt et element der to eller flere ekstra effektverdier kan skilles med komma.

Syntaksen til box-shadow-egenskapen er beskrevet nedenfor.

Syntaks

boks-skygge : ingen |h-offset v-offset uskarphet spredning farge | innfelt | første | arve ;

Beskrivelsen av den ovennevnte syntaksen er listet opp nedenfor:

' ingen ”: Det er standardverdien til box-shadow-egenskapen.
' h-offset ”: Denne verdien representerer den horisontale avstanden.
' v-offset ”: Denne verdien definerer den vertikale avstanden.
' uklarhet ”: Den tredje verdien er en uskarphet. Maksimering av verdien vil maksimere uskarphet-effekten.
' spredt ”: Den fjerde verdien representerer skyggespredningen. Den kan ha positive eller negative verdier, der den positive verdien øker spredningen, og en negativ verdi reduserer den.
' farge ”: Denne verdien er valgfri, og representerer gjeldende farge.
' første ”: Denne verdien setter egenskapen til den opprinnelige verdien.
' arve ”: Denne verdien arver egenskapen til det overordnede elementet.
' innfelt ”: Innsettingsverdien brukes til å lage skygger inne i boksen.

La oss se hvordan skyggeeffekten ser ut gjennom et praktisk eksempel.

Eksempel

I HTML-filen legger du først til en '

'. Inne i dette

-elementet legger du til

- og
-tagger for å gi innhold til nettsiden.

HTML

< div >

< h1 > Boksskyggen < / h1 >

< s > boks-skygge: 3px 8px < / s >

< / div >

Bruk nå CSS-egenskapene på de lagt til HTML-elementene.

CSS

div {

boks-skygge : 3 px 8 px ;

}

div-elementet brukes med egenskapen ' boks-skygge ' med verdien ' 3px 8px ”, som representerer horisontal offset og vertikal offset.

Produksjon

I neste seksjon vil HTML-elementene bli stylet med forskjellige egenskaper.

CSS

div {

grense : 5 px fast rgb ( 255 , 111 , 1 ) ;

boks-skygge : 3 px 8 px 9px 4px #f4af1b ;

}

Følgende er de ekstra CSS-egenskapene som brukes på div-elementet:

' grense ” egenskapen tildeles verdien 5px solid rgb(255, 111,1) der 5px indikerer bredden på kantlinjen, solid representerer stilen til kantlinjen, og rgb(255, 111, 1) er fargen.
' boks-skygge ” egenskap med verdien 3px 8px 9px 4px #f4af1b representerer h-offset som 3px, v-offset som 8px, blur som 9px, spredt som 4px, og #f4af1b spesifiserer fargen.

Den ovenfor angitte koden vil vise div-elementet som vist nedenfor:

Nå, i neste seksjon, lag to bokser som representerer to div-elementer. Vi vil gi hver og en med forskjellige flere boks-skyggeverdier og observere resultatene.

HTML

= 'boks1' >

> Box Shadow >

> boks-skygge : 3 px 8 px 9px 4px #f4af1b >

> > >

= 'boks2' >

> Box Shadow >

> boks-skygge : 3 px 8 px 9px 4px #f4af1b >

>

Stilboks1 div

#boks1 {

bredde : 40 % ;

høyde : 140 piksler ;

grense : 5 px fast #ff9c83 ;

boks-skygge : 8 px 10 piksler 15 piksler 20 piksler #807f7f ;

}

Her:

' #boks1 ' brukes for å få tilgang til div med id box1.
' bredde ”-egenskapen brukes for innstilling av elementets bredde.
' høyde '-egenskapen angir elementets høyde.
' grense ” er gitt verdi 5px solid #ff9c83 der 5px indikerer bredden på kantlinjen, solid representerer stilen til kantlinjen, og #ff9c83 er fargen.
' boks-skygge ' egenskapen vil bli satt som ' 8px 10px 15px 20px #807f7f ” der 8px er horisontal forskyvning, 10px er vertikal forskyvning, 15px er uskarphet-effekten, 20px er spredningseffekt, og #807f7f er fargen på skyggen.

Stilboks2 div

#boks2 {

bredde : 40 % ;

høyde : 140 piksler ;

grense : 5 px fast rgb ( 255 , 111 , 1 ) ;

boks-skygge : innfelt 4px 8 px #f4af1b ;

marg-venstre : 350 piksler ;

}

Det kan observeres at vi har stylet box2 div med de samme egenskapene:

Bonustips: Legg til flere skygger på HTML-elementet

« boks-skygge egenskapen kan brukes til å legge til flere skyggeeffekter til et HTML-element. Dette kan gjøres ved å bruke kommaer mellom hver skygge som vist i eksemplet nedenfor:

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

Som du kan se, har flere skygger blitt brukt:

Det handlet om bruken av CSS-grenseskyggen.

Konklusjon

« boks-skygge ”-egenskapen i CSS brukes til å bruke skyggeeffekter på HTML-elementer. Denne egenskapen består hovedsakelig av to verdier som er for horisontal forskyvning og vertikal forskyvning, men det kan være flere verdier som for uskarphet effekt, spredningsradius effekt, farge og mer. Dessuten kan du også legge til flere skygger til elementene ved å bruke kommaer mellom hver boks-skygge-egenskap. Denne artikkelen har forklart CSS box-shadow-egenskapen med praktiske eksempler.

CSS-kantskygge