Box Shadow CSS Tutorial - Sådan tilføjes en Drop Shadow til ethvert HTML-element

Vi kan tilføje en skygge til ethvert HTML-element ved hjælp af CSS-egenskaben box-shadow. Sådan gør du.

Tilføjelse af en grundlæggende slagskygge

Lad os først oprette nogle grundlæggende HTML-elementer, der skal tilføjes vores skygger til:

 Box1 Box2 Box3 

Tilføj derefter nogle grundlæggende CSS:

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

Resultatet er kun tre sorte kasser, som det er let for os at tilføje dråbe skygger til ved at kalde deres unikke id'er:

For at tilføje en grundlæggende skygge, lad os bruge box-shadowegenskaben i boks 1:

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

Vi har 3 parametre her. De første 2 er henholdsvis x-offset og y-offset. De indstiller placeringen af ​​skygge.

Forskydningen er i forhold til oprindelsen, som i HTML altid er det øverste venstre hjørne af et element. En positiv x-forskydning flytter skyggen til højre, og en positiv y-forskydning flytter skyggen nedad.

Den tredje parameter er farven på din skygge.

Husk, at selvom vi brugte elementer her, kan box-shadowejendommen også anvendes på ethvert andet HTML-element.

Tilføjelse af en sløringsradius

Hvis vi ønsker, at skyggen skal se lidt mere realistisk ud, vil vi gerne eksperimentere med blur-radiusparameteren.

Denne parameter styrer, hvor meget der skal sløres skyggen, så den bliver større og lysere. Lad os anvende det i boks 2:

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

Værdien af ​​4px indstiller slørens radius, der skal anvendes på vores skygge.

Tilføjelse af en Spread Radius

Hvis vi vil kontrollere størrelsen på skyggen, kan vi bruge spread-radiusparameteren, der styrer, hvor meget en skygge vokser eller krymper.

Lad os tilføje en spredningsradius på 8 pixel til boks 2:

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

Husk rækkefølgen af ​​disse parametre!

Kombination af flere skygger i en enkelt ejendom

Hvis vi vil have lyst, kan vi tilføje flere skygger til et element ved hjælp af en enkelt box-shadowegenskab.

Lad os gøre det med boks 3 ved samtidig at tilføje en blå og grøn skygge:

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

Bonus: Opret en indbygget skygge

Selvom det ikke skaber en skygge, kan insetparameteren også bruges sammen med box-shadowejendommen.

Som navnet antyder, skaber denne parameter en indsat skygge (dvs. skygge inde i en boks).

Den insetparameter kan placeres enten i begyndelsen eller slutningen af den

box-shadowejendom. Her demonstrerer vi dets anvendelse 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 tilføje sløring og spredning for at forbedre skyggen eller endda flere skygger:

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

Med box-shadowejendommen kan vi let få elementer på en webside til at skille sig ud for at skabe en dejlig 3D-lyseffekt.

Hvis du vil eksperimentere selv, her er en kode pen, jeg oprettede med eksemplerne brugt i denne vejledning.

Spil rundt og se, hvad du kan komme på!

Vil du se flere tips og viden om webudvikling?

• Abonner på mit ugentlige nyhedsbrev
• Besøg min blog på 1000 Mile World
• Følg mig på Twitter