Esses dias estava desenvolvendo uma aplicação para um de nossos clientes, onde pegamos o protótipo da tela, feito no Marvel por um de nossos UI Designers (User Interface Designers).
Todas as imagens e icones já estavam recortados e prontos para serem usados. Porém, em uma determinada página, estava sendo usado um ícone com o símbolo “+”, em branco, porém, a versão que eu tinha recortada era em preto, e eu não conseguiria conversar com o UI naquele momento, eu precisava me virar com o que eu tinha em mãos! Como poderia fazer isso?
Graças ao CSS, conseguimos fazer algumas modificações em nossas imagens, sem a necessidade de alterar para uma outra imagem!
Você conhece a propriedade filter?
No CSS3 temos uma propriedade chamada filter, com ela definir efeitos visuais em um elemento!
Então, conhecendo essa propriedade, como eu contornei o problema de alterar a cor da imagem?
O ícone que eu estava utilizando era de cor preta e em uma determinada página que o fundo também era preto, eu precisava daquele mesmo ícone em cor branca!
A solução foi simples:
1 | .icone-branco { |
Com isso, invertemos a cor atual da imagem!
Simples não é mesmo?
A propriedade filter possui outras opções, como blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), url().
Fique a vontade de brincar com essa propriedade super legal e muito útil!
