Como funciona o filter
A propriedade filter aplica efeitos gráficos a um elemento quando o navegador o desenha: o ficheiro da
imagem não muda. Podem encadear-se várias funções separadas por espaços, e a ordem importa:
cada uma aplica-se sobre o resultado da anterior. Esta ferramenta escreve-as sempre pela mesma ordem.
grayscale(),sepia()einvert()vão de 0 % (sem efeito) a 100 %.brightness(),contrast()esaturate()partem de 100 %: abaixo reduzem e acima aumentam.hue-rotate()roda todas as cores na roda cromática, em graus.blur()desfoca, em píxeis.drop-shadow()desenha uma sombra que segue a silhueta, incluindo a de um PNG transparente.
Usos habituais
- Logótipos de clientes a cinzento que recuperam a cor ao passar o rato: marque a opção do hover.
- Texto sobre uma foto: baixar o brilho (
brightness(60%)) torna o texto branco legível sem editar a imagem. - Fundos desfocados atrás de um modal ou de um cartão. Para desfocar o que está atrás de um elemento, a propriedade é
backdrop-filter. - Estados desativados:
grayscale(100%) opacity(50%)num produto esgotado.
Filtros no servidor com /random
As fotos aleatórias do ximg.es aceitam dois filtros no próprio URL, aplicados ao gerar a imagem:
?grayscale para preto e branco e ?blur=1…10 para desfocar. A diferença em relação ao CSS é que a
imagem já chega filtrada, por isso não há custo ao desenhar e funciona onde não controla o CSS, como num e-mail:
<img src="https://ximg.es/random/800x600?seed=capa&grayscale&blur=3" alt="">Mais opções das imagens no gerador.
Desempenho
Os filtros de cor são baratos. blur() e drop-shadow() com raios grandes custam mais,
sobretudo animados ou em muitos elementos ao mesmo tempo. Se um filtro for fixo e a imagem for sua, por vezes compensa
aplicá-lo ao exportar.