31/03/2013

Tutorial - Efeito Yahoo


Yoo ~

Post programado. É possível que eu não entre no computador amanhã, bem, para não ficarem confusos, esto programando esta postagem no dia 30/03/2013, entenderam?. Programei porquê eu não teria tempo para postar. Estou super apressada. Bem, saindo do assunto de posts programados. . . O dia hoje foi bem melhor que eu imaginei. Achei que ia ser um dia muito ruim, mas, não. Hoje, notei que estudar não é tão ruim assim, criei o efeito mas lindo que já fiz e. . . é isso

Fiz um efeito mas bonito que o último que postei, o spinning. Este se chama Yahoo, não sei porquê nomeei desta forma. Sabem porquê ele é mais bonito?, porquê, desta vez, tem transição. Finalmente aprendi a fazer a transição. Demorou um pouco para cria-lo, mas vai compemssar, se vocês usarem ele. Live Preview aqui


Vá em modelo >> Editar HTML >> procure por ]]></b:skin> e acima da tag cole:



.Yahoo {
border: 3px solid #CORDABORDA;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(10px);
}
.Yahoo:hover{
transform: rotate(360deg) scale(1.246) skew(1deg) translate(-36px);
-webkit-transform: rotate(360deg) scale(1.246) skew(1deg) translate(-36px);
-moz-transform: rotate(360deg) scale(1.246) skew(1deg) translate(-36px);
-o-transform: rotate(360deg) scale(1.246) skew(1deg) translate(-36px);
-ms-transform: rotate(360deg) scale(1.246) skew(1deg) translate(-36px);
}

Está em negrito o que podem modificar.

Agora, crie um gadget de HTML/JavaScripty e cole o seguinte código:

<img src="URLDASUAIMAGEMAQUI" class="Yahoo" />

Se usarem ou reblogarem, cresitem

Dica da Débora: Para centralizar as imagens é só por um <center> antes de tudo. Para colocar mais de uma imagem é só repetir o código até obter o desejado. 

12 comentários:

  1. Nossa, muito fácil o tutorial e eu gostei muito do efeito, ultimamente estou procurando efeitos para o meu próximo lay rsrrsrs
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  2. LÁLÁLÁLÁ♪
    DEPOOOIS A PLAGIADORA SOU EU!! VC PLAGIOU O REINO DOS OTAKUS! KKKKKKKKKKK
    PROFISSA VC HEIN!

    ResponderExcluir
  3. Ja estou seguindo aqui,segue meus blogs? Eu gostaria de saber se você gostaria de se afiliar com o meu blog Love For Html ? Se sim avisa la ;) Link do blog para afiliação: http://loveforhtml.blogspot.com.br/ Link do blog que eu posto: http://cherryilustracoes.blogspot.com.br/

    ResponderExcluir
  4. Eu aceito, flor. E que eu estou viajando, estou logada pelo celular, deixa eu voltar, ta?

    ResponderExcluir

  5. oi flor adorei conhecer seu blog,estou a procura de postadoras a me ajudr no meu se estiver interessada me mande resposta,a estou seguindo seu cantinho,e segue tbm e gostaria de me afiliar aki pd ser,,,
    bjus
    Cute Girl Pink

    ResponderExcluir
    Respostas
    1. O que me falta é o tempo. Quantas vezes na semana tenho que postar?

      Excluir
    2. so 1 vez msmo flor...vc escolhe um dia da semana

      Excluir
    3. Querida, eu não posso entrar no pc diariamente :/
      Mesmo assim obrigada, amor, pela oportunidade :3

      Excluir



Por favor, não peça nada pelos comentários, para isso temos a nossa Ask.

Os comentários daqueles que não se indentificarem seram publicados, mas não serão respondidos.

A moderação de comentários está ativa, tome cuidado com o que fala!

Pedidos de afiliação só ná página de afiliados

Não respondo mais comentários do tipo "seguindo segue de volta?"

Nao tenha preguiça de comentar, comentar nã vai fazer seus dedos caírem.