Tutorial-Efeito Down(Exclusivo!)

          
                                                             Boa Noite Little Rains!
Não era pra eu estar postando hoje,porque eu só costumo postar quando a postagem alcança os 32 comentários,e a postagem anterior só alcançou 28,mas fiquei com vontade de postar,então aqui estou eu!Hoje não tenho muito oque falar na introdução,portanto irei enrolar até completar todas as linhas,para a postagem ficar bem bonitinha e organizada do jeitinho que eu gosto.Sabe,é legal quando você entra em um blog e ele é todo organizado desde o layout até as postagens,dá um ar de conforto maior,sabe?

Sei que já postei goodies,mas fiz esse efeito e não resisti,então aqui estou eu postando ele.Na postagem de hoje,eu ensinarei a vocês como colocar um efeitinho super fofo no blog,que eu inventei.O nome do efeito,não tem nada a ver com ele,porque o efeito não caí,ele vira de cabeça para baixo e dá tipo uma viradinha para o lado.Eu nunca vi nada parecido na blogosfera,então resolvi postar ele para vocês.De agora em diante,postarei bastante efeitos aqui no blog.(Acho que usei muitas vírgulas nessa postagem)Curiosos?
                                                             Preview do efeito

1-Vá em modelo >> Editar HTML >> Aperte CTRL+F e procure por ]]></b:skin>

2-Acima de ]]></b:skin> cole o seguinte código,e não edite nada!
 .Down {
    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    transform: rotate(360deg) scale(1) skew(13deg) translate(-1px);
    -webkit-transform: rotate(360deg) scale(1) skew(13deg) translate(-1px);
    -moz-transform: rotate(360deg) scale(1) skew(13deg) translate(-1px);
    -o-transform: rotate(360deg) scale(1) skew(13deg) translate(-1px);
    -ms-transform: rotate(360deg) scale(1) skew(13deg) translate(-1px);
    }
    .Down:hover{
    transform: rotate(360deg) scale(1) skew(-8deg) translate(-1px);
    -webkit-transform: rotate(360deg) scale(1) skew(-8deg) translate(-1px);
    -moz-transform: rotate(360deg) scale(1) skew(-8deg) translate(-1px);
    -o-transform: rotate(360deg) scale(1) skew(-8deg) translate(-1px);
    -ms-transform: rotate(360deg) scale(1) skew(-8deg) translate(-1px);
transform: rotate(183deg) scale(0.907) skew(-1deg) translate(-1px);

    }

3-Salve tudo bonitinho e depois vá em layout >> Adicionar um Gadget >> HTML/JavaScript e cole:
<img src="LINK DA SUA IMAGEM" class="Down" />

4-Edite as partes sublinhadas e pronto!

Gostaria de agradecer ao blog Upsides Down por ter me ajudado a criar meu próprio efeito!

14 comentários

  1. Que simples 'u' Porém não deixa a desejar ♥ Adorei!

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Awn que bom que gostou *u* realmente é bem simples mas dá para usar em qualquer tipo de layout que queira um detalhe a mais

      Excluir
  2. Que efeito fofo!
    http://mygoodies1.blogspot.com.br/

    ResponderExcluir
  3. Gostei do efeito, talvez eu o use

    Beijos com carinho, Yoshie | -HTML Sound | Visita?

    ResponderExcluir
  4. Muito lindo o efeito U-U
    Talvez eu use u3u -qq

    Beijos ;3 |SW ~Aguardo sua visita

    ResponderExcluir
  5. Muito legal adorei o tuto.
    Por que me tirou dos afiliados?
    http://cherrykawaii-14.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom ^^
      Pq vc estava muito ausente no blog e seu blog estava mt desatualizado,ai não achei justo com quem queria se afiiliar

      Excluir
  6. Verdade, é sempre bom entrar em um blog organizado.
    Amei o efeito, bem simples, mas perfeito ♥
    Beijos ~


    winter--html.blogspot.com

    ResponderExcluir
    Respostas
    1. E é mesmo *3*
      Que bom que gostou :33333

      Excluir

Olá! Obrigada por acessar o September Rains, fico feliz em ver que quer deixar um comentário, só peço que:
-Não use palavrões e palavras baixas,
-Não arrume briga com outros usuários,
-Se for para fazer uma crítica, que você seja gentil e que ela seja construtiva,
-Leia o post antes de comentar, ok?
Seguiu todas as regras? Ótimo! Agora pode comentar! Não se esqueça de deixar o link do seu blog, para que eu possa visitá-lo depois.