Como deixar uma imagem em tons de cinza com CSS - Grayscale
07/09/2013 - Escrito por: Felipe Mitamura Hatanaka
Neste artigo vou mostrar como deixar uma imagem colorida em tons de cinza e como fazer este efeito quando passarmos o mouse em cima, no hover da imagem. Para deixar-la cinza, basta utilizar a propriedade do css grayscale(100%), exemplificada no código abaixo:
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
Observando os comentarios, podemos entender que cada linha acima serve para fazer o efeito funcionar nos respectivos navegadores: FireFox, IE, Chrome e Safari.
Para fazer o efeito das duas imagens acima, efeito que transaforma uma imagem cinza em colorida e o contrário, basta utilizar o código abaixo.
Para o HTML:
Para o CSS:
#imgColorida{
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
transition: all 0.8s linear;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
}
#imgColorida:hover{
filter: none;
-webkit-filter: grayscale(0);
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
transition: all 0.8s linear;
}
#imgCinza{
filter: none;
-webkit-filter: grayscale(0);
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
transition: all 0.8s linear;
}
#imgCinza:hover{
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
transition: all 0.8s linear;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
Utilizei o efeito da propriedade transition para enfeitar um pouco, mas esta propriedade poderá não funcionar em algumas versões de navegadores! Em caso de dúvida deixa seu comentário!