HTML5 - Box Shadow

Aceasta este una dintre cele mai așteptate caracteristici ale noului standard de CSS3 și că împreună cu HTML5 reușește să atragă multe priviri, ne referim la Box Shadow care ne permite să plasăm umbre pe casetele din documentul nostru HTML, generând astfel un efect ca și cum ar pluti pe pagină.
Elementul Box Shadow trebuie să fie constituit după cum urmează:
box-shadow: hoffset voffset blur spread color inset
Unde fiecare dintre atributele sale îndeplinește o funcție, să vedem fiecare dintre acestea în detaliu:

• Hoffset: Este decalajul orizontal, care este o valoare a lungimii. O valoare pozitivă deplasează Box Shadow pe partea dreaptă, pe de altă parte, o valoare negativă deplasează Umbra cutiei spre stânga.

• Voffset: Este decalajul vertical, care este o valoare a lungimii. O valoare pozitivă mută Box Shadow sub caseta articolului, iar o valoare negativă mută Box Shadow deasupra casetei articolului.

• Estompa: (Opțional) Specifică raza definiției umbrelor, care este o valoare a lungimii. Cu cât valoarea este mai mare, cu atât rămâne marginea cutiei obiectului mai estompată. Pentru valoarea implicită 0, marginea umbrei casetei pare complet definită.

• Răspândire: (Opțional) Specificați raza de difuzie a umbrei, este o măsură de lungime. O valoare pozitivă face ca umbra să se extindă în toate direcțiile casetei elementului care conține, iar o valoare negativă face ca umbra elementului care conține să se contracte.

• Culoare: (Opțional) Este culoarea umbrei. Dacă este omis, browserul va decide culoarea.

• Medalion: (Opțional) Face umbra aruncată în caseta elementului la care este aplicată.

Odată ce cunoaștem atributele, să trecem rapid la un exemplu de cod pentru a pune în practică ceea ce am învățat.

 Exemplu
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

După cum putem vedea, putem aplica Box Shadow În CSS din interiorul etichetei de stil, acest cod generează următorul rezultat:

Un alt aspect interesant este că, în aceeași declarație a unui Shadow Box, putem specifica mai multe umbre, de exemplu, în următorul cod vom include o umbră suplimentară în inserție, să vedem:

 Exemplu
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

Acum să vedem cum sunt afișate ambele umbre în elementul nostru: