Noções básicas sobre os efeitos de filtros de CSS

Introdução

Os filtros são uma ferramenta poderosa que os autores da Web podem usar para criar efeitos visuais interessantes. Neste artigo, vamos falar sobre a história dos efeitos de filtros, o que eles fazem e como usá-los. Vamos mostrar exemplos de todos os filtros predefinidos para CSS. Também vamos abordar as considerações de desempenho para o uso em computadores e dispositivos móveis, já que conhecer o impacto da velocidade dos filtros é importante para uma boa experiência do usuário. Por fim, vamos analisar o estado atual da implementação em navegadores modernos.

O passado, o presente e o futuro dos efeitos de filtro

Os efeitos de filtro foram criados como parte da especificação de gráficos vetoriais escaláveis (SVG). Eles foram criados para aplicar diversos efeitos de imagem com base em pixels em um desenho vetorial. Com o tempo, à medida que os fornecedores de navegadores adicionavam recursos SVG aos navegadores, a utilidade dos filtros ficou evidente. Robert O'Callahan, da Mozilla, teve a brilhante ideia de usar filtros SVG com a aplicação de CSS em conteúdo HTML "normal". Robert criou um protótipo de uma versão inicial que mostrava o quão poderosa poderia ser a combinação de filtros e estilo CSS. Os grupos de trabalho do CSS e do SVG no W3C decidiram harmonizar o uso de filtros para HTML e SVG por meio do estilo CSS. Assim, a propriedade "filter" para CSS nasceu. No momento, um grupo de trabalho conjunto de pessoas que trabalham com CSS e SVG está fazendo muito trabalho para tornar os filtros úteis para todos. Você pode encontrar as especificações atuais para tudo isso aqui.

Uma nova vida para a propriedade CSS "filter"

Às vezes, um desenvolvedor da Web tem um déjà vu ao ver "filter" em estilos CSS. Isso ocorre porque as versões mais antigas do Internet Explorer tinham uma propriedade "filter" exposta pelo CSS para executar algumas funcionalidades específicas da plataforma. Essa propriedade foi descontinuada em favor da propriedade "filter" padrão, que agora faz parte do CSS3. Portanto, quando você encontrar o termo "filtro" em algumas páginas da Web antigas, não se confunda. A nova propriedade "filter" é onde está toda a ação, e as novas versões do IE estão implementando-a da mesma forma que todos os navegadores modernos.

Como funcionam os filtros

Então, o que um filtro faz exatamente? A maneira mais fácil de pensar em um filtro é como uma etapa de pós-processamento que faz algo mágico depois que todo o conteúdo da página foi planejado e desenhado.

Quando um navegador carrega uma página da Web, ele precisa aplicar estilos, executar o layout e renderizar a página para que haja algo para visualizar. Os filtros são aplicados após todas essas etapas e pouco antes da página ser copiada para a tela. O que eles fazem é tirar um snapshot da página renderizada como uma imagem bitmap, depois realizar alguns truques gráficos nos pixels do snapshot e desenhar o resultado na parte de cima da imagem da página original. Uma maneira de pensar neles é como um filtro colocado na frente de uma lente da câmera. O que você vê pela lente é o mundo exterior modificado pelo efeito do filtro.

Isso significa que há um tempo consumido ao renderizar uma página com filtros, mas usá-los corretamente terá um impacto mínimo na velocidade do seu site.

Além disso, assim como você pode empilhar vários filtros na lente da câmera, é possível aplicar um número arbitrário de filtros um após o outro para conseguir todos os tipos de efeitos.

Filtros definidos usando SVG e CSS

Como os filtros originalmente vieram do SVG, há maneiras diferentes de defini-los e usá-los. O SVG em si tem um elemento <filter> que reúne definições de vários efeitos de filtro usando a sintaxe XML. O conjunto de filtros definidos pelo CSS aproveita o mesmo modelo gráfico, mas são definições muito mais simples e fáceis de usar em uma folha de estilo.

A maioria dos filtros CSS pode ser expressa em termos de filtros SVG, e o CSS também permite que você faça referência a um filtro especificado em SVG, se quiser. Os designers de filtros CSS se esforçaram muito para facilitar a aplicação de um filtro para autores da Web. Por isso, este artigo vai abordar apenas os filtros disponíveis diretamente no CSS, ignorando as definições SVG por enquanto.

