Caso você tenha que dar suporte a navegadores mais antigos, será obrigado a utilizar imagens já tratadas. Do contrário, poderá aproveitar essas funcionalidades.
Mas, quais as vantagens de termos isso no CSS se o designer pode nos enviar tudo pronto?
Algumas pessoas dizem que uma das vantagens é continuar com a imagem original intacta, permitindo editá-la novamente caso sejam necessários ajustes. No entanto, muitos designers trabalham com os filtros separadamente da imagem, exatamente para não perder a original, então isso não é um grande motivo.
Como pudemos ver no exemplo acima, é possível aplicar os filtros em qualquer elemento, não apenas em imagens. Caso você precise aplicar em um elemento dinâmico, um texto, uma animação, vídeo, etc, é bem mais prático fazer estes tratamentos pelo CSS.
Em alguns designs que querem mostrar algo mais vivo, com ideia de movimento, etc, é comum o uso de transições. A propriedade filter
também nos permite criar transições e animações, o que não daria com o uso de material já pronto vindo de um software de edição de imagem ou vídeo.
Outra possibilidade é a integração com o JavaScript. Conforme você vai interagindo com a página, algum elemento pode mudar de cor, ou se você quiser deixar algum trecho menos destacado para dar atenção a outro elemento, que tal deixá-lo em uma escala cinza? Ou criar um efeito de vidro fosco?
Voltando para o tratamento de imagens: imagine um site que tenha uma imagem padrão, seja de banner ou de fundo, e cada categoria do site tem uma cor, e a imagem deve seguir essa cor. Com os filtros do CSS, ao invés de ter uma imagem para cada cor, podemos carregar apenas uma imagem e mudar sua cor pela função hue-rotate
.
Quem utiliza sprites ao invés de FontIcons muitas vezes acaba tendo que repetir alguns ícones apenas para ter sua cor diferente. Com os filtros do CSS podemos mudar a cor desses sprites.
Também há uma biblioteca baseada nos filtros do CSS, CSSGram
, que recria os filtros do Instagram apenas com CSS.
Essas foram algumas ideias simples do que os filtros do CSS podem nos oferecer e que seriam difíceis ou impossíveis apenas com um material pronto vindo de softwares de edição de imagens.
E você, tem alguma ideia em que os filtros seriam úteis? Já precisou deles em um projeto? Compartilhe com a gente aí nos comentários!
Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.
Todos os artigosConheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou ca...
Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui.
Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScrip...
Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015.
Trabalha com JavaScript? Então você precisa conhecer estes métodos para trabalhar com Arrays.
Conheça as principais Game Engines para JavaScript.
Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador.
Veja como e onde podemos aproveitar os Generators no JavaScript para melhorar o nosso código.
Generators são uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código...
Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Docum...
Quer iniciar seus estudos em JavaScript e não sabe por onde começar? Veja o que preparamos pra você.
Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáv...