Come funziona filter
La proprietà filter applica effetti grafici a un elemento quando il browser lo disegna: il file
dell’immagine non cambia. Si possono concatenare più funzioni separate da spazi, e l’ordine conta:
ognuna si applica al risultato della precedente. Questo strumento le scrive sempre nello stesso ordine.
grayscale(),sepia()einvert()vanno da 0% (nessun effetto) a 100%.brightness(),contrast()esaturate()partono da 100%: sotto riducono, sopra aumentano.hue-rotate()ruota tutti i colori sulla ruota cromatica, in gradi.blur()sfoca, in pixel.drop-shadow()disegna un’ombra che segue la sagoma, anche quella di un PNG trasparente.
Usi comuni
- Loghi dei clienti in grigio che tornano a colori al passaggio del mouse: spunta l’opzione hover.
- Testo sopra una foto: abbassare la luminosità (
brightness(60%)) rende leggibile il testo bianco senza modificare l’immagine. - Sfondi sfocati dietro una modale o una card. Per sfocare ciò che sta dietro un elemento, la proprietà è
backdrop-filter. - Stati disattivati:
grayscale(100%) opacity(50%)su un prodotto esaurito.
Filtri lato server con /random
Le foto casuali di ximg.es accettano due filtri nell’URL stesso, applicati quando l’immagine viene generata:
?grayscale per il bianco e nero e ?blur=1…10 per sfocare. La differenza rispetto al CSS è che
l’immagine arriva già filtrata, quindi non c’è costo di disegno e funziona dove non controlli il CSS, come in un’email:
<img src="https://ximg.es/random/800x600?seed=copertina&grayscale&blur=3" alt="">Altre opzioni per le immagini nel generatore.
Prestazioni
I filtri di colore costano poco. blur() e drop-shadow() con raggi grandi costano di più,
soprattutto se animati o su molti elementi insieme. Se un filtro è fisso e l’immagine è tua, a volte conviene
applicarlo in fase di esportazione.