Efeito nas imagens

10.8.12 | | |
yoo~
Antes de tudo quero dizer para esquecerem o calendario, nao ta dando certo! algumas coisas vao continuar no mesmo dia, tipo as tags, quadros e games. mais o resto, vai ser livre.E sim, sou confusa de mais! HSUAHSUA Talvez, na segunda que vem eu traga mais um layout free, só que dessa vez um pouco mais neutro, sem nada de anime, para aqueles que nao curtem muito esses estilo. Eu ja começei, e achei que ele esta ficando muito fofinho! Mais enfim, hoje eu vou mostrar pra vocês 3 tipos de efeito para as imagens, que eu adaptei de um tumblr. vamos ver?
Se você quiser em todas as imagens do blog:
Va em seu HTML ~> procure por ]]></b:skin> e acima da tag cole o codigo do efeito desejado. 
Se você quiser apenas em um local
Subistitua os dois "main img" do codigo desejado pelo nome do efeito, e aplique assim no lugar onde deseja:
<img src="LINK DA IMAGEM" class="NOME DO EFEITO" />
PASSE O MOUSE NA IMAGEM PARA VER O RESULTADO DO EFEITO
 
.main img{-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);} .main img:hover{filter: none; -webkit-filter: blur(0px);-moz-filter: blur(0px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
 
.main img {-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);filter: url(desaturate.svg#greyscale);filter: gray; filter: grayscale(100%);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .main img:hover {-webkit-filter: grayscale(0);-webkit-filter: grayscale(0); -moz-filter: grayscale(0);filter: none; filter: grayscale(0);}
.main img{filter: sepia(100%);-webkit-filter: sepia(100%); -moz-filter: sepia(100%);-webkit-filter(1);-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;} .main img:hover{filter: sepia(0%);-webkit-filter: sepia(0%); -moz-filter: sepia(0%);-webkit-filter(0);}
Se usarem credite, e nao repasse! beijos ;* 

2 comentários:

  1. Eu já usei o preto mas em todas as imagens do blog, não combinou daí eu tirei, mas depedendo do layout fica muito lindo o preto e o sépia. Também já usei o blur, mas nem combinou TAMBÉM -q
    rsrs
    Beijos ♥
    THINGS FOR HTML

    ResponderExcluir
  2. Adorei os tutoriais, estava realmente procurando como faz isso.

    blog-onedream .blogspot .com

    ResponderExcluir

Por favor, mande apenas seu comentário SOBRE O POST e o link. se alguem pedir tipo assim : "nunca teria coragem.Agora vou te convidar a conhecer meu blog, eu ja estou seguindo se puder retribuir rs linkdoblog.com " ISSO ME IRRITA MUITO CARA! por isso eu nem visito. eu retribuo todas as visitas, apenas deixe o link por favor! obg