Box Shadow CSS Tutorial - Hvordan legge til en Drop Shadow til ethvert HTML-element

Vi kan legge til en skygge for ethvert HTML-element ved hjelp av CSS-egenskapen box-shadow. Dette er hvordan.

Legge til en grunnleggende slagskygge

La oss først sette opp noen grunnleggende HTML-elementer for å legge til skygger for:

 Box1 Box2 Box3 

Deretter legger du til noen grunnleggende CSS:

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

Resultatet er bare tre svarte bokser som det er enkelt for oss å legge til skygger ved å ringe deres unike ID-er:

For å legge til en grunnleggende skygge, la oss bruke box-shadowegenskapen i ramme 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }

Vi har 3 parametere her. De to første er henholdsvis x-offset og y-offset. De angir plasseringen til skyggen.

Offset er relativt til opprinnelsen, som i HTML alltid er det øverste venstre hjørnet av et element. En positiv x-forskyvning vil flytte skyggen til høyre, og en positiv y-forskyvning vil flytte skyggen nedover.

Den tredje parameteren er fargen på skyggen din.

Husk at selv om vi brukte elementer her, kan box-shadowegenskapen også brukes på ethvert annet HTML-element.

Legge til en uskarphetsradius

Hvis vi vil at skyggen skal se litt mer realistisk ut, vil vi eksperimentere med blur-radiusparameteren.

Denne parameteren styrer hvor mye skyggen skal sløres slik at den blir større og lysere. La oss bruke den på ramme 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }

Verdien på 4 px angir uskarphetsradiusen som skal gjelde for vår skygge.

Legge til en Spread Radius

Hvis vi vil kontrollere størrelsen på skyggen, kan vi bruke spread-radiusparameteren som styrer hvor mye en skygge vokser eller krymper.

La oss legge til en spredningsradius på 8 px i ramme 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }

Husk rekkefølgen på disse parametrene!

Kombinere flere skygger i en enkelt eiendom

Hvis vi ønsker å bli fancy, kan vi legge til flere skygger for et element ved hjelp av en enkelt box-shadoweiendom.

La oss gjøre det med boks 3 ved samtidig å legge til en blå og grønn skyggeskygge:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }

Bonus: Lag en Inset Shadow

Selv om det ikke vil skape en skygge, kan insetparameteren også brukes med box-shadoweiendommen.

Som navnet antyder, skaper denne parameteren en innfelt skygge (dvs. skygge inne i en rute).

Den insetparameter kan plasseres enten ved begynnelsen eller slutten av

box-shadoweiendom. Her demonstrerer vi bruken med et blockquoteelement.

HTML:

 The key to success is to start before you're ready. 
— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }

Selvfølgelig kan du legge til litt uskarphet og spredning for å forbedre skyggen, eller til og med flere skygger:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

Med box-shadoweiendommen kan vi enkelt få elementer på en webside til å skille seg ut for å skape en fin 3D-lyseffekt.

Hvis du vil prøve deg selv, er det en kodepenn jeg opprettet med eksemplene som brukes i denne opplæringen.

Lek deg rundt og se hva du kan finne på!

Vil du se flere tips og kunnskap om webutvikling?

• Abonner på det ukentlige nyhetsbrevet mitt
• Besøk bloggen min på 1000 Mile World
• Følg meg på Twitter