Slagskyggen er en effekt som slipper eller legger til en skygge bak de valgte HTML-elementene når de gjengis på nettsiden. Denne effekten kan oppnås ved å bruke ' drop-shadow() ' metode som en verdi for CSS ' filter ' eiendom eller ved å bruke ' boks-skygge ' eiendom. Ved å bruke 'box-shadow'-egenskapen kan den visuelle forbedringen, brukeropplevelsen, vektleggingen og fokuset trekkes til et spesifikt målrettet HTML-element.
Denne veiledningen demonstrerer fremgangsmåten for å lage en slagskyggeeffekt ved å bruke egenskapen box-shadow:
-
- Lag en solid dropshadow ved å bruke box-shadow-egenskap
- Lag en uskarp skygge ved å bruke box-shadow-egenskap
- Utvid Drop Shadow-området
Hvordan lage Drop Shadows i CSS3 ved å bruke box-shadow-egenskapen?
« boks-skygge ”-egenskapen lar utvikleren etablere et visuelt hierarki ved å indikere den relative plasseringen av elementer på siden. Ved å bruke den kan nettsideskapere skape en illusjon av objekter som kaster skygger på overflater, noe som gir elementer en mer interaktiv følelse.
Syntaks
Egenskapen 'box-shadow' har en syntaks på:
boks-skygge: [ horisontal forskyvning ] [ vertikal offset ] [ uskarphet radius ] [ spredningsradius ] [ farge ] ;
En forklaring av termer brukt i syntaksen ovenfor:
-
- I utgangspunktet var ' horisontal forskyvning ' henter/lagrer X-akseposisjonen, og ' negativ ”-verdien setter skyggen til venstre og omvendt.
- « vertikal offset '-verdien lagrer Y-aksens posisjon, ' positivt '-verdien setter skyggen i retning nedover, og omvendt i tilfellet med ' negativ 'verdi.
- Deretter ' uskarphet radius ”-verdien fra navnet angir uskarpheten til skyggen.
- « spredningsradius ”-verdien spesifiserer hvor mye radius skyggen skal utvides.
- « farge ' angir skyggefargen, den kan være i ' HSL ' eller ' RGB format også.
La oss nå gå gjennom et par eksempler for en bedre forståelse:
Eksempel 1: Påfør Solid Drop Shadow ved å bruke box-shadow-egenskap
For å angi den solide skyggen, settes bare retningene og skyggefargen inn som en verdi til ' boks-skygge ' eiendom:
< stil >.boxShadowExample {
bredde: 210px;
kant: 2px solid maissilke;
høyde: 210px;
bakgrunnsfarge: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
stil >
I koden ovenfor:
-
- Først velges HTML-elementet med en klasse ' boxShadowExample '. Og verdien av ' 210 piksler ' er gitt til ' høyde ' og ' bredde ' egenskaper. Bruk også ' grense ' og ' bakgrunnsfarge ” egenskaper for bedre visualisering.
- Deretter setter du verdien til ' 10px 10px skoggrønn ' til ' boks-skygge ' CSS-egenskap. « 10 piksler ” er den horisontale og vertikale forskyvningen som bestemmer plasseringen der skyggen skal påføres. Og ' Skoggrønn ” er fargen på skyggen.
Etter kompileringen ser nettsiden slik ut:
Utdata bekrefter at en solid type drop shadow har blitt plassert ved bruk av box-shadow-egenskapen.
Eksempel 2: Påfør uskarp skygge ved bruk av box-shadow-egenskap
For å gjøre den allerede påførte skyggen uskarp, settes en numerisk verdi til før fargen for ' boks-skygge ' eiendom. Gå til den oppdaterte koden nedenfor:
< stil >.boxShadowExample {
bredde: 210px;
kant: 2px solid maissilke;
høyde: 210px;
bakgrunnsfarge: whitesmoke;
box-shadow: 10px 10px 15px forestgreen;
}
stil >
I følge koden ovenfor er skyggen nå ' 15 piksler ' uskarpt. Etter slutten av kompileringsfasen ser nettsiden slik ut:
Figuren ovenfor viser at skyggen nå er uskarp.
Eksempel 3: Utvide skyggeområdet
Spredningsverdien oppgis til ' boks-skygge ” eiendom for å utvide området av skyggen. Verdien av spredningen må være i numerisk format. Som i kodebiten nedenfor, utvides skyggeområdet til ' 20 piksler ':
< stil >.boxShadowExample {
bredde: 210px;
kant: 2px solid maissilke;
høyde: 210px;
bakgrunnsfarge: whitesmoke;
box-shadow: 10px 10px 15px 20px skoggrønn;
}
stil >
Etter utførelsen ser skyggen nå slik ut:
Som du kan se, er området av skyggen nå økt med 20px.
Konklusjon
« boks-skygge ' eiendom brukes til å lage en ' drop-shadow ' effekt på valgte HTML-elementer. « drop-shadow ' egenskap godtar fem verdier, ' horisontal forskyvning ', ' vertikal offset ', ' uskarphet radius ', ' spredningsradius ' og ' farge '. Verdiene for 'horisontal forskyvning' og 'vertikal forskyvning' angir dimensjonene for skyggen der fallskyggen skal komme ut. Verdien for 'sløringsradius' gjør skyggen uskarp og 'spredningsradius'-verdien utvider området til skyggen.