Divertindo-se Com CSS do Futuro: Filtros de Pano de Fundo

Nesse tutorial veremos uma ferramenta emergente do CSS conhecida como Filtro de Pano de Fundo.

A proposta do backdrop-filter é influenciada pelo design da Apple, como naquele plano de fundo transparente, embaçado e congelado visto nas interfaces mais recentes do iOS e macOS. É perceptível na Dock, no Menu Contextual e na Central de Notificações.

Filtro de pano de fundo está sob os Filtros CSS Level 2 e, até agora, apenas funciona no Safari 9 com o prefixo -webkit-; e no Chrome e Opera, habilitando os "Recursos Experimentais da Plataforma Web" no menu chrome://flags.

Usando Filtro de Pano de Fundo

Backdrop-filter está incluso na especificação dos Filtros do CSS e, como na propriedade filter, herda todas as funções de filtro conhecidas, como grayscale(), blur() e sepia(). A única diferença é que afetará os elementos por baixo do elemento selecionado.

Para usá-lo, precisaremos de pelo menos dois elementos: o alvo e o que ficará por baixo dele. Por exemplo:

1

<div id="first-element" class="filter"></div>

2

<a id="second-element" href="https://example.com"><img src="images/name.jpg" alt=""></a>

Adicionemos um plano de fundo com baixa opacidade no primeiro elemento para usarmos backdrop-filter com uma função, por exemplo, grayscale(), para torná-lo preto e branco.

1

.filter {

2

    -webkit-backdrop-filter: blur(10px); /* Safari 9+ */

3

    backdrop-filter: blur(10px); /* Chrome and Opera */

4

    background-color: rgba(255, 255, 255, 0.3);

5

}

Vejamos que, na demo, os descendentes dos elementos .filter (um botão, no caso), permanecem firmes apesar da função blur(). É uma vantagem que backdrop-filter tem sobre filter, onde todos os descendentes são impactados.

Nota: imagem obtida do tutorial Como Criar Illustração Inspirada na História da Chapeuzinho Vermelho com o Paint Tool SAI.

Combinando Múltiplos Filtros

Combinar dois filtros em uma única declaração também é possível. Por exemplo, mantenhamos o blur() e adicionemos o grayscale() para remover as cores do pano de fundo.

1

.filter {

2

    -webkit-backdrop-filter: grayscale() blur(10px); /* Safari 9+ */

3

    backdrop-filter: grayscale() blur(10px); /* Chrome and Opera */

4

    background-color: rgba(255, 255, 255, 0.3);

5

}

Outras funções que podemos misturar são:

• brightness(): aceita números de 0 ao infinito, ou percentuais. Qualquer número abaixo de 1, como o 0.8, escurecerá o elemento e acima de 1 o clareará.
• contrast(): aceita números e percentais, semelhante a brightness(), exceto que a função define o contraste do elemento.
• invert(): essa função gera as cores opostas ou negativas das cores pano de fundo. Igualmente, ela aceita números e percentuais como valores.

Filtro Avançado Com SVG

Se não encontramos o efeito desejado com as funções padrões, podemos adicionar filtros avançados com SVG. Criemos um filtros SVG com um ID único e salvemo-no em um arquivo .svg:

1

<filter id="morph">

2

<feMorphology id="morph-value" operator="erode" in="SourceGraphic" radius="3"/>

3

</filter>

Refira-se ao filtro com a função url(), dessa forma:

1

.filter {

2

    -webkit-backdrop-filter: url(../images/filter.svg#morph); /* Safari 9 */

3

    backdrop-filter: url(../images/filter.svg#morph); /* Chrome and Opera */

4

}

Infelizmente, adicionar filtros com a função url() parece não funcionar em qualquer navegador, no momento. Mas, quando implementado corretamente, parecerá com isso:

O Que Construir?

Existem inúmeras implementações práticas na web que poderíamos aplicar filtros de pano de fundo de forma mais significativa que apenas por adorno. Um bom exemplo é o Medium, que borra a imagem de cobertura da publicação, bem como as outras imagens, enquanto elas estão carregando.

Outro grande exemplo do mundo real é o Facebook, que borra as imagens com conteúdo adulto, inapropriado ou pertubador, até que os usuários consitam a visualização.

Conclusão

Por anos, o CSS tem sido aprimorado com novas especificações que permitem designers criar interfaces mais atraentes na web. Transformações, transições e animações já tem seus espaços e, agora, Filtros de Pano de Fundo buscam o seu.

Embora talvez seja cedo para usá-los em produção, essa demos mostram que logo seremos capazes de aplicar efeitos de filtros a elementos de forma mais simples e que dependam menos de JavaScript ou Bibliotecas do Canvas. Até lá, siga o Blog do Webkit para mais atualizações sobre esse e outros projetos.

Recursos Adicionais

• Rascunho do Filtro de Pano de Fundo: Rascunho da W3C
• Suporte dos Navegadores ao Filtro de Pano de Fundo
• Pens com Filtros de Pano de Fundo no CodePen