Estou desenvolvendo uma página Web onde utilizo inúmeros efeitos em CSS. entre um deles percebi que não consigo ultilizar os filtros no Firefox. Buscando pela internet encontrei algumas soluções que me dizem para usar arquivos SVG. O problema é quando preciso utilizar 2 filtros em um mesmo elemento, por exemplo inverter a cor de uma imagem e colocar sombra. No Chrome consigo fazer isso dessa maneira:
div img{
-webkit-filter: invert(100%) drop-shadow(0.2em 0.1em 0.3em #000);
}
Ao utilizar 2 SVG no firefox, ele buga, as vezes mostra um efeito, as vezes mostra outro efeito, as vezes não mostra, como se ele dependesse de qual SVG for carregado por último e sobrepor o primeiro.
como resolver esse impasse?
Uma das class
que utilizo para transformar uma imagem em preto e branco
.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}