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:
Da bismo dodali osnovnu sjenku, upotrijebimo box-shadowsvojstvo u okviru 1:
/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
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; }
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; }
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; }
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; }
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;
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