Tutorial - Efeito TSD rsrs'


Hey! Yoo~

Trouxe para vocês o efeito que estou usando ali na sidebar, no gadget de "Welcome". Eu peguei um código de Efeito Gota, em um blog e queria muito que fosse do lado contrario. Atrapalhei todo o código e deu esse que estou usando na sidebar. Depois, modifiquei mais ainda o código, para invertê-lo, e finalmente consegui!     
Agora, para não perder todo o trabalho que eu tive, vou trazer o efeito pra vocês. Ele é facinho de fazer, e, se você quiser o efeito igual o meu, são dois códigos diferentes, ok?
Ele é super simples, não é? Então vamos ao tutorial?
Visualize o efeito: clique aqui.
Elas estão numeras para entender melhor. Vou passar o mesmo código: com 01 e 02, para ficar mais fácil de entender. Não se incomode pelas imagens, não consegui fazer elas melhores do que isso. :/
Mas vamos parar de enrolação e ir ao tutorial?

Para começar, abra o HTML e procure por: ]]
Acima dessa tag cole:
.tsd01 { border-radius: 10px; -webkit-transition-duration: .80s; } 
.tsd01:hover { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;  border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-bottomright: 120px; -webkit-border-bottom-right-radius: 120px; border-bottom-right-radius: 120px; -webkit-transition-duration: .80s; }
.tsd02 { border-radius: 10px; -webkit-transition-duration: .80s; } 
.tsd02:hover { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;  border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-bottomleft: 120px; -webkit-border-bottom-left-radius: 120px; border-bottom-left-radius: 120px; -webkit-transition-duration: .80s; }
 Se quiser realmente igual ao meu, não modifique nada. Eu destaquei as tags. Se quiser só uma, pegue a com o número correspondente. Mas não altere nada! Pode dar até bug no código.
Visualize e se tiver tudo nos conformes, salve.
Agora, vá em Layout e abra um gadget de HTML/Javascript. Nele cole o código correspondente ao seu HTML:
<img class="tsd01" src="http://i.imgur.com/EdXXtT8.png" /><img class="tsd02" src="http://i.imgur.com/botfJgz.png"/>
Nesse eu destaquei em negrito, a URL das imagens, que você vai ter que mudar. E em sublinhado, as partes  que você vai identificar. Salve e visualize para ver se tudo deu certo.
Espero que tenham gostado.
Beijos, 어록 ♥.

6 comentários:

  1. Legal esse efeito!

    Tá rolando concurso lá no meu blog. Participa?

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
  2. Que legal o efeito, bem bacana. Nunca vi em nenhum outro blog, então... achei bem original!

    O blog chegou aos 500 seguidores e você ajudou com que ele chegasse nesta meta. Obrigada!
    Até, chassy-bomb.blogspot.com.

    ResponderExcluir
    Respostas
    1. rsrs' Teve muito bug até chegar nesse aí. Não foi nada flor. Seu blog merece :)

      Excluir
  3. Legal peguei a imagem para perfil!!

    ResponderExcluir