Nenhum produto encontrado nessa seleção.
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);
}
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:
Você também pode utilizar um meio termo, por exemplo:
img {
-webkit-filter: grayscale(80%);
}
Exemplo:
Sepia (Sépia)
Como o próprio nome indica, adiciona tons de sépia no elemento escolhido, exemplo:
img {
-webkit-filter: sepia(100%);
}
Também aceita valores de 0 a 100 porcento.
Saturate (Saturação)
Altera a saturação da imagem:
img {
-webkit-filter: saturate(1000%);
}
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);
}
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);
}
Invert
Inverte as cores dada determinada porcentagem:
img {
-webkit-filter: invert(80%);
}
Contraste
Altera o contraste das imagens:
img {
-webkit-filter: contrast(15%);
}
img {
-webkit-filter: contrast(1500%);
}
Aceita valores em porcentagem.
Brightness (Brilho)
Altera o brilho das imagens:
img {
-webkit-filter: brightness(200%);
}
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);
}
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.
