• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

21 de janeiro de 2013

Efeito Autoras Rotation

Tumblr_mf79f2nupw1rb8iz4o1_500_large
Olá gente trouxe um efeito muito legal que achei nesse tumblr.
Pois bem, acho melhor postar logo pois vou ter que lavar louça depois, então vamos aprender?
PS.: Os códigos são do tumblr, fiz minhas modificações.
Cole acima de ]]></b:skin>

#circle {position:fixed !important; width:160px; background:white; height:160px; padding:5px; text-align:center; line-height:8px; z-index:999; border-radius:9999999px; border:1px solid #fcfafa; transition: all 0.7s ease-out; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

#circle:hover{opacity:1; -moz-transform: rotate(-180deg);  -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);}
#circlepic{opacity:.85; border-radius:9999999px; width:160px; transition: all 0.7s ease-out; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}
#circlepic img{width:160px; height:160px;border-radius:9999999px;}
#circle:hover #circlepic {opacity:0.1;}
#cinside {opacity:0; z-index:1; position:fixed; width:160px; height:100px;padding-top:60px;line-height:10px;}
#cinside ctitulo {font: 18px Pacifico; color: #A42423; text-align:center; display: block; padding: 5px; text-shadow: 0px 1px 1px #eae7e7; text-transform: Lowercase; background: #fff;}
#cinside cdesc {font: 10px Tahoma; color: #A42423; text-align:center; padding: 5px; text-shadow: 0px 1px 1px #f0f0f0; text-transform: Lowercase; display: block;}
#circle:hover #cinside {opacity:1;-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-webkit-transform: rotate(180deg);}

Depois, cole isso em um Html/Javascript:


<div id="circle">
<center><div id="cinside">
<ctitulo>Titulo</ctitulo>
<cdesc>descrição aqui e blá blá blá... isso é só um exemplo, rsrs.</cdesc>
</div>
<div id="circlepic"><img src="http://static.tumblr.com/o286adx/eINmeve6a/exemplo1.png"></div>
</div>

Espero que tenham gostado :)

13 comentários:

  1. Nháá que tutop perfect..
    Gostei muito desse efeito.
    Tálves eu coloque no meu blog rsrs'
    Kisses!!!

    docemundokawaii.blogspot.com.br/
    cristaistutorial.blogspot.com

    ResponderExcluir
  2. Valeu estava procurando esse tutorial já faz eu tempo mais não tinha achado. ^^

    adolescentelouco-lol.blogspot.com

    ResponderExcluir
  3. Parece ser muito bom esse tuto :)

    Blog novo~
    http://stephane-andrade.blogspot.com.br/

    ResponderExcluir
  4. achei mt fofooo e ñ iria combinar com meu blog, atualizei lá no blog, tem look espero que vc goste!! http://www.meninascapricho-dada.blogspot.com.br/2013/01/look-do-dia-vestido.html

    ResponderExcluir
  5. Nossa, super lindo o efeito, amei! E meu Deus, que blog mais lindo é esse? Sério, o layout daqui é de babar *---*
    Beijocas!

    PiinkCookie.blogspot.com

    ResponderExcluir
  6. OMG que tuto lindo e que simples *O* adorei ele!

    jovenclube(.blogspot.com.br)

    ResponderExcluir