HTML er språket som brukes til å gi strukturen på websider, og CSS tillater oss å bruke stiler på elementene. På en webside er forskjellige eiendomsverdier satt til å bruke forskjellige stiler, for eksempel bakgrunnsfarge, fontstørrelse, grense, grense-radius og kasseskygge er en av dem.

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

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

“Bokseskygge”Eiendom legger til en skygge rundt et element der to eller flere ekstra effektverdier kan skilles av komma.

Syntaksen til boksen skygge-egenskapen er beskrevet nedenfor.

Syntaks

Bokseskygge: Ingen | H-offset v-offset uskarphetsfarge | innsatt | initial | arve;

Beskrivelsen av ovennevnte syntaks er listet opp nedenfor:

• “ingen”: Det er standardverdien for boksen Skygge-egenskapen.
• “H-offset”: Denne verdien representerer den horisontale avstanden.
• “V-offset”: Denne verdien definerer den vertikale avstanden.
• “uklarhet”: Den tredje verdien er en uskarphet. Å maksimere verdien vil maksimere uskarphetseffekten.
• “spre”: Den fjerde verdien representerer skyggespredningen. Det kan holde positive eller negative verdier, der den positive verdien øker spredningen, og en negativ verdi reduserer den.
• “farge”: Denne verdien er valgfri, som representerer gjeldende farge.
• “første”: Denne verdien angir egenskapen til dens opprinnelige verdi.
• “arve”: Denne verdien arver egenskapen til foreldrenes element.
• “innsatt”: Innsettingsverdien brukes til å lage skygger inne i boksen.

La oss se hvordan skyggeeffekten ser gjennom et praktisk eksempel.

Eksempel

I HTML -filen, først, legg til en "”. Inne i dette elementet, legg til

og

Tagger for å gi innhold på websiden.

Html

Bokseskyggen

Bokseskygge: 3px 8px

Bruk nå CSS -egenskapene på de ekstra HTML -elementene.

CSS

div
Bokseskygge: 3px 8px;

Div -elementet brukes med eiendommen “Bokseskygge”Med verdien”3px 8px”, Som representerer den horisontale forskyvningen og vertikale forskyvningen.

Produksjon

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

CSS

div
Grense: 5px Solid RGB (255, 111, 1);
Bokseskygge: 3px 8px 9px 4px #f4af1b;

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

• “grense”Eiendom tildeles verdien 5px fast RGB (255, 111,1) der 5px indikerer bredden på grensen, faststoff representerer grensen, og RGB (255, 111, 1) er fargen.
• “Bokseskygge”Eiendom med verdien 3px 8px 9px 4px #F4AF1B representerer H-offset som 3px, V-offset som 8px, uskarphet som 9px, spredt som 4px og #F4AF1B spesifiserer fargen.

Den ovennevnte koden vil vise DIV-elementet som vist nedenfor:

Nå, i neste avsnitt, oppretter to bokser som representerer to divelementer. Vi vil gi hver enkelt med forskjellige flere bokseskyggeverdier og observere resultatene.

Html

Bokseskyggen

Bokseskygge: 3px 8px 9px 4px #f4af1b

Bokseskyggen

Bokseskygge: 3px 8px 9px 4px #f4af1b

Style Box1 Div

#Box1
Bredde: 40%;
Høyde: 140px;
Grense: 5px Solid #FF9C83;
Bokseskygge: 8px 10px 15px 20px #807f7f;

Her:

• “#Box1”Brukes til å få tilgang til DIV med ID Box1.
• “bredde”Eiendom brukes til innstilling av elementets bredde.
• “høyde”Eiendom setter elementets høyde.
• “grense”Er gitt verdi 5px fast #FF9C83 der 5px indikerer bredden på grensen, faststoff representerer grensen, og #FF9C83 er fargen.
• “Bokseskygge”Eiendom vil bli satt som“8px 10px 15px 20px #807f7f”Hvor 8px er horisontal forskyvning, er 10px vertikal forskyvning, 15px er uskarphetseffekten, 20px er spredt effekt, og #807F7F er fargen på skyggen.

Style Box2 Div

#Box2
Bredde: 40%;
Høyde: 140px;
Grense: 5px Solid RGB (255, 111, 1);
Box-Shadow: Inset 4px 8px #F4AF1B;
margin-venstre: 350px;

Det kan observeres at vi har stylet Box2 DIV med de samme egenskapene:

Bonustips: Legge til flere skygger på HTML -element

“Bokseskygge”Eiendom kan brukes til å legge til flere skyggeeffekter til et HTML -element. Dette kan gjøres ved hjelp av komma mellom hver skygge som vist i eksemplet nedenfor:

Bokseskygge: 6px 6px RGB (91, 0, 143), 12px 5px RGB (201, 8, 8), 16px 16px 8px RGB (226, 213, 29);

Som du kan se, har flere skygger blitt brukt med hell:

Det handlet om bruken av CSS -grenseskyggen.

Konklusjon

“Bokseskygge”Eiendom i CSS brukes til å bruke skyggeeffekter på HTML -elementer. Denne egenskapen består hovedsakelig av to verdier som er for horisontale forskyvning og vertikale forskyvninger, men det kan være flere verdier som for uskarphetseffekt, spredt radiuseffekt, farge og mer. Dessuten kan du også legge til flere skygger til elementene ved å bruke komma mellom hver bokseskygge-egenskap. Denne artikkelen har forklart CSS-skygge-egenskapen med praktiske eksempler.