Filtros CSS (CSS Filter Effects)

O avanço de CSS está permitindo que sites evoluam constantemente e permitindo não ser mais necessário precisar de scripts externos para criar efeitos verdadeiramente surpreendentes. Alguns desses efeitos, certamente, conseguido com filtros CSS!

Existem muitos filtos CSS bastante úteis e poderosos e você verá agora o que cada filtro é capaz de fazer.

O que são filtros CSS3

Filtros CSS (ou Filter Effects Module Level 1) são capazes de produzir efeitos em imagens e outros elementos em um documento Web.

Imagine ser capaz de aplicar efeitos de Photoshop, como blur, tons de cinza e brilho aos elementos HTML, tais como formulários, imagens e qualquer outra coisa possível de se criar usando HTML/CSS.

Geralmente, um filtro CSS é composto pela seguinte sintaxe:

Quer dizer, usa-se a propriedade filter seguida da diretiva de qual filtro será aplicado, sendo que é possível aplicar diversos filtros simultaneamente (ou nenhum, através da palavra-chave none).

Atualmente, a compatibilidade de filtros CSS é quase 100%, considerando o suporte dos principais navegadores de mercado. Então, é possível usá-los à vontade para conseguir efeitos visuais impressionantes.

A seguir, veja um showcase de Filtros CSS e alguns exemplo do quê é possível fazer e que efeitos alcançar.

blur()

O efeito blur — ou embaçado — já é consagradamente usado em montagens e ilustrações para sites em todo o mundo, já que qualquer editor de imagens mais ou menos decente já oferece a possibilidade de usar o blur.

O bom da história é que, a partir de agora, é possível usar este efeito diretamente com CSS, valendo-nos do filtro blur().

É possível especificar o deviation do blur — ou seja, quantos pixels vão se mesclar entre si — através de medidas CSS. Para o exemplo acima, foram usados 10px.

grayscale()

Antes do advento dos filtros CSS3, desenvolvedores web usávamos uma variedade de hacks e técnicas para fazer a transição de uma imagem em preto e branco para ela ficar colorida.

Mas, independentemente de existirem dezenas de técnicas para isso, agora basta usar um pouco de CSS através do filtro grayscale().

Usando porcentagem ou um valor de 0 a 1 (incluindo decimais), é possível especificar o quão próximo a tons de cinza a imagem deve ser apresentada.

Para o exemplo, foi usado:

sepia()

Para o caso de ser preciso usar um efeito sépia — tonalidades entre o acinzentado e o amarronzado –, agora também é possível usando o filtro CSS sepia().

Através da indicação de porcentagem ou decimais, basta indicar a “quantidade de sépia” que será usada na imagem.

Para o exemplo, usou-se:

saturate()

O valor da saturação é medido em porcentagem ou decimais, usados como valores para saturate().

Um valor de 100% (ou 1) é o default do elemento, podendo ser aumentado ou diminuído, a depender do efeito que se quer alcançar alterando-se a saturação.

O exemplo acima foi supersaturado com o código:

hue-rotate()

Agora, com CSS3, é possível alterar o valor da matiz de elementos através do filtro hue-rotate().

O valor é especificado em graus e, inicialmente, isso pode soar confuso. Para facilitar, imaginem uma roda de cores; o número de graus determina o ponto dentro desta roda.

O efeito acima foi alcançado com:

invert()

É fácil inverter as cores de imagens com o filtro invert(), especificando uma porcentagem ou decimal para a quantidade dessa inversão.

O resultado acima foi alcançado com:

opacity()

O filtro opacity(), como sugere o próprio nome, controla a opacidade do elemento a que esteja aplicado.

Em outras palavras, aplica transparência ao elemento, admitindo valores em porcentagem ou decimal.

A diferença entre usar filter: opacity() e a propriedade opacity é que, com o filtro, navegadores podem decidir usar aceleração de hardware, tornando a aplicação do efeito mais performática.

Acima, temos:

brightness()

O filtro CSS brightness() aplica um multiplicador linear no elemento-alvo, fazendo-o parecer mais ou menos brilhante (brightness). Admite valores em porcentagem ou decimal.

O exemplo acima, com claridade dobrada, foi alcançado usando:

contrast()

Com os filtros de CSS3, também é possível ajustar o contraste de elementos (especificando os valores em porcentagem ou decimais).

Para o exemplo, aumentou-se bastante o contraste da imagem com:

drop-shadow()

Como indica o próprio nome, o filtro drop-shadow() coloca uma sombra no elemento-alvo.

A sintaxe é a mesma de box-shadow(); a diferença é que pode ser aplicado pelos navegadores com aceleração de hardware e, quando aplicado a elementos com transparência, como imagens, a sombra toma a forma do que é opaco, ao invés de só fazer uma sombra projetada em caixa.

Veja a diferença neste exemplo, em que o mesmo valor 7px 9px 9px rgba(0,0,0,.3) é usado para o filtro e para a propriedade neste PNG transparente:

2 super dicas sobre filtros CSS

Ainda existe um ou outro filtro CSS, mas, por serem bem mais complexos e/ou experimentais, ficam para um outro artigo. ;)

De qualquer maneira, 2 dicas sobre filtros CSS muito boas são as seguintes:

1. É possível usar múltiplos filtros ao mesmo tempo
2. É possível usar transições e animações em filtros CSS

Filtros múltiplos simultâneos

Lembra da formulazinha de uso de filter() no início do artigo? Lá consta que é possível usar múltiplos filtros CSS simultaneamente.

Com isso, potencializa-se o poder dos filtros e é possível chegar a resultados realmente admiráveis.

Por exemplo, chega-se ao resultado do exemplo usando:

Transições e animações em filtros CSS

Para a felicidade geral da nação dev, filtros CSS funcionam muito bem, obrigado, com transições e animações CSS.

Então, não se acanhe em usar transition e @keyframes/animation para dar aquele passo extra rumo a efeitos deslumbrantes com filtros.

Assista a nosso vídeo sobre filtros CSS no início do artigo para ver a demonstração de animações e filtros sendo usados.

Conclusão

Para quem é dev das antigas, observar (e se beneficiar) a evolução do quê CSS se torna capaz é realmente emocionante.

Filtros CSS são um belo exemplo disso. Há não muito tempo atrás, chegar a efeitos como os proporcionados pelos filtros exigia, no mínimo, usar múltiplas imagens.

Felizmente, hoje em dia temos filtros CSS para nos ajudar a manipular o aspecto visual dos elementos, o que nos ajuda a conseguir resultados extraordinários.

E você, sabia que filtros CSS podiam fazer tudo isso? Tem usado os filtros em seus projetos? Conta pra gente nos comentários!