Tutorial - Efeito Flipping


Yoo/
Oi lindinhas, esse é um post programado pois como já sabem estou sem net, então resolvi fazer isso :3 hoje eu vim ensinar a vocês o efeito flipping, é o efeito que está nos meu afiliados e se quiserem  aqui vai a preview. É um tutorial de nível fácil. E os créditos vão ao Kawaii World pois esse efeito eu peguei de lá :3. Vamos para o tuto meninas? Let's Go!

1. Vá em editar HTML de um ctrl f e procure por <head>, ACIMA deste código cole:

<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>
2. Agora procure por ]]></b:skin> e cole acima dele:
.efeitoflipping{
padding: 3px;
}
.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;
 }

3. E por último cole em uma gadget HTML/JavaScript o seguinte código:
<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="efeitoflipping"/></a> 

Fácil não é meninas? Espero que tenham gostado e se usarem deem os créditos.

17 comentários:

  1. É muito legal o efeito ^^

    ~ Beijos (^_^)/~~
    http://another--time.blogspot.com.br/

    ResponderExcluir
  2. Adorei por essa dica Flor , mais pra frente vou colocar no meu Blog !!!

    ResponderExcluir
  3. que layout lindo!! você tá ficando muito boa hein*
    http://designer-4ever.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn brigada seu lindo, mais nao teria consigo sem a ajuda do seu blog >.< brigada mesmo poor ter me ajudado guri :3

      Excluir
  4. Nossa Adorei o Efeito é muito bacana!
    Adorei o seu blog, super cute!!!

    http://vamos-caprichar.blogspot.com.br/

    ResponderExcluir
  5. Lindo o efeito, amei, ainda não tinha visto

    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Que bom que gostou sua linda ^^)

      Excluir
    2. ^_^ acho que usarei no novo layout do A.N >.<


      [Adolescente NerdUm Ano de Blog!]

      Excluir
    3. Acho que será um dos efeitos que usarei no próximo layout >.<

      [Adolescente NerdUm Ano de Blog!]

      Excluir
    4. Awnn fico feliz sua linda >..<

      Excluir
  6. Adorei o efeito <3

    kisses ~

    >> http://goodiesmaster.blogspot.com.br/

    ResponderExcluir
  7. Efeito perfeito, flor! Amei!
    Tem um selinho no blog pra você.
    Beijoos!
    sensatasonhadora.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou sua linda ^^
      Brigadinha sua linda Vou responde-lo agora mesmo flor >..<

      Excluir

- Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Não aceito tags nem selinhos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo todos os comentários.