18 dezembro 2012

Efeito Css3 - Sipt


Olá Galerinha, olha eu aqui de novo.
Dessa vez trouxe um tutorial bem legal, e é útil para ser usado no gadget Equipe.
Usei a base do efeito Four Sides do Great Help e criei ele.

Visualizem aqui.

Agora procure por ]]></b:skin>
E acima dela cole o seguinte código, alterando os lugares marcados.

#spit{
display: inline-block;
margin-left: 15px;
background-image: url('http://static.tumblr.com/sxeyvs3/7F5mf87po/1.png'),  url('http://static.tumblr.com/sxeyvs3/34bmf87q1/2.png'), url('http://25.media.tumblr.com/fdf4a1e6de6ad20af51276ce03f82019/tumblr_mf53u8DPTn1rxdy7io1_250.png');
background-repeat: no-repeat; background-position: 0px; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;
background-position: -100px 0px, 100px 0px, 0px 0px;
}
#spit:hover {background-position: -100px 200px, 100px -200px, 0px 0px;
-webkit-transform: rotate(360deg);
}
.hover{border-radius: 100px;height: 200px; width: 200px;}

Agora para você poder usá-lo, adicione o código abaixo em um gadget Javascript/HTML.
<div id="spit" class="hover"></div>
Pronto, Beijos ;*

5 comentários:

  1. Lindo esse efeito, eu amei. Parabéns!

    Explodindo Glitter

    ResponderExcluir
  2. gostei do tutorial!!!! e do blogue tbm! *

    Adoraria se me seguisse querida!
    Estou com uma meta de 300 seguidores, mas só gostaria que me seguissem quem realmente gostar do meu blogue entende?
    Espero que goste!
    Beeeeijos!<3

    ResponderExcluir
  3. Nossa que efeito legal, vou usar no lay que estou fazendo pro meu amigo.

    overdosedeloucura.blogspot.com

    ResponderExcluir
  4. Que legaaaaaal! Fiquei colocando e tirando o mouse de cima toda hora KKKK muuito legal mesmo!

    release-ur-imagination

    ResponderExcluir
  5. Cara, teus tutoriais são muito bons ><
    Ameei esse efeito <3

    Luce ~ Dear Memories

    ResponderExcluir

Comente que eu retribuo!