Como Inverter a Cor De Uma Imagem Com CSS

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
2
3
.icone-branco {
filter: invert(1);
}

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!