04/07/2013

Efeito rotate surprise


Bom dia, leitores.

Sim, eu resolvi aparecer mais cedo por aqui, pois não vai ser possível que eu entre no período da tarde, embora eu esteja no período de recesso escolar ainda tenho que ao meu inglês. Enfim, queria aproveitar o momento e agradecer também pelos 81 seguidores, estamos cada vez mais perto da meta dos 100. Mas vamos ao assunto do post, como vocês sabem eu estou muito no tédio e sem nada de bom para falar.

Como vocês sabem eu ainda sou iniciante em html e css, mas eu tentei e consegui fazer meu primeiro efeito, ele é um simples efeito que faz a imagem girar em 360º com um charme que fica por conta das bordas, você  podem conferir o efeito aqui. Tentei dar uma cara nova ao que muita gente já fazia sempre do mesmo jeito e tenho que admitir que isso já estava me deixando aborrecida, então eu pensei por que não reinventar?
--------------------------------------------------------------------

1. Cole este código acima de ]]></b:skin> :
.rotate {
width:30px;
height:30px;
background:red;
transition:width 0.5s, height 0.5s;
-webkit-transition:width 0.5s, height 0.5s, -webkit-transform 0.5s;
border-radius: 4px 8px;
webkit-border-radius: 4px 8px;
moz-border-radius: 4px 8px;
border: 1px solid #000;
}
.rotate:hover {
transform:rotate(360eg);
-webkit-transform:rotate(360deg);
border-radius: 0px;
webkit-border-radius: 0px;
moz-border-radius: 0px;
outline-style:dashed;
outline-width:2px;
outline-color: #fff;
outline-offset: -4px;
}

2. Adicione um gadget HTML/Javascript e cole o código:
<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>
<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>
<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>
<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>
<a href="link" title="nome"><img src="Urldaimagem" class="rotate" /></a>

Basta substituir as partes indicadas e pronto.

24 comentários:

  1. Adorei esse efeito, muito fofinho. Adorei também um efeito que tem acima desse no like preview, espero que poste ele em breve :D
    Kiss
    with-you-s2.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigaada~
      Pode deixar postarei ele em breve.

      Excluir
  2. Gostei do tuto *-*
    Muito bunitinho o efeito *-*
    Então fofa,eu queria saber se vocÊ aceita
    afiliação??Espero a resposta no meu blog ta?
    http://back-wash.blogspot.com.br/

    ResponderExcluir
  3. ótimas dicas, o layout daqui é lindo
    Beijos, Carol ♥
    nove-e-dezesseis.blogspot.com.br

    ResponderExcluir
  4. Que lindooo, adorei esse efeito
    Bjs
    Seguindo akii
    http://cupcakevirtual2012.blogspot.com.br/

    ResponderExcluir
  5. Adoro esse efeito!! fica tão legal
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  6. Muito fofo o efeito. Quem sabe no próximo layout eu não use? Seguindo, retribue?

    http://summerdifferente.blogspot.com.br/

    ResponderExcluir
  7. Awn, que lindo! Awn, você faz cada coisa legal mesmo sendo iniciante em html, eu também sou e não faço metade disso aí kkkk. Beeeijos!

    Rediscovering Dreams

    ResponderExcluir
  8. Adorei o efeito *O* Fica bem bonito

    Kissus
    Mar de Glitter

    ResponderExcluir
  9. Amei o efeito *--* É tão lindo >.<
    Kisses ~Amanda
    coff-cake.blogspot.com

    ResponderExcluir
  10. Que lindo *u* nunca vi um assim, acho que eu vou usar..
    http://welcome-to-kawaii-land.blogspot.com.br/

    ResponderExcluir

- Não estou aceitando tags ou selinhos.
- Use os comentários ou a ask para fazer requests.
- Respondo todos os comentários e retribuo na maioria das vezes.
- "Seguindo! Segue de volta?" Depende, se você já tiver seguido realmente e eu gostar do seu blog.