CSS vodič za Box Shadow - Kako dodati sjenku u bilo kojem HTML elementu

Svjetlu možemo dodati bilo koji HTML element pomoću CSS svojstva box-shadow. Evo kako.

Dodavanje osnovne kapljice sjene

Postavimo prvo neke osnovne HTML elemente kako bismo dodali svoje sjene:

 Box1 Box2 Box3 

Zatim dodajte neki osnovni CSS:

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

Rezultat su samo tri crna okvira kojima ćemo lako dodavati sjene pozivanjem njihovih jedinstvenih ID-ova:

Postavljanje HTML elemenata

Da bismo dodali osnovnu sjenku, upotrijebimo box-shadowsvojstvo u okviru 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Dodavanje osnovne sjene u okvir 1

Ovdje imamo 3 parametra. Prva 2 su x-pomak i y-pomak. Oni postavljaju mjesto sjene.

Pomak je u odnosu na ishodište, koje je u HTML-u uvijek gornji lijevi kut elementa. Pozitivan pomak x pomaknut će sjenu udesno, a pozitivan pomak x pomaknut će sjenku prema dolje.

Treći parametar je boja vaše sjene.

Imajte na umu da, iako smo ovdje koristili elemente, box-shadowsvojstvo se može primijeniti i na bilo koji drugi HTML element.

Dodavanje radijusa zamućenja

Ako želimo da sjena izgleda malo realnije, htjet ćemo eksperimentirati s blur-radiusparametrom.

Ovaj parametar kontrolira koliko zamagliti sjenu tako da postane veća i svjetlija. Primijenimo ga na okvir 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Dodavanje radijusa zamućenja u okvir 2

Vrijednost 4px postavlja radijus zamućenja koji će se primijeniti na našu sjenku.

Dodavanje radijusa širenja

Ako želimo kontrolirati veličinu sjene, možemo koristiti spread-radiusparametar koji kontrolira koliko sjena raste ili se smanjuje.

Dodajmo radijus širenja od 8 piksela u okvir 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Dodavanje radijusa širenja uz zamućenje u okvir 2

Zapamtite redoslijed ovih parametara!

Kombiniranje više sjena u jednom svojstvu

Ako se želimo pretvoriti, možemo dodati više sjena s elementu pomoću jednog box-shadowsvojstva.

Učinimo to s okvirom 3 dodavanjem istovremeno plave i zelene sjene:

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

Bonus: Stvorite umetnutu sjenu

Iako neće stvoriti sjenku, insetparametar se također može koristiti sa box-shadowsvojstvom.

Kao što i samo ime govori, ovaj parametar stvara umetnutu sjenu (tj. Sjenu unutar okvira).

insetParametar može se postaviti bilo na početku ili na kraju od

box-shadowimovine. Ovdje pokazujemo njegovu upotrebu s blockquoteelementom.

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; }
Stvorite umetnutu sjenu

Naravno, možete dodati malo zamućenja i širenja kako biste poboljšali sjenu, ili čak više sjena:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Umetnuta sjena u kombinaciji s padom sjene

Uz box-shadowsvojstvo možemo lako istaknuti elemente na web stranici kako bismo stvorili lijep 3D svjetlosni efekt.

Ako želite sami eksperimentirati, evo kodne olovke koju sam stvorio s primjerima korištenim u ovom vodiču.

Poigrajte se i pogledajte što možete smisliti!

Želite li vidjeti više savjeta i znanja za web razvoj?

  • Pretplatite se na moj tjedni bilten
  • Posjetite moj blog na 1000 Mile World
  • Pratite me na Twitteru