26 de setembro de 2013

Tutorial: Efeito nas imagens do blog

Olá pessoal, trouxe mais efeitos para as imagens. Hoje vou postar 3 efeitos fofos:
fade, blur e preto e branco

Primeiro efeito- Efeito Fade

Coloque o código abaixo antes da tag ]]></b:skin>

.main img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
-webkit-transition-duration: .50s;
}
.main img:hover {
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
-webkit-transition-duration: .50s;
}

segundo efeito- Efeito Blur

Coloque o código abaixo antes da tag ]]></b:skin>

.main img {
-webkit-transition-duration: .99s;
-moz-transition-duration: .99s;}
-webkit-filter: blur(2px); -moz-filter: blur(2px);
-o-filter: blur(2px); -ms-filter: blur(2px);
}

Terceiro efeito- Efeito Preto e Branco

Coloque o código abaixo antes da tag ]]></b:skin>

.post img {
-webkit-filter: saturate(100%) ;
-webkit-transition-duration: .90s;
}
.post img:hover {
-webkit-filter: saturate(0%) ;
-webkit-transition-duration: .90s;

 Não altere os valores, ok?. 
Bem, é isso pessoal, até a próxima.

Kissus

Nenhum comentário:

Postar um comentário

- Este espaço é todo seu. Tire suas dúvidas!

- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.

- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.

- Leio todos os comentários e retribuo todos.

-Thanks