Css Filters

Os "CSS filters" já estão em cena por algum tempo graças aos SVGs (Scalable Vector Graphics), onde tinham a capacidade de gerar diferentes filtros de efeitos de imagem para tais vetores.

Atualmente, eles não funcionam apenas com SVGs, na verdade, hoje em dia você pode aplicar os CSS filters em qualquer coisa de uma página HTML, imagens, elementos, e demais.

O recurso não está totalmente implantado em todos os navegadores, porém, se quiser utilizar para ir se adaptando com as novas propriedades, vamos passar exemplos que vão funcionar no Google Chrome (Versão 34.0.1847.116).

Infelizmente não consegui fazer funcionar nos outros navegadores, nem com os prefixos e nem com o nome da propriedade "filter" em si.

Como os "CSS filters" funcionam

Os "CSS Filters" não são difíceis para que você possa os compreender. Vamos imaginar uma página HTML (com CSS) comum. Quando ela começa a carregar, o estilo CSS é aplicado normalmente (como já expliquei, da direita para a esquerda, do topo para baixo). Os filtros são aplicados depois que tudo foi carregado, mas ainda antes que a página seja exibida.

Tais filtros tiram um snapshot do conteúdo para criarem suas funções e voltar a exibir o conteúdo alterado sobre o original. Eles funcionam da mesma maneira que os filtros de câmera; primeiro você tem a lente que "vê" as coisas, porém, antes que você possa capturar uma imagem, é possível adicionar filtros para capturar uma versão alterada do que realmente está sendo visto pela lente.

Como resultado, filtros podem gerar conteúdo em preto e branco, com tons de sépia, borrado, com a saturação alterada e assim por diante.

Afeta o carregamento da página?

Sim, claro! Qualquer linha de código a mais que você adiciona no seu site, altera o "peso" da sua página. Até espaços em branco geram alguns bytes a mais. Porém, com os filtros você vai trabalhar na renderização da página, portanto, seu site vai utilizar mais recursos do computador do cliente.

Claro que não é algo para se preocupar se você adicionar um efeito apenas na sua logo, por exemplo. Porém, pode se tornar algo um pouco mais complicado se você adicionar filtros em todas as imagens do seu site, como o código abaixo:

/*
 "img:hover" seleciona todas as imagens da página
 das quais o usuários passa o mouse sobre.
 Neste caso o efeito será "preto e branco" 
 e a imagem vai ficar 2px desfocada.
 */
img:hover { 
	-webkit-filter: grayscale(100%) blur(2px);
}

CSS Filter 1

Utilizando os CSS filters

Vamos pegar a imagem da capa desse artigo (que não tem nada a ver com o conteúdo) para fazer os nossos testes, ela está lá justamente para isso. Vá fazendo junto com a gente e veja os resultados no seu próprio navegador (leia-se Google Chrome).

Grayscale (preto e branco)

Utilizamos "grayscale" para descrever a porcentagem de cores que a imagem terá, por exemplo:

  • 0% – imagem tem todas as cores;
  • 100% – imagem totalmente em preto e branco; 

No CSS:

img { 
	-webkit-filter: grayscale(100%); 
}

Exemplo:

CSS filter 2

Você também pode utilizar um meio termo, por exemplo:

img { 
	-webkit-filter: grayscale(80%); 
}

Exemplo:

CSS filter 3

Sepia (Sépia)

Como o próprio nome indica, adiciona tons de sépia no elemento escolhido, exemplo:

img { 
	-webkit-filter: sepia(100%); 
}

CSS filter 4

Também aceita valores de 0 a 100 porcento.

Saturate (Saturação)

Altera a saturação da imagem:

img { 
	-webkit-filter: saturate(1000%); 
}

CSS filter 5

Aceita valores extremamente elevados, como no exemplo acima, no qual utilizei 1000% de saturação.

Blur

Praticamente idêntico ao efeito "Desfoque gaussiano" do photoshop, ou seja, desfoca a imagem:

img { 
	-webkit-filter: blur(10px); 
}

CSS filter 6

Aceita valores em pixels.

Hue-rotate

Este é um pouco diferente dos anteriores, ele utiliza graus para transformar as cores de um elemento. A roda de cores, como todos os círculos, começa em 0 e vai até e 360 graus. Com o filtro hue-rotate, você só precisa escolher um ponto na roda de cores para determinar o quanto de rotação você quer.

img { 
	-webkit-filter: hue-rotate(120deg); 
}

CSS filter 7

Invert

Inverte as cores dada determinada porcentagem:

img { 
	-webkit-filter: invert(80%); 
}

CSS filter 8

Contraste

Altera o contraste das imagens:

img { 
	-webkit-filter: contrast(15%); 
}

CSS filter 9

img { 
	-webkit-filter: contrast(1500%); 
}

CSS filter 10

Aceita valores em porcentagem.

Brightness (Brilho)

Altera o brilho das imagens:

img { 
	-webkit-filter: brightness(200%); 
}

CSS filter 11

Drop Shadow

Adiciona sombra nas imagens. Diferente da opção "box-shadow", funciona também com imagens irregulares (não quadradas) como PNG, por exemplo:

img { 
	-webkit-filter: drop-shadow(5px 5px 5px #000);
}

CSS filter 12

Concluindo

CSS Filters ainda não estão presentes em todos os navegadores, mas é um grande avanço que o Google Chrome já aceite tal recurso. Provavelmente não deve demorar muito para que isso seja algo comum nos nossos código em um futuro próximo, ou pelo menos, espero que seja assim.