Como aplicar um filtro CSS

Os filtros do CSS são usados com a propriedade "filter" aplicada a qualquer elemento visível na página da Web. Um exemplo muito simples seria algo como

div { { % mixin filter: grayscale(100%); % } }

e isso faria com que o conteúdo dentro de todos os <div>elementos da página ficasse cinza. Ótimo para deixar sua página com a aparência de uma TV dos anos 1940.

A maioria dos filtros usa algum tipo de parâmetro para controlar a quantidade de filtragem. Por exemplo, se você quiser estilizar seu conteúdo para ficar entre a cor original e uma versão em escala de cinza, faça o seguinte:

div { { % mixin filter: grayscale(50%); % } }

Se você quiser aplicar vários filtros diferentes um após o outro, é fácil: basta colocá-los em ordem no CSS, assim:

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

Esse exemplo vai primeiro transformar todas as cores originais em escala de cinza e depois aplicar um efeito sépia, e vai ficar assim:

Com a flexibilidade disponível para aplicar filtros um após o outro, é possível conseguir todos os tipos de efeitos. Basta usar a imaginação para criar resultados incríveis.

Quais efeitos de filtro estão disponíveis usando CSS

O mecanismo de filtro SVG original é poderoso, mas, ao mesmo tempo, pode ser difícil de usar. Por isso, o CSS usa vários efeitos de filtro padrão que facilitam muito o uso deles.

Vamos conferir cada uma delas e entender o que elas fazem.

escala-de-cinza(valor)

Isso converte a cor da imagem de entrada em um tom de cinza. O "valor" aplicado controla quantas conversões cinzas serão aplicadas. Se for 100%, tudo vai ser um tom de cinza. Se for 0%, as cores não vão mudar. Você pode usar um número de ponto flutuante aqui se preferir em vez de porcentagens. Por exemplo, 0 funciona da mesma forma que 0%, enquanto 1,0 funciona da mesma forma que 100%.

sepia(amount)

Isso dá às cores transmitidas um tom de sépia, como em fotografias antigas. A aplicação de "valor" funciona da mesma forma que para o filtro "escala de cinza", ou seja, 100% faz com que todas as cores fiquem completamente em sépia, e valores menores permitem que o efeito seja aplicado em proporções menores.

saturate(amount)

Isso aplica um efeito de saturação de cor para que as cores fiquem mais vívidas. É um efeito legal que pode fazer com que as fotos pareçam pôsteres ou desenhos animados. Esse efeito também permite usar um valor maior que 100% para enfatizar a saturação. Definitivamente um efeito que pode deixar as coisas bem legais.

hue-rotate(angle)

Esse é um efeito de cor um pouco mais avançado, que pode ser usado para resultados interessantes. Ele muda as cores para deixar a imagem de entrada completamente diferente. Se você conseguir imaginar um espectro de cores indo de vermelho para violeta ao redor de uma roda de cores, esse efeito usa a cor original na roda como entrada e a gira pelo parâmetro "angle" para produzir a cor na roda para que ela girou como o valor da cor de saída. Assim, todas as cores na imagem são deslocadas pelo mesmo "ângulo" na roda. Claro, isso é uma simplificação do que ele faz, mas espero que seja o suficiente para fazer sentido.

invert(amount)

Esse efeito inverte as cores. Se a "quantidade" aplicada for 100%, a saída vai parecer um negativo de foto das antigas câmeras de filme. Assim como antes, o uso de valores menores que 100% vai aplicar progressivamente o efeito de inversão.

opacity(amount)

Se você quer que o conteúdo seja filtrado para parecer semitransparente, este é o procedimento ideal para você. O valor "amount" define o nível de opacidade da saída. Portanto, um valor de 100% é completamente opaco, e a saída será exatamente igual à entrada. À medida que o valor cai abaixo de 100%, a imagem de saída fica menos opaca (mais transparente) e você vai notar isso cada vez menos. Isso significa que, se ele se sobrepor a algo na página, o conteúdo abaixo começará a ficar visível. Um "amount" de 0% significa que desaparecerá completamente, mas observe que ainda é possível fazer com que eventos como cliques do mouse etc. aconteçam em objetos completamente transparentes, o que é útil caso você queira criar áreas clicáveis sem exibir nada.

Isso funciona da mesma forma que a propriedade "opacidade" que você já conhece. Em geral, a propriedade "opacity" do CSS não é acelerada por hardware, mas alguns navegadores que implementam filtros usando a aceleração de hardware aceleram a versão do filtro de opacidade para um desempenho muito melhor.

brilho(quantidade)

É como o controle de brilho da sua TV. Ele ajusta as cores entre o preto total e a cor original proporcionalmente ao parâmetro "amount". Se você definir esse valor como 0%, não vai aparecer nada além de preto, mas, à medida que o valor aumenta para 100%, a imagem original vai ficar cada vez mais clara, até chegar a 100%, quando ela será igual à imagem de entrada. É claro que você pode continuar. Portanto, definir algo como 200% vai deixar a imagem duas vezes mais brilhante do que a original, o que é ótimo para ajustar fotos com pouca luz.

contrast(amount)

Mais controles na sua TV! Isso vai ajustar a diferença entre as partes mais escuras e mais claras da imagem de entrada. Se você usar 0%, o resultado será preto, assim como com o "brilho", então não é muito interessante. No entanto, à medida que você aumenta o valor para 100%, a diferença na escuridão muda até atingir 100% e a imagem original aparece novamente. Você também pode aumentar o valor para mais de 100% para esse efeito, o que aumenta ainda mais a diferença entre as cores claras e escuras.

blur(radius)

Se você quiser uma borda suave para seu conteúdo, adicione um efeito de desfoque. Essa parece a clássica técnica de vaselina em uma folha de vidro, que costumava ser uma técnica de filmagem popular. Ele mistura todas as cores e espalha o efeito delas, mais ou menos como quando seus olhos estão fora de foco. O parâmetro "radius" afeta quantos pixels na tela se misturam, então um valor maior cria mais desfoque. Zero, claro, deixa a imagem inalterada.

drop-shadow(shadow)

É muito legal poder fazer com que seu conteúdo pareça estar ao ar livre, com o sol e uma sombra no chão. É claro que é isso que a "sombra projetada" faz. Ele cria um instantâneo da imagem, transforma-a em uma única cor, desfoca-a e desloca um pouco o resultado para que pareça uma sombra do conteúdo original. O parâmetro 'shadow' transmitido é um pouco mais complicado do que apenas um único valor. É uma série de valores separados por um espaço, e alguns valores também são opcionais. Os valores de "sombra" controlam onde a sombra é colocada, o nível de desfoque aplicado, a cor da sombra etc. Para saber mais sobre o que os valores de "sombra" fazem, a especificação CSS3 Backgrounds define "box-shadow" com muitos detalhes. Confira alguns exemplos abaixo para ter uma ideia das várias possibilidades.

Essa é outra operação de filtro semelhante à funcionalidade CSS atual disponível na propriedade "box-shadow". O uso da abordagem de filtro significa que ela pode receber aceleração de hardware de alguns navegadores, conforme descrito na operação "opacidade" acima.

URL que faz referência a filtros SVG

Como os filtros foram criados como parte do SVG, é lógico que você possa estilizar seu conteúdo usando um filtro SVG. Isso é fácil com a proposta atual de propriedade "filter". Todos os filtros em SVG são definidos com um atributo "id" que pode ser usado para referenciar o efeito do filtro. Portanto, para usar qualquer filtro SVG do CSS, basta fazer referência a ele usando a sintaxe "url".

Por exemplo, a marcação SVG de um filtro pode ser algo como:

<filter id="foo">...</filter>

a partir do CSS, você pode fazer algo tão simples como:

div { { % mixin filter: url(#foo); % } }

e pronto! Todos os <div>s no documento vão receber estilo com as definições de filtro SVG.

personalizado (em breve)

Em breve, os filtros personalizados vão ser lançados. Eles usam o poder da GPU gráfica para usar uma linguagem de sombreamento especial e produzir efeitos incríveis limitados apenas pela sua imaginação. Essa parte da especificação "filtro" ainda está em discussão e em constante mudança, mas assim que ela começar a aparecer em um navegador perto de você, vamos escrever mais sobre o que é possível.

Considerações sobre desempenho

Uma coisa que todo desenvolvedor da Web se preocupa é com a performance da página da Web ou do aplicativo. Os filtros CSS são uma ferramenta poderosa para efeitos visuais, mas, ao mesmo tempo, podem afetar o desempenho do seu site.

É importante entender o que eles fazem e como isso afeta o desempenho, especialmente se você quiser que seu site funcione bem em dispositivos móveis que ofereçam suporte a filtros CSS.

Primeiro, nem todos os filtros são iguais. Na verdade, a maioria dos filtros é executada rapidamente em qualquer plataforma e tem um impacto muito pequeno no desempenho. No entanto, os filtros que fazem qualquer tipo de desfoque tendem a ser mais lentos do que os outros. Isso significa, é claro, "desfoque" e "sombra". Isso não significa que você não deve usá-los, mas entender como eles funcionam pode ajudar.

Quando você faz uma blur, ela mistura as cores dos pixels ao redor do pixel de saída para gerar um resultado desfocado. Por exemplo, se o parâmetro radius for 2, o filtro precisará analisar dois pixels em todas as direções ao redor de cada pixel de saída para gerar a cor misturada. Isso acontece para cada pixel de saída, o que significa que muitos cálculos aumentam quando você aumenta o radius. Como blur procura em todas as direções, dobrar o "raio" significa que você precisa analisar quatro vezes mais pixels, então, na verdade, é quatro vezes mais lento para cada duplicação do radius. O filtro drop-shadow contém um blur como parte do efeito. Por isso, ele também se comporta da mesma forma que blur quando você muda as partes radius e spread do parâmetro shadow.

Não há perdas com blur, já que em algumas plataformas é possível usar a GPU para acelerar, mas isso não está necessariamente disponível em todos os navegadores. Se ficar em dúvida, o melhor é testar o "raio" que resulta no efeito desejado e tentar reduzi-lo o máximo possível, mantendo um efeito visual aceitável. Esse ajuste vai deixar seus usuários mais satisfeitos, especialmente se eles acessarem o site pelo smartphone.

Se você estiver usando filtros baseados em url que fazem referência a filtros SVG, eles podem conter qualquer efeito de filtro arbitrário. É importante lembrar que eles também podem ser lentos. Por isso, tente descobrir o que o efeito do filtro faz e faça testes em um dispositivo móvel para garantir um bom desempenho.

Disponibilidade em navegadores modernos

No momento, vários efeitos CSS filter estão sendo disponibilizados em navegadores baseados em WebKit e Mozilla. Esperamos vê-los em breve no Opera e no IE10. Como a especificação ainda está em desenvolvimento, alguns fornecedores de navegadores implementaram essas coisas usando prefixos de fornecedores. No WebKit, é necessário usar -webkit-filter. No Mozilla, você precisa usar -moz-filter e fique atento às outras implementações do navegador à medida que elas são exibidas.

Nem todos os navegadores oferecem suporte a todos os efeitos de filtro imediatamente, portanto sua quilometragem pode variar. Atualmente, o navegador Mozilla oferece suporte apenas à função filter: url(), sem o prefixo do fornecedor, porque essa implementação é anterior às outras funções de efeitos.

Resumimos os efeitos dos filtros de CSS disponíveis nos vários navegadores abaixo com indicadores aproximados de desempenho para quando são implementados em softwares. Vários navegadores modernos estão começando a implementar isso no hardware (aceleração de GPU). Quando eles são criados com suporte a GPU, a performance é muito melhor para os efeitos mais lentos. Como de costume, o teste em diferentes navegadores é a melhor maneira de avaliar o desempenho.

Outros bons recursos

Um aplicativo incrível de pintura abstrata interativa com filtros, que permite experimentar e compartilhar sua arte Confira a excelente página de filtro interativo do Eric Bidelman Um ótimo tutorial sobre filtros com exemplos A especificação oficial do rascunho de efeitos de filtro do W3C 1.0 http://dev.w3.org/fxtf/filters/ Exemplo de interface criada usando filtros