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!
ótimo tutorial, amei, lindo demais o efeito
ResponderExcluirAdolescente Nerd
É lindo mesmo!!! hehehe'
ExcluirKissus :3
Este comentário foi removido por um administrador do blog.
ResponderExcluiramei o efeito vim avisar que seu blog foi avaliado la no Kt
ResponderExcluirhttp://kawaii-little-things.blogspot.com.br/2013/02/avaliacao-de-blogs-parte-i.html
Tambéém adoreei! (:
ExcluirAh já olhei, obrigada por avaliar!
Oieee flor **
ResponderExcluirtem uns selinhos para seu blog, no meu blog ahauah'
vai lá buscar
http://forever-teens-89.blogspot.com.br/
Oiie! Vou buscar siim, flor!! hehehe'
Excluiraai que legal ! eeu adorei tudo .
ResponderExcluirQuero ver os prêmios .. e quem ganhou !
Beijos, http://bhulago.blogspot.com.br/
shuashua' eu tambéém!
ExcluirVou postar hoje tudo! c:
mds, que lindoooooooooo *OO*
ResponderExcluirTenho que usar isto concerteza, agr ver em que ><
~~> Mundo Png :3 Clica! <~~
xoxo u3u
Poois é!! *----*
ExcluirÉ, esse é o problema! Em qual lugar uso? shauhsau'
Kissus