Ce face filter (blur, grayscale, brightness, drop-shadow)
Proprietatea filter aduce filtrele de editare foto direct în browser.
O bijuterie este drop-shadow(): spre deosebire de box-shadow (care lasă întotdeauna o umbră dreptunghiulară peste cutia elementului), filter: drop-shadow() urmează conturul real al imaginilor transparente PNG sau SVG, lăsând umbră doar în jurul desenului.
Valori uzuale
| Valoare | Descriere |
|---|---|
blur(px) |
Efect de estompare / încețoșare. |
grayscale(%) |
Transformă imaginea în alb-negru (0% la 100%). |
brightness(n) |
Ajustează luminozitatea (1 = normal, >1 mai luminos). |
contrast(%) |
Ajustează contrastul. |
drop-shadow() |
Umbră conformă cu transparența reală a imaginii. |
Exemple
Exemplul 1: Efect de imagine alb-negru care revine la culori la hover
O tehnică clasică și elegantă pentru logo-uri de parteneri.
img.logo-partener {
filter: grayscale(100%) opacity(0.7);
transition: filter 0.3s ease;
}
img.logo-partener:hover {
filter: grayscale(0%) opacity(1);
}Efect vizual în browser
Siglele sunt afișate discret în alb-negru; la trecerea cursorului peste ele, culorile reapar vibrant.Greșeli frecvente
- Folosirea de valori mari de blur (ex. blur(50px)) pe elemente animate, ceea ce poate suprasolicita procesorul grafic pe telefoanele mai vechi.
Comenzi înrudite
backdrop-filter (efect de sticlă mată / frosted glass): Aplică filtre grafice (precum blur) asupra conținutului aflat direct în spatele elementului.box-shadow: Aplică una sau mai multe umbre sub cutia unui element, adăugând adâncime și senzație de plutire (elevație).opacity: Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.