Publicado em 20 de mar.

CSS Filters, Não funcionando (firefox, IE)

Estou tentando usar o blur e o grayscale em imagens na minha págin a com os filtros do css.

Funciona somente no Chome... o que estou fazendo de errado?

<div class = 'image style-blur'></div>
<div class = 'image style-gray'></div>

.style-blur {
 filter: blur(5px);
 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
}

.style-gray {
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
}

Link: http://jsfiddle.net/Su8J2/

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Maujor· 20 de mar.

A propriedade filter das CSS é suportada apenas pelo navegador Chrome.
Consulte http://caniuse.com/css-filters

reebr· 21 de mar.

Obrigado pela informação Maujor.

Contornei o problema da seguinte forma (para quem quiser saber):

GRAYSCALE:

.gray {
 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");
}

BLUR:

.blur {
 filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGZpbHRlciBpZD0iYmx1ciI+DQoJCTxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIC8+DQoJPC9maWx0ZXI+DQo8L3N2Zz4=#blur);
}

RESULTADO: http://jsfiddle.net/rnxn/am8Wu/1/

[ Provavelmente isso deve detonar o desempenho do site, mas é mais para estudos =) ]