13.12.12

Efeito Rotate




Boa tarde gente!

Nãos sei se é só comigo, mas esse caloooooooor e esse tédio estão me matando... ODEIO ficar sem nada para fazer, parece que o tempo não passa. Bom, agora eu passarei a postar mais, fazendo no mínimo 2 postagens por dia. Não vejo mal com isso, o que vai acontecer é que vocês terão mais tutoriais e utilitários. Passei um bom tempo pensando se isso seria ruim ou bom, e cheguei à conclusão que não há ponto negativo, vocês serão mais beneficiados. Antes, normalmente, eu postava de dia em dia, e mesmo assim esperava atingir um certo número de comentários, mas agora vou mudar isso, as postagens serão mais frequentes com no mínimo 2 por dia.

Enfim, trouxe para vocês o outro efeito do qual havia falado do post do Efeito Crossed. Ele é mais simplesinho, mas quando eu tentei "incrementar" e deixar ele mais bonitinho com mais coisas  deu erro e as imagens sumiram kkk Não sei o que fiz, só sei que foi melhor deixar do jeito que estava. Assim, trouxe ele para vocês!




No seu HTML procure por ]]></b:skin> e acima dessa tag cole:


.rotate{
z-index: 1;
display: inline-block;
position: relative;
width: 110px; /* largura*/
height: 110px;/* altura */
text-align: center;
overflow: hidden;
border-radius:100px; /* borda redonda, se não quiser, apague isso*/
}
.rotate img {
z-index: 1;
width: 110px;/* largura*/
height: 110px;/* altura*/
border-radius: 100px;/ * borda redonda, se não quiser, apague isso*/
align: left;
}
.rotate .description{
z-index:3;
position: absolute;
border-radius: 100px; / * borda redonda da parte branca, se não quiser, apague isso*/
width: 1px;
height: 1px;
margin-top:-55px;/* metade da altura*/
margin-left: 55px;/* metade da largura*/
background: rgba(255,255,255,0.5);  /* cor do fundo*/
color: #000; /*cor da letra*/
text-shadow: 1px 1px 1px #303857; /*sombra da letra*/
opacity: 0.0;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out
}
.rotate:hover .description  {
-webkit-transform: rotate(360deg);
opacity: 1.0;
width: 106px; /* largura da parte branca*/
height: 106px;/* altura da parte branca*/
margin-top:-114px; /*altura mais 4 px*/
margin-left:1px;
border: 2px solid; /*tamanho da borda*/
border-color: #fff; /*cor da borda*/
}

Está tudo explicado entre /* e */. Depois adicione um gadget de HTML/Javascript e cole:

<div class="rotate"><img src="http://4.bp.blogspot.com/-a40EGb6ics4/UMTQBRGVeAI/AAAAAAAAEq0/nxfYJ35cB5U/s1600/zzzzzzzzzzzzz.png" /><div class="description"><br/>Algo aqui</div></div>

O que está em negrito é a URL da imagem, e o sublinhado é o que fica escrito.

Espero que tenham gostado =^.^= Beijos

9 comentários:

  1. Eu amo esse efeito,vou usar no meu layout 2013, eu tbm odeioo ficar sem nada pra fazer!!
    Jah estou participandoo --> http://a-penas-ana.blogspot.com.br/2012/11/campanha-de-natal-faca-uma-blogueiroa.html

    Meu blog: rascunhosdecaneta.blogspot.com

    ResponderExcluir
  2. adorei o blog estou seguindo segue o meu?
    http://princesacomcoleteoficial.blogspot.com.br/

    ResponderExcluir
  3. Bem legal! Gostei.
    Bjus!

    coisasdemeninamodernabydani.blogspot.com.br

    ResponderExcluir
  4. Que massa o efeito! Queria conseguir fazendo efeitos assim u-u.

    Explosion Of HTML | Clique no perfil e visite :3

    ResponderExcluir
  5. Que lindo fica com esse efeitoo!

    http://manguitarosa.blogspot.com.br/

    beijooos

    ResponderExcluir
  6. Lindo, o efeito fica lindo :3
    Amor, tu tem tempo de postar em outro blog ? E que sabe, que to querendo te convidar pra postar la no Douce L'amour ...

    Xoxo, Melissa :*

    ResponderExcluir
  7. Super bacana vou usar qnd entrar alguém para equipe do blog!Seguindo...

    http://cantinhodostutus.blogspot.com.br/

    ResponderExcluir
  8. Muito lindo, ainda mas se for usar em autores (:

    ~~> Plush Clouds <~~ (novo layout, confira)

    ResponderExcluir