Efeitos Wow e Flipping

13 junho 2013
   

Oi!Tudo bom?
Hoje irei ensinar com deixar as imagens como as daqui dos blogs amigos .
Na verdade são 2 efeitos,  é bem fácil de fazer , eu aprendi no Kawaii World.
O primeiro é o Efeito Wow e o segundo o Flipping . Vamos lá?

Efeito Wow

Vá em Modelo>Editar HTML >Ctrl+F ou F3 e procure por :

<head>
E ACIMA dele cole esse código:
<link href='http://static.tumblr.com/dlelfro/M7Rmibw12/efeitowowkw2.css' media='screen' rel='stylesheet'/>
Agora pesquise por:



]]></b:skin>
E ACIMA dele cole :



.efeitowow{
}
.efeitowow:hover{
-webkit-animation-name: wow;
    -moz-animation-name: wow;
    -o-animation-name: wow;
    animation-name: wow;
-webkit-animation-duration: 1s;
 }
Salve!E quando for usar vá no HTML/JavaScript e cole :

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="efeitowow" /></a>
E lógico substitua oque pede :D

 Efeito Flipping 


Vá em Modelo>Editar HTML >Ctrl+F ou F3 e procure por :

<head>
E acima cole :
<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>
Agora procure por:
]]></b:skin>
E ACIMA cole:


.efeitoflipping{
padding: 3px; /*Distância de um pro outro*/ 
}
.efeitoflipping:hover{
-webkit-backface-visibility: visible !important;
 -webkit-animation-name: flipping;
 -moz-backface-visibility: visible !important;
 -moz-animation-name: flipping;
 -o-backface-visibility: visible !important;
 -o-animation-name: flippink;
 backface-visibility: visible !important;
 animation-name: flipping;
-webkit-animation-duration: 1s;
 }
Salve! E quando usar você vai no HTML/JavaScript e cole substituindo oque pede :

<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="efeitoflipping"/></a>
Aqui é onde eu peguei as imagens Caramelos Encantados

Espero ter ajudado !
Kissus
Comentários
5 Comentários

5 comentários:

  1. Bem legal ^○^ esses efeitos devem ficar lindos *_______* beijos :3

    photoscapeevc.blogspot.com

    ResponderExcluir
  2. Olá.. muito legal.. adorei seu blog! Seguindo.. por favor se puder segue o meu também e visitem por favor: http://worldteenbra.blogspot.com.br/ OBRIGADO!

    ResponderExcluir
  3. Nossa, ameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeei
    Beijos
    Seguindo akii
    http://cupcakevirtual2012.blogspot.com.br/

    ResponderExcluir
  4. Já conhecia os dois efeitooos \oo/ adoro eles são super fofos



    /seguindo


    http://forever-teens-89.blogspot.com.br/

    ResponderExcluir
  5. Olá tudo bem com você? gostei do post, dá uma passadinha lá tem um post de uma receita de bolo de brigadeiro lá bjos

    http://birthdaykawaii.blogspot.com.br/

    ResponderExcluir

© Dilemas Indies - 2014. Todos os direitos reservados - Criado por: Bárbara Nascimento - Tecnologia do Blogger. imagem-logo