Box Shadow Effect i CSS

Forbedring av brukeropplevelsen til nettstedet ditt spiller en viktig rolle i å fange brukerens oppmerksomhet. Det er flere måter du kan bruke til å utføre denne oppgaven. En åpenbar måte er å forskjønne det generelle utseendet på nettstedet ditt, og det kan gjøres ved å legge til farger, bilder, animasjoner på nettstedet. En annen interessant ting som kan forbedre utseendet på nettstedet er forskjellige typer skyggeeffekter. I CSS er det to typer skyggeeffekter som er tekstskygge og bokseskygge. I denne oppskrivningen skal vi fortelle deg alt om kasseskyggeffekten.

CSS Box Shadow

For å legge skygger til forskjellige HTML-elementer, bruk boksen-skyggeegenskapen. Nedenfor har vi demonstrert forskjellige måter du kan bruke til å legge skygge til HTML -elementene dine.

Tilsett horisontal og vertikal skygge

For å legge til en skyggeeffekt på et visst element horisontalt og vertikalt gir du verdier til begge dimensjonene til boksen-skygge-egenskapen. Tenk på følgende eksempel.

Html

Læringsboks skyggeeffekt

Her skaper vi ganske enkelt et divelement for å demonstrere konseptet med bokseskyggeffekten.

CSS

div
Bredde: 250px;
Høyde: 150px;
polstring: 10px;
Bakgrunnsfarge: Bisque;
Bokseskygge: 9px 9px;

Ved hjelp av CSS gir vi litt bredde, høyde, polstring og bakgrunnsfarge til DIV -elementet. Til slutt, ved å bruke boksen skygge-egenskapen, har vi gitt 9px til både horisontale og vertikale dimensjoner av skyggen. Merk at skyggen vil ha samme farge som teksten som er til stede inne i DIV -elementet.

Produksjon

En horisontal og vertikal skygge ble lagt til DIV -beholderen.

Legge til farge i skyggen

Som allerede nevnt, vil som standard fargen på skyggen være den samme som innholdet som er til stede inne i elementet, men du kan endre fargen ved å spesifisere det i boksen-skygge-egenskapen. Bruk følgende kodebit.

CSS

div
Bokseskygge: 9px 9px Lightseagreen;

Her har vi spesifisert fargen på skyggen.

Produksjon

En lysagren skygge ble lagt til i boksen.

Legg til en uskarphet i skyggen

For å legge uskarphet til skyggen, spesifiser uskarphetsintensiteten i boksen skygge-egenskapen. Følg eksemplet nedenfor.

CSS

div
Bokseskygge: 9px 9px 7px RGB (32, 178, 170);

Vi har satt uskarphetsintensiteten til 7px. Merk at uskarphetseffekten forbedrer når du øker uskarphetsintensiteten.

Produksjon

En uskarphetseffekt ble tilsatt vellykket.

Endre størrelsen på skyggen

For å endre størrelsen på skyggen kan du spesifisere skyggeens spredningsintensitet. Spredningsintensiteten definerer i utgangspunktet spredningen av skyggen i stedet for størrelsen. Slik gjør du det.

CSS

div
Bokseskygge: 9px 9px 7px 10px Lightseagreen;

I koden ovenfor har vi først satt de horisontale og vertikale dimensjonene til skyggen til 9px, så har vi satt uskarphetsintensiteten til 7px og til slutt spesifisert spredningsintensiteten som 10px.

Produksjon

En skygge med en spesifikk spredningsintensitet brukes som ønsket.

Merk: For å redusere spredningen av skyggen, tilordne negative verdier til spredningsradius.

Alle eksemplene nevnt ovenfor demonstrerer hvordan du kan legge til en ytre skygge til et element. Du kan imidlertid også legge en indre skygge til et element.

Legg til en indre skygge

For dette formålet kan du bare sette inn en innsatt parameter til boksen-skygge-egenskapen. Følg kodebiten nedenfor:

CSS

div
Bokseskygge: Inset 9px 9px 7px Lightseagreen;

Bortsett fra å definere størrelsen, uskarpe radius og farge på skyggen, har vi forvandlet den ytre skyggen til en indre ved hjelp av "innsats".

Produksjon

En indre skygge ble lagt til vellykket.

Legge til flere skygger

For å legge til mange skygger på et element, kan du legge til en liste over skygger i boksen skygge-egenskapen atskilt med komma. Her er et eksempel.

CSS

div
Bokseskygge: 6px 6px Lightseagreen, 8px 8px Lightsalmon, 12px 12px LightSkyBlue;

Her legger vi til tre forskjellige skygger, hver skygge har en bestemt størrelse og farge.

Produksjon

Flere skygger ble lagt til vellykket.

Har kunnskap om spredt radius, indre skygge og flere skygger du kan gjøre en annen morsom ting med skygger. Tenk på eksemplet nedenfor.

CSS

div
Bokseskygge: Inset 6px 6px 10px Lightseagren,
innsatt -6px -6px 10px LightslateGrey;

I koden ovenfor legger vi to indre skygger på samme element, men begge skyggene har forskjellige posisjoner og farger.

Produksjon

To indre skygger er lagt til med hell.

Konklusjon

For å legge til en skygge til HTML-elementet, brukes CSS Box-Shadow-egenskapen. Du må spesifisere lengden på den horisontale så vel som den vertikale dimensjonen til skyggen i boksen-skygge-egenskapen. Du kan også legge til farge, og en uskarphet på skyggen av et element. Bortsett fra dette, kan boksen-skyggeegenskapen deg forbedre spredningen av en skygge eller legge til en indre skygge til et element. Denne opplæringen er designet for å veilede deg om forskjellige måter som kan brukes til å legge en skygge til et element.