Quem desenvolve páginas para a Web há um bom tempo deve se lembrar da época em que o CSS era bem limitado. O que os designers criavam, normalmente no PhotoShop, tinha de ser recortado e cuidadosamente organizado em tabelas para que fosse possível ter os efeitos de imagem e layout nas páginas.
Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS.
Uma propriedade ainda pouco utilizada, mas já bem suportada pelos browsers modernos, é a filter. Com ela podemos aplicar filtros em nossos elementos ou imagens como se estivéssemos fazendo tratamentos por um software de edição de imagens.
Podemos fazer os seguintes tratamentos em nossos elementos:
- blur(px) - nível de ofuscamento
- brightness(%) - ajusta o brilho
- contrast(%) - ajusta o contraste
- drop-shadow(h, v, blur, color) - aplica sombras
- grayscale(%) - transforma as cores do elemento para uma escala cinza
- hue-rotate(deg) - altera as cores do elemento
- invert(%) - inverte as cores do elemento
- opacity(%) - controla a opacidade do elemento
- saturate(%) - altera a saturação do elemento
- sepia(%) - transforma as cores do elemento para um tom sépia
Aqui temos um exemplo prático sobre o uso de cada uma dessas funções da propriedade filter.
Caso você tenha que dar suporte a navegadores mais antigos, será obrigado a utilizar imagens já tratadas. Do contrário, poderá aproveitar essas funcionalidades.
Curso React - Dominando Componentes
Conhecer o cursoVantagens
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!
