10/05/2013

TUTORIAL-efeito fall

A base dessa ilustração eu achei no WORLD OF TUTOS
Boa tarde galera,estou super atrasado para minha aula de inglês,então o post vai ser rápido!
Hoje me deu uma vontade louca de postar tutoriais,porque são super eficientes para criar layouts,e porque é muito bom ver a minha lista de tutorias toda completinha! *.*
O efeito que vou ensinar hoje é super fofo,vejam o preview aqui.
Se quiser aprender já sabe onde clicar!
1. Vá até modelo > Editar HTML e clique em qualquer lugar da caixinha com os códigos. Pressione ctrl + F e procure por  <head> que deve se encontrar mais ou menos na quarta linha. Abaixo dessa tag que você acabou de encontrar, cole o seguinte: 

<link href='http://static.tumblr.com/dlelfro/wZfml3zxq/fallingkw.css' media='screen' rel='stylesheet'/>

2. Agora vá descendo até encontrar a primeira setinha, onde tem <b:skin>...</b:skin>. Se preferir, use o ctrl + F e procure por ... e aí você irá achar a seta. Clique nela. Pressione ctrl + F e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte:

.efeitofall{
padding:2px;
border:1px solid #dcdbdb;
}
.efeitofall:hover{
-webkit-animation-name: fall;
-moz-animation-name: fall;
-o-animation-name: fall;
animation-name: fall;
-webkit-animation-duration: 1s;

}

3. Você já pode salvar. Para aplicar o efeitoe em alguma imagem, utilize o código abaixo dentro de um gadget de HTML/JavaScript. Serve para imagens e menus, faça um bom uso. Substitua as partes indicadas.

<a href="LINK""><img src="LINK DA SUA IMAGEM" class="efeitofall"/></a>
Gostaram? espero que sim!!

13 comentários:

  1. Já tinha visto no KW ele é bem útil acho que vou usa-lo agorinha mesmo
    [Me Adiciona ? - https://www.facebook.com/4Youtube ]

    ResponderExcluir
    Respostas
    1. O tutorial é mesmo ótimo!
      esqueci de por os créditos ao kw vishhh
      Aqui aparece que essa pagina esta indisponivel....

      Excluir
    2. S[o me procurar Luis Abreu Sondré Costa Real

      Excluir
  2. Como não tenho blog eu nem vou falar muito(milagre u.u).
    Etto....Boa Aula! o/

    ResponderExcluir
    Respostas
    1. hsuahsaushau já sai da aula,fiz o post as duas sai da aula as 3:30

      Excluir
  3. HSUAHSUASHAHA -SQN Eu estudo a manhã Que Sorte o/ Amei o efeito ;)

    Happy Birtdhay
    http://jeitodecriaanca.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. eu tbm estudo amanhã o meu inglesm é de aula particular!

      Excluir
  4. adorei o efeito !!

    Uaau, parabéns pelo seu blog, eu amei aqui, amei sua criatividade, seu modo de falar com os leitores, a forma que você usa nas postagens, o design e etc, eu realmente curti e vou voltar aqui sempre ! Obrigada por ter criado . Parabéns novamente e já estou seguindo ((: Parabéns !!
    http://dezesseteetantos.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. *.* MUITO OBRIGADO PELOS ELOGIOS!
      já vou ver o seu!

      Excluir
    2. u3u Leitora nova hein ? rsrsrs Tirei o boneco O-O

      Excluir
    3. Tem!!
      Mais tem que escrever o português com sentido e conseguir fazer as ilustrações de post!
      s estiver interessado é só falar!

      Excluir
    4. Claro que eu estou ツ

      Postagem nova ♀
      http://jeitodecriaanca.blogspot.com.br/

      Excluir