12/12/2012

Efeito - Image Rotation

Boa tarde galera ...
Bom , eu já estou aprontando o novo Layout aqui do Blog , as cores que eu escolhi estão cooperando para as ideias aparecerem , acho que eu vou coloca-lo só em fevereiro até por que eu perdi bastante tempo e paciência fazendo este do Ren , e como gostei bastante dele acho que seria um desperdício deixa-lo só um mês .Já fiz um banner para o novo layout só que ele é só base , então se tiverem sugestões para o tema do novo layout , podem dar . Estou aceitando sugestões .

Estava sem ideia do que postar *como sempre* , então procurei por um efeito legal para os moderadores do Blog (até por que é difícil achar um legal ) , ele é muito fofo , veja o efeito aqui  .Notaram que eu mudei o nosso laboratório ? Aquele tava muito pink e pobre , e como eu não gosto de rosa fiz algumas mudanças . Só foi para ficar mais agradável aos olhos .
Let's go ! ~

 #1 : Vá no seu HTML e procure ( F3 ou CTRL+F) por ]]></b:skin> .
#2 : Acima dele cole o seguinte code :

#circle {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);} 

#3 : Visualize e se estiver tudo certo , salve .
#4 : Adicione um novo Gadget HTML/Javascript e nele cole :

<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="LINK_IMG"></div>
</div>
Bom é isso , bem simples , fácil e rápido . Vamos as explicações :

Os width e height: você deverá mudá-los de acordo com o width e height da sua foto; 
O padding-top: também deverá ser mudado de acordo com o tamanho da sua foto. Para que fique centralizado, divida o height da sua foto por 2. 
A fonte: A fonte Pacifico não está junto com o código, ou seja, você terá que mudar a fonte. 


6 comentários:

  1. Je , vc pod postar uma Preview ? mas parece ser bem legal , e e bem simples !

    ResponderExcluir
  2. AAAwn que lindo! vou usar no proxiimo lay que estou fazendo!

    kawaii-little-things.blogspot.com.br

    Posso por voces na elite? :s

    ResponderExcluir

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .