Introdução
Os filtros são uma ferramenta poderosa que os autores da Web podem usar para conseguir efeitos visuais interessantes. Neste artigo, vamos falar sobre a história dos efeitos de filtro, o que eles fazem e como podem ser usados. Vamos abordar exemplos de todos os filtros predefinidos definidos para CSS com alguns exemplos. Também vamos abordar as considerações de desempenho para usá-los em computadores e dispositivos móveis, porque conhecer o impacto da velocidade dos filtros é importante para uma boa experiência do usuário. Por fim, analisaremos o estado atual da implementação em navegadores modernos.
O passado, presente e futuro dos efeitos de filtro
Efeitos de filtro originados como parte da especificação Scalable Vector Graphics (SVG). Eles foram criados para aplicar vários efeitos diferentes de imagem baseados em pixels em um desenho vetorial. Com o tempo, à medida que os fornecedores de navegador acrescentavam recursos SVG em seus navegadores, a utilidade dos filtros tornou-se evidente. Robert O'Callahan, do Mozilla, teve a ideia brilhante 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 como a combinação de filtros e estilo CSS poderia ser eficiente. Os grupos de trabalho CSS e SVG no W3C decidiram harmonizar o uso de filtros para HTML e SVG por meio do estilo CSS e assim nasceu a propriedade "filter" do CSS. No momento, uma força-tarefa conjunta de pessoas que trabalham com CSS e SVG está trabalhando muito para tornar os filtros universalmente úteis. Você pode encontrar as especificações atuais para tudo isso aqui.
Uma nova vida para a propriedade CSS "filter"
Deja Vu às vezes avisa um desenvolvedor da Web ao ver o termo "filtro" em estilos CSS. Isso se deve ao fato de que versões antigas do Internet Explorer tinham uma propriedade "filter" exposta pelo CSS para executar algumas funcionalidades específicas da plataforma. Isso foi descontinuado e substituído pela propriedade "filter" padrão, que agora faz parte do CSS3. Então, quando você vir "filtro" à solta em algumas páginas da web antigas, não é necessário se confundir. A nova propriedade "filter" é onde toda a ação está. As novas versões do IE a implementam da mesma forma que todos os navegadores mais recentes.
Como funcionam os filtros
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 tiver sido disposto e desenhado.
Quando um navegador carrega uma página da Web, ele precisa aplicar estilos, executar o layout e depois renderizar a página para que haja algo a ser observado. Os filtros são ativados após todas essas etapas e pouco antes de a página ser copiada para a tela. Eles fazem um instantâneo da página renderizada como uma imagem em bitmap, depois executam alguns elementos gráficos nos pixels do instantâneo e desenham o resultado por cima da imagem da página original. Pense neles como um filtro colocado na frente da lente de uma câmera. O que você vê pelas lentes é o mundo externo modificado pelo efeito do filtro.
Obviamente, isso significa que há tempo consumido ao desenhar uma página com filtros, mas o uso adequado deles causará um impacto mínimo na velocidade do site.
Além disso, assim como é possível empilhar vários filtros na frente um do outro na lente da câmera, você pode 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 vieram do SVG, há diferentes maneiras de defini-los e usá-los. O SVG tem um elemento <filter> que agrupa as definições de vários efeitos de filtro usando a sintaxe XML. O conjunto de filtros definido pelo CSS aproveita o mesmo modelo gráfico, mas são definições muito mais simples que são fáceis de usar em uma folha de estilo.
A maioria dos filtros de CSS pode ser expressa em termos de filtros do SVG, e o CSS também permite fazer referência a um filtro especificado no SVG, se você quiser. Os designers de filtros do CSS tiveram um grande esforço para facilitar a aplicação de um filtro para autores da Web. Por isso, este artigo aborda apenas os filtros disponíveis diretamente no CSS, ignorando as definições de SVG por enquanto.
Como aplicar um filtro CSS
O uso de filtros do CSS é feito com a propriedade "filter" aplicada a qualquer elemento visível na página da Web. Para um exemplo muito simples, você poderia escrever algo como
div { { % mixin filter: grayscale(100%); % } }
e o conteúdo dentro de todos os elementos <div> da página ficará cinza. Ótimo para fazer sua página parecer uma imagem de TV dos anos 40.
A maioria dos filtros assume alguma forma de parâmetro para controlar a quantidade de filtragem. Por exemplo, se quisesse estilizar seu conteúdo para ficar entre a cor original e uma versão em escala de cinza, você faria assim:
div { { % mixin filter: grayscale(50%); % } }
É fácil aplicar vários filtros diferentes, basta colocá-los em ordem no CSS, da seguinte maneira:
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
Esse exemplo primeiro tornará toda a escala de cinza da cor original e depois aplicará um efeito sépia, e acabará com a aparência a seguir:
Com a flexibilidade disponível para aplicar filtros um após o outro, todos os tipos de efeitos podem ser alcançados. Depende da sua imaginação para criar resultados incríveis.
Quais efeitos de filtro estão disponíveis usando CSS
Portanto, o mecanismo de filtro SVG original é eficiente, mas ao mesmo tempo pode ser difícil de usar. Por isso, o CSS apresenta vários efeitos de filtro padrão que facilitam bastante seu uso.
Vamos analisar cada um deles e ver o que eles fazem.
- escala de cinza(valor)
- Isso converte a cor da imagem de entrada em um tom de cinza. O "valor" aplicado controla a quantidade de conversão cinza. Se for 100%, tudo será um tom de cinza. Se for 0%, as cores não serão alteradas. Você pode usar um número de ponto flutuante aqui se preferir, em vez de porcentagens, ou seja, 0 funciona o mesmo que 0%, enquanto 1,0 funciona o mesmo que 100%.
- sépia(valor)
- Isso dá às cores transmitidas em uma tonalidade de sépia como em fotos antigas. O valor aplicado funciona da mesma forma que o filtro "escala de cinza", ou seja, 100% torna todas as cores totalmente sépias, enquanto valores menores permitem que o efeito seja aplicado em proporções menores.
- saturar(quantidade)
- Isso aplica um efeito de saturação de cores, fazendo com que elas pareçam mais vívidas. É um efeito legal que pode fazer as fotos parecerem pôsteres ou desenhos.Esse efeito também permite usar um valor maior que 100% para realmente enfatizar a saturação. Definitivamente um efeito que deixa as coisas muito estranhas!
- giro de matiz(ângulo)
- Este é um efeito geek de cor que pode ser usado para resultados interessantes. Ele muda as cores para que a imagem de entrada pareça completamente diferente. Imagine um espectro de cores que vai de vermelho a violeta em 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 no disco para a qual ele gira como o valor da cor de saída. Assim, todas as cores na imagem são alteradas pelo mesmo "ângulo" no disco. Obviamente, essa é uma simplificação do que faz, mas esperamos que seja próxima o suficiente para que faça sentido.
- inverter(valor)
- Esse efeito muda as cores para que, se a "quantidade" aplicada for 100%, a saída pareça um negativo da foto do antigo filme das câmeras. Assim como antes, o uso de valores menores que 100% aplicará progressivamente o efeito invertido.
- opacidade(quantidade)
- Se você quer que o conteúdo que está sendo filtrado seja semitransparente, essa é a melhor opção. O valor "amount" define o nível de opacidade da saída. Portanto, um valor de 100% é completamente opaco, então a saída será exatamente a mesma que a entrada. À medida que o valor fica abaixo de 100%, a imagem de saída se torna menos opaca (mais transparente), e ela é cada vez menor. Isso significa que, se ele se sobrepuser a outro elemento na página, o texto que está por baixo começará a ficar visível. Um "valor" de 0% significa que ele desaparecerá completamente. No entanto, ainda é possível fazer com que eventos como cliques do mouse, entre outros, aconteçam em objetos completamente transparentes. Portanto, isso é útil se você deseja criar áreas clicáveis sem exibir nada.
Isso funciona da mesma forma que a propriedade "opacidade" que você já conhece. Em geral, a propriedade "opacidade" do CSS não é acelerada por hardware, mas alguns navegadores que implementam filtros usando aceleração de hardware aceleram a versão da opacidade do filtro para ter um desempenho muito melhor.
- brilho(quantidade)
- Esse recurso funciona como o controle de brilho na sua TV. Ele ajusta as cores entre a cor completamente preta e a cor original proporcional ao parâmetro "amount". Se definir esse parâmetro como 0%, você verá nada além de preto. À medida que o valor subir para 100%, a imagem original vai aumentar cada vez mais, até chegar a 100%, onde é o mesmo que a imagem de entrada. É claro que você pode continuar. Definir um valor como 200% deixará a imagem duas vezes mais brilhante do que a original. Isso é ótimo para ajustar fotos com pouca luz!
- contraste(quantidade)
- Mais controles da sua TV! Isso 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 "brilho", então não é muito interessante. No entanto, conforme você aumenta o valor até 100%, a diferença na escuridão muda até atingir 100% e se tornar a imagem original novamente. Você também pode ir além de 100% para esse efeito, o que aumenta ainda mais a diferença entre cores claras e escuras.
- desfoque(raio)
- Se você quiser uma parte suave do conteúdo, adicione um desfoque. Esta parece a vaselina clássica em uma folha de vidro que costumava ser uma técnica popular de produção de filmes. Ele borra todas as cores e espalha o efeito, como quando seus olhos não estão focados. O parâmetro "raio" afeta quantos pixels na tela se misturam entre si, portanto, um valor maior criará mais desfoque. Nenhuma delas deixa a imagem inalterada.
- drop-shadow(shadow)
- É muito bom poder mostrar ao seu conteúdo que está do lado de fora com uma sombra no chão. E é claro que isso é o que a "sombra projetada" faz. Ele faz um instantâneo da imagem, aplica uma única cor a ela, desfoca e desvia um pouco o resultado para que pareça uma sombra do conteúdo original. O parâmetro "sombra" transmitido é um pouco mais complicado do que apenas um valor único. É 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, quanto desfoque é aplicado, a cor da sombra etc. Para mais detalhes sobre o que os valores de "sombra" fazem, a especificação Planos de fundo CSS3 define "box-shadow" com muitos detalhes. Alguns exemplos a seguir devem lhe dar uma boa ideia das várias possibilidades.
Essa é outra operação de filtro semelhante à funcionalidade CSS existente disponível por meio da propriedade "box-shadow". Usar a abordagem de filtro significa que ele pode ser acelerado por alguns navegadores, conforme descrito para a operação de "opacidade" acima.
- URL que faz referência a filtros SVG
- Como os filtros foram criados como parte do SVG, a ideia é que você possa estilizar seu conteúdo usando um filtro SVG. Isso é fácil com a proposta atual de propriedade de 'filtro'. Todos os filtros no 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 referenciá-lo usando a sintaxe "url".
Por exemplo, a marcação SVG para um filtro pode ser algo como:
<filter id="foo">...</filter>
a partir do CSS, você poderia fazer algo simples como:
div { { % mixin filter: url(#foo); % } }
e voilà! Todos os <div>s no documento serão estilizados com as definições de filtro do SVG.
- personalizado (em breve)
- Os filtros personalizados serão lançados em breve. Eles aproveitam o poder da sua GPU para usar uma linguagem de sombreamento especial e realizar efeitos incríveis, limitados apenas pela sua imaginação. Essa parte da especificação de 'filtro' ainda está em discussão e em fluxo, mas assim que ela começar a ser exibida em um navegador perto de você, escreveremos mais sobre o que é possível.
Considerações sobre performance
Uma coisa que todo desenvolvedor web se preocupa é o desempenho de sua página ou aplicativo. Os filtros de CSS são uma ferramenta eficiente de efeitos visuais, mas podem afetar a performance do site.
É importante entender o que eles fazem e como isso afeta o desempenho, principalmente se você quiser que seu site funcione bem em dispositivos móveis caso eles sejam compatíveis com filtros de CSS.
Em primeiro lugar, nem todos os filtros são criados da mesma forma. Na verdade, a maioria dos filtros é executada rapidamente em qualquer plataforma e tem um impacto muito pequeno no desempenho. No entanto, filtros que fazem qualquer tipo de desfoque tendem a ser mais lentos do que os outros. Obviamente, isso significa "desfoque" e "sombra projetada". 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 em todo o pixel de saída para gerar um resultado desfocado. Portanto, digamos que o parâmetro radius seja 2, então o filtro precisa olhar dois pixels em todas as direções em torno de cada pixel de saída para gerar a cor mista. Isso acontece para cada pixel de saída, o que significa muitos cálculos que aumentam quando você aumenta a radius. Como blur observa em todas as direções, dobrar o "raio" significa que você precisa ver quatro vezes mais pixels. Portanto, ele é quatro vezes mais lento para cada duplicação do radius. O filtro drop-shadow contém um blur como parte do efeito. Portanto, ele também se comporta da mesma forma que blur quando você muda as partes radius e spread do parâmetro shadow.
Com o blur, nem tudo fica perdido, já que em algumas plataformas é possível usar a GPU para acelerar o processo, mas isso não está necessariamente disponível em todos os navegadores. Na dúvida, o melhor é testar o "raio" que dá o efeito desejado e reduzi-lo o máximo possível, mantendo um efeito visual aceitável. Quando você fizer isso, seus usuários ficarão mais satisfeitos, especialmente se eles usarem seu site em um celular.
Se você estiver usando filtros baseados em url que fazem referência a filtros SVG, eles podem conter qualquer efeito de filtro arbitrário. Portanto, saiba que eles também podem ser lentos. Por isso, tente verificar se você sabe o que o efeito de filtro faz e faça experimentos em um dispositivo móvel para garantir que o desempenho seja adequado.
Disponibilidade em navegadores mais recentes
No momento, vários efeitos filter de CSS estão sendo disponibilizados em navegadores baseados no WebKit e no Mozilla. Esperamos vê-los em breve no Opera e também no IE10. Como a especificação ainda está em desenvolvimento, alguns fornecedores de navegadores implementaram esse recurso usando prefixos do fornecedor. Portanto, no WebKit você precisa usar -webkit-filter. No Mozilla, será necessário usar -moz-filter e ficar de olho em outras implementações do navegador, conforme elas aparecem.
Nem todos os navegadores oferecem suporte a todos os efeitos de filtro imediatamente, portanto sua quilometragem varia. No momento, o navegador Mozilla oferece suporte apenas à função filter: url(), sem o prefixo do fornecedor, já que essa implementação é anterior às outras funções de efeitos.
Resumimos abaixo os efeitos de filtros de CSS disponíveis nos vários navegadores com indicadores de desempenho aproximados para quando eles forem implementados no software. Vários navegadores modernos estão começando a implementar esses recursos no hardware (acelerado pela GPU). Quando criados com suporte a GPUs, o desempenho é muito melhorado para efeitos mais lentos. Como sempre, realizar testes em navegadores diferentes é a melhor forma de avaliar o desempenho.
| Efeito de filtro | Suporte ao navegador | Desempenho |
|---|---|---|
| tons de cinza | Chrome | muito rápido |
| sépia | Chrome | muito rápido |
| saturar | Chrome | muito rápido |
| rotação de matiz | Chrome | rápida |
| inverter | Chrome | muito rápido |
| opacity | Chrome | pode ser lento |
| brilho | Chrome | rápida |
| contraste | Chrome | rápida |
| desfocar | Chrome | Lento, a menos que seja acelerado |
| drop-shadow | Chrome | pode ser lento |
| Função URL() | Chrome e Mozilla | Varia, de rápido a lento |
Outros bons recursos
Um aplicativo incrível de pintura abstrata interativa com filtros que permite testar e compartilhar sua obra de arte Não deixe de conferir a excelente página filtro interativo de Eric Bidelman Um ótimo tutorial sobre filtros com exemplos A especificação de rascunho oficial do W3C Filter Effects 1.0 http://dev.w3.org/fxtf/filters/ Exemplo interface criada com filtros