14 de out. de 2012

Imagem com efeito arco-iris


Hoii! Hoje vou ensinar um efeito legal e que ainda não é muito usado na blogosfera. É o efeito arco-iris nas imagens. A maioria das pessoas usam o efeito opacidade, então é bom variar um pouco e usar algo diferente, concordam? 



Efeito arco-iris na elite de afiliados:


Vá no HTML do seu blog, aperte CTRL+F e procure por:

]]></b:skin>
Acima disso, cole:

 .arcoiris {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);
}
Sempre que quiser usar o efeito, use o seguinte código:

 <a href="LINK DO BLOG" title=' TITULO DO BLOG ' ><img src="LINK DA IMAGEM" class="arcoiris" /></a>

Efeito arco-iris em todas as imagens do blog


Vá no seu HTML, aperte CTRL+F e procure por:


/* Posts--------------------
 ABAIXO disso, cole:


post img {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);}

Visualize, se estiver tudo certo, salve.
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar

Um comentário:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!