Pomoću CSS3 možete stvoriti dvije vrste sjena: text-shadow(dodaje sjenku u tekst) i box-shadow(dodaje sjenku ostalim elementima).
CSS3 sjena teksta
text-shadowImovine može potrajati i do četiri vrijednosti:
- vodoravna sjena
- okomita sjena
- efekt zamućenja
- boja
Primjeri:
Uobičajena sjena teksta
h1 { text-shadow: 2px 2px 5px crimson; }
Sjajni tekstualni efekt
h1 { text-shadow: 0 0 4px #00FF9C; }
Višestruke sjene
Da biste to postigli, jednostavno dodajte zarez između dva (ili više) skupa vrijednosti:
h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
CSS3 Box Shadow
box-shadowImovine može potrajati i do šest vrijednosti:
- (nije obavezno)
insetključna riječ (mijenja sjenku u onu unutar okvira) - vodoravna sjena
- okomita sjena
- efekt zamućenja
- širenje
- boja
Primjeri:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
Više informacija:
- MDN web dokumenti
- Provjerite ima li podrške za preglednik
- CSS generator sjena okvira (slobodno eksperimentirajte s okvirom sjena)