Como funciona filter
A propiedade filter aplica efectos gráficos a un elemento cando o navegador o pinta: o ficheiro da
imaxe non cambia. Pódense encadear varias funcións separadas por espazos, e a orde importa:
cada unha aplícase sobre o resultado da anterior. Esta ferramenta escríbeas sempre na mesma orde.
grayscale(),sepia()einvert()van de 0 % (sen efecto) a 100 %.brightness(),contrast()esaturate()parten de 100 %: por debaixo reducen e por riba aumentan.hue-rotate()xira todas as cores na roda cromática, en graos.blur()desenfoca, en píxeles.drop-shadow()debuxa unha sombra que segue a silueta, tamén a dun PNG transparente.
Usos habituais
- Logotipos de clientes en gris que recuperan a cor ao pasar o rato: marca a opción do hover.
- Texto sobre unha foto: baixar o brillo (
brightness(60%)) fai lexible o texto branco sen editar a imaxe. - Fondos desenfocados detrás dun modal ou unha tarxeta. Para desenfocar o que hai detrás dun elemento, a propiedade é
backdrop-filter. - Estados desactivados:
grayscale(100%) opacity(50%)nun produto esgotado.
Filtros no servidor con /random
As fotos aleatorias de ximg.es admiten dous filtros no propio URL, que se aplican ao xerar a imaxe:
?grayscale para branco e negro e ?blur=1…10 para desenfocar. A diferenza co CSS é que a
imaxe xa chega filtrada, así que non hai custo ao pintar e funciona en sitios onde non controlas o CSS, como un correo:
<img src="https://ximg.es/random/800x600?seed=portada&grayscale&blur=3" alt="">Máis opcións das imaxes no xerador.
Rendemento
Os filtros de cor son baratos. blur() e drop-shadow() con raios grandes custan máis,
sobre todo animados ou en moitos elementos á vez. Se un filtro é fixo e a imaxe é túa, ás veces compensa
aplicalo ao exportar.