6 de fev. de 2013

Descrição para autores - Hover Box



Boa noite! ^^

Só para avisar que a enquete do Blog x Blog está encerrada e posto os prêmios e o resultado amanhã, ok?
Achei um efeito muitoo legal no blog Space Tutorials. É a coisa mais perfeita de todaas! hehehe' Confira a prewiew clicando aqui. Demais, né?! Eu que dei o nome de Hover Box, pois achei meio sem graça o outro nome lá!! Vamos aprender?



Abra seu HTML, tecle F3 e procure por ]]></b:skin>. Após ter achado, copie e cole esse enorme código, acima da tag procurada:

/* --- Efeito ------------------------ */ .caixa-seven .efeito {background-color: rgba(168,196,196, 0.7); top: -300px; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-out 0.5s; -moz-transition: all 0.3s ease-out 0.5s; -o-transition: all 0.3s ease-out 0.5s; -ms-transition: all 0.3s ease-out 0.5s; transition: all 0.3s ease-out 0.5s;} .caixa-seven h1 { -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out 0.1s; -moz-transition: all 0.2s ease-in-out 0.1s; -o-transition: all 0.2s ease-in-out 0.1s; -ms-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s;} .caixa-seven .texto {color: #333; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out 0.2s; -moz-transition: all 0.2s ease-in-out 0.2s; -o-transition: all 0.2s ease-in-out 0.2s; -ms-transition: all 0.2s ease-in-out 0.2s; transition: all 0.2s ease-in-out 0.2s;} .caixa-seven a.info {-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out 0.3s; -moz-transition: all 0.2s ease-in-out 0.3s; -o-transition: all 0.2s ease-in-out 0.3s; -ms-transition: all 0.2s ease-in-out 0.3s; transition: all 0.2s ease-in-out 0.3s;} .caixa-seven:hover .efeito {-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.9s linear; -moz-animation: bounceY 0.9s linear; -ms-animation: bounceY 0.9s linear; animation: bounceY 0.9s linear;} .caixa-seven:hover h1 {-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s;} .caixa-seven:hover .texto { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s;} .caixa-seven:hover a.info {-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s;} @keyframes bounceY {0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}} @-moz-keyframes bounceY {0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}} @-webkit-keyframes bounceY {0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}}

Adicione um gadget HTML/JavaScript e nele cole isso:

<! --- Caixina Seven -------------------- > <div class="caixa caixa-seven"> <img src="URL-DA-SUA-IMAGEM" /> <div class="efeito"> <h1>Seu título</h1> <div class="texto">Seu texto</div> <a href="#" class="info">Seu link *opcional*</a> </div> </div>

Altere as partes destacadas em rosa e logo depois salve! (:

Até amanhã, gente!

11 comentários:

  1. ótimo tutorial, amei, lindo demais o efeito

    Adolescente Nerd

    ResponderExcluir
  2. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  3. amei o efeito vim avisar que seu blog foi avaliado la no Kt
    http://kawaii-little-things.blogspot.com.br/2013/02/avaliacao-de-blogs-parte-i.html

    ResponderExcluir
  4. Oieee flor **

    tem uns selinhos para seu blog, no meu blog ahauah'

    vai lá buscar

    http://forever-teens-89.blogspot.com.br/

    ResponderExcluir
  5. aai que legal ! eeu adorei tudo .
    Quero ver os prêmios .. e quem ganhou !
    Beijos, http://bhulago.blogspot.com.br/

    ResponderExcluir
  6. mds, que lindoooooooooo *OO*
    Tenho que usar isto concerteza, agr ver em que ><

    ~~> Mundo Png :3 Clica! <~~

    xoxo u3u

    ResponderExcluir
    Respostas
    1. Poois é!! *----*

      É, esse é o problema! Em qual lugar uso? shauhsau'

      Kissus

      Excluir

Heey!! Se quiserem deixar o seu comentário, leia PLEASE aqui embaixo:

*Não xingue ninguém aqui! Seja educada(o)!
* Dúvidas, elogios e críticas são sempre bem-vindas!
* Leia toda a postagem, pois sempre faço com muito esforço e carinho pra vocês!
*Vou até o perfil de vocês para visitar e talvez até seguir o seu blog!

Obrigada por comentar!

Volte Sempre!