Efeitos animados CSS #2 -Preto e branco para colorido

Continuando com a série de efeitos CSS, segue mais um efeito que eu uso aqui no blog. É o efeito que faz os elementos(imagens, por exemplo) ficarem em preto e branco e opaco e quando o mouse passar em cima eles se colorem. Veja um exemplo aqui em cima na área dos tutoriais!

Por enquanto, o Firefox e o IE não suportam essa propriedade do WebKit, mas o Chrome e o Safari sim!

1 - Criar os elementos - HTML

Primeiramente, precisamos criar o elemento em que o efeito será aplicado. Recomendo que seja uma imagem que tenha cor. O importante é que você tenha como referenciá-los no CSS, ou seja, que eles tenham um id, class, ou elemento pai...

2 - Código CSS

img {
/*opacidade*/
opacity:0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
-webkit-filter: opacity(0.75);
/*filtro P/B*/ 
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
/*qualidade*/
image-rendering: auto;
}
img:hover {
opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);
-webkit-filter: opacity(1);
filter: none; /* Firefox 10+ */
-webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
image-rendering: auto;
}

Você pode aplicar o efeito em outros eventos também, não necessariamente no :hover.

É isso ai! Espero que tenham gostado! Fiquem ligados na série que ainda tem bastante coisa por vim! Valeu!

Compartilhe essa postagem!