Com funciona filter
La propietat filter aplica efectes gràfics a un element quan el navegador el pinta: el fitxer de la
imatge no canvia. Es poden encadenar diverses funcions separades per espais, i l’ordre importa:
cadascuna s’aplica sobre el resultat de l’anterior. Aquesta eina les escriu sempre en el mateix ordre.
grayscale(),sepia()iinvert()van del 0 % (sense efecte) al 100 %.brightness(),contrast()isaturate()parteixen del 100 %: per sota redueixen i per sobre augmenten.hue-rotate()gira tots els colors a la roda cromàtica, en graus.blur()desenfoca, en píxels.drop-shadow()dibuixa una ombra que segueix la silueta, també la d’un PNG transparent.
Usos habituals
- Logotips de clients en gris que recuperen el color en passar-hi el ratolí: marca l’opció del hover.
- Text sobre una foto: abaixar la brillantor (
brightness(60%)) fa llegible el text blanc sense editar la imatge. - Fons desenfocats darrere d’un modal o una targeta. Per desenfocar el que hi ha darrere d’un element, la propietat és
backdrop-filter. - Estats desactivats:
grayscale(100%) opacity(50%)en un producte esgotat.
Filtres al servidor amb /random
Les fotos aleatòries de ximg.es admeten dos filtres a la mateixa URL, que s’apliquen en generar la imatge:
?grayscale per al blanc i negre i ?blur=1…10 per desenfocar. La diferència amb el CSS és que la
imatge ja arriba filtrada, així que no hi ha cost en pintar i funciona en llocs on no controles el CSS, com un correu:
<img src="https://ximg.es/random/800x600?seed=portada&grayscale&blur=3" alt="">Més opcions de les imatges al generador.
Rendiment
Els filtres de color són barats. blur() i drop-shadow() amb radis grans costen més,
sobretot animats o en molts elements alhora. Si un filtre és fix i la imatge és teva, de vegades compensa
aplicar-lo en exportar.