Ce face box-shadow
box-shadow conferă volum elementelor pe axa Z (adâncime), delimitându-le de fundal.
Parametrii se scriu în ordine:
1. offset-x: deplasarea pe orizontală (pozitiv spre dreapta, negativ spre stânga).
2. offset-y: deplasarea pe verticală (pozitiv în jos).
3. blur-radius: cât de estompată/moale este umbra.
4. spread-radius (opțional): cât de mult se extinde umbra în toate direcțiile.
5. color: culoarea umbrei (se recomandă valori semi-transparente rgba(0,0,0,0.1)).
6. Cuvântul cheie inset creează o umbră spre interiorul cutiei.
Valori uzuale
| Valoare | Descriere |
|---|---|
offset-x, offset-y |
Deplasarea umbrei pe axele X și Y. |
blur |
Nivelul de estompare a umbrei (0 = umbră ascuțită). |
spread |
Creșterea sau micșorarea ariei umbrei. |
color |
Culoarea umbrei. |
inset |
Schimbă umbra din exterior spre interiorul elementului. |
Exemple
Exemplul 1: Efect de ridicare a cardului la trecerea mouse-ului (hover elevation)
La hover, mărirea umbrei dă impresia că elementul se ridică spre utilizator.
.card {
background: #ffffff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}Efect vizual în browser
Cardul are o umbră discretă; când pui mouse-ul pe el, se ridică ușor în sus și umbra devine mai adâncă și mai moale.Greșeli frecvente
- Folosirea de culori opace negre pentru umbre (ex. box-shadow: 5px 5px 5px #000;), ceea ce arată învechit și nenatural. Folosește culori semi-transparente rgba cu opacitate redusă (0.05 – 0.15).
Comenzi înrudite
border: Desenează o linie de contur în jurul conținutului și padding-ului unui element (grosime, stil, culoare).border-radius: Rotunjește colțurile bordurii și ale fundalului unui element, transformând dreptunghiurile în căsuțe rotunjite sau cercuri.filter (blur, grayscale, brightness, drop-shadow): Aplică efecte vizuale de post-procesare grafică (estompare, alb-negru, contrast, luminozitate) asupra unui element.