14.11.12

Efeito Turn



Boa tarde gente!

Hoje trouxe mais um efeito. Vocês já devem estar se cansando de tantos efeitos, né? Mas esse é diferente!! Pois ele foi feito totalmente por mim. Estou muito feliz, pois finalmente estou conseguindo mexer bem em HTML e fazer meus próprios códigos! O efeito não é grande coisa, mas fiz com muito carinho para vocês. Fiquei ontem a tarde quase que toda aprendendo como se faz, e, a noite, finalmente consegui fazer ele.




Vá no seu HTML e procure por  ]]></b:skin> Acima dessa tag coloque:

.efeito{
align: center;
width: 225px;/* largura da imagem*/
height: 250px; /* altura da imagem*/
overflow: hidden;
}
.efeito img{
background: #fff;
width: 225px; /* largura da imagem*/
height: 250px; /* altura da imagem*/
align: center;
}
.efeito:hover img{
opacity: 0.5;
-webkit-transition-duration: 1.30s;
}
.efeito .descrip {
width: 100px; /* largura da imagem -25px */
height: 125px;/* altura da imagem -25px */
margin-top:-680px;
margin-left:0px;
background:rgba(255,255,255,0.5); /*cor e opacidade do fundo*/
color: rgba(0,0,0,0.7);
text-shadow: 0px 0px 4px #323232;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
border: 4px solid #FFf; /*cor da borda*/
}
.efeito:hover .descrip {
-webkit-transform: rotateY(-720deg);
width: 207px;/* largura do quadrado branco*/
height: 234px; /*altura do quadrado branco*/
margin-left: 5px;/*posição do quadrado branco*/
margin-bottom:-5px;/*posição do quadrado branco*/
margin-top:-251px; /*posição do quadrado branco*/
}



Está tudo explicado entre /* e */

Depois, crie um gadget de HTML/javascript e cole:


<div class="efeito"><img src="http://24.media.tumblr.com/tumblr_m2jvvg8h5g1r9uve2o2_250.png"><div class="descrip"><br/><br/>Escreva algo aqui. Escreva algo aquiEscreva algo aqui. Escreva algo aquiEscreva algo aqui. Escreva algo aqui. Escreva algo aqui</div></div>

O que eu negritei é onde você deve alterar. O primeiro é o link da imagem, e o segundo é o texto que vai aparecer. Depois salve e pronto!

14 comentários:

  1. Que efeito perfeito *-* Vou utilizar
    Cat Girl

    ResponderExcluir
  2. OMG! Que lindo, acho que usar. Muito perfeito ^^

    Xoxo, Melissa :*
    doucelamour-oficial.blogspot.com.br

    ResponderExcluir
  3. Ótimo tutu. Tá tudo bem explicadinho :)

    A Little More Than Gloss (clica no perfil)

    bjs !!

    ResponderExcluir
  4. Nossa, que lindo!
    Eu não consigo fazer nada assim ;c
    Ficou show, mesmo, parabéns! ^^

    ResponderExcluir
  5. Que PERFEITO! Ficou maravilhoso Barbs *---*
    Adorei :D
    Beijos
    ill-helpyou.blogspot.com

    ResponderExcluir
  6. Muito legal esse efeito ! Ficou muito bom flor.

    Bezoos
    Fanny Dream

    ResponderExcluir
  7. Ammeiii, fica perfeito, sério!!

    Cliquesnocapricho.blogspot.com

    ResponderExcluir
  8. Adorei o tutorial, eu só não uso pq tenho medo em mecher em Html, sempre não da certo ' kaskask', Seguindo aqui, se puder seg tbm ? (:

    inspirando-ideias.blogspot.com.br

    ResponderExcluir
  9. Eu vou usar! Achei lindo demais!

    HistoriaAgridoce.blogspot | Acesse baby!

    ResponderExcluir
  10. o efeito é muito bonito. Nada melhor do que sentir orgulho!
    querosabertudo-k.blogspot.com

    ResponderExcluir
  11. gostei do efeito, bem diferente mesmo, parabéns! :))

    bjossss

    queridanostalgia.blogspot.com

    ResponderExcluir
  12. Ficou perfeito flor, simples nada rçrç perfeito msm !
    - Beijos.

    http://oseumundomaisfashion.blogspot.com.br/

    ResponderExcluir