În specificația CSS3, adăugarea unei umbre unui element a devenit o sarcină extrem de simplă, realizabilă direct din cod, fără imagini decupate în editoare grafice sau structuri complicate de etichete <div> imbricate. Dacă în trecut crearea unei umbre fluide pe elemente elastice era anevoioasă, proprietatea box-shadow rezolvă această problemă printr-o singură linie de cod.
Umbră exterioară (outer shadow)
Pentru a aplica o umbră clasică în exteriorul unui container (box), folosim sintaxa de bază a proprietății box-shadow. Iată exemplul de cod recomandat:
[css]
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
[/css]
Valorile reprezintă, în ordine: deplasarea pe orizontală (5px spre dreapta), deplasarea pe verticală (5px în jos), raza de estompare sau blur (5px) și culoarea umbrei (#ccc).
Umbră interioară (inner shadow)
Dacă dorești ca efectul de adâncime să fie aplicat spre interiorul elementului – de exemplu, pentru a simula un buton apăsat sau un câmp adâncit –, trebuie doar să adaugi cuvântul-cheie inset la începutul valorii:
[css]
.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
[/css]
În acest caz, umbra este poziționată centrat (deplasare 0 pe axele X și Y) și are o estompare de 10px cu o nuanță neagră, creând un efect discret de vignetare internă.
Prefixele -webkit- și -moz- asigură compatibilitatea cu versiunile mai vechi ale motoarelor de randare (Chrome, Safari, Firefox), în timp ce declararea finală box-shadow reprezintă standardul nativ implementat în toate browserele moderne.
