24/12/2012

Efeito Four Side



Yoooo pusheens da vida u.ú

Encontrei um efeito muuito legal, que eu achei ótimo para usar como
um gadget de autora e taals. 
Quer um preview? clique aqui  ^^ '



Créditos : (www)(www)



 : Vá até o HTML do seu blog e procure pela tag ]]></b:skin> , assim que encontrar cole o seguinte código ACIMA dela:

#twist{background-image: url('LINK DA IMAGEM QUE COBRE'), url('http://static.tumblr.com/5dbytsa/Rf8mej57q/fundo2.png'), url('LINK DA IMAGEM QUE COBRE'), url('LINK DA IMAGEM QUE COBRE'), url('Imagem no hover');background-repeat: no-repeat;background-position: -100px -100px, 100px 100px, -100px 100px, 100px -100px, 0px 0px;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;-moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease;-o-transition: background-position .6s ease-in-out, -o-transform .3s ease;-ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;transition: background-position .6s ease-in-out, transform .3s ease;}
#twist:hover {background-position: -200px -200px, 200px 200px, -200px 200px, 200px -200px, 0px 0px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
 .hover{border-radius: 103030px;height: 200px; width: 200px;}


No código já tem tudo explicadinho né?  
Mas vamos lá :)


Em link da imagem que cobre, você vai por a imagem que cobrirá a imagem original. Vocês podem colocar backgrounds mesmo
E em imagem hover, é a imagem que aparece girando quando passa o mouse.
Em .hover você ira colocar a altura e a largura da imagem e também se ela ficará redonda ou não.
OBS: Quanto mais bolinhas você quiser mais você vai adicionando o código.

- - - - -

: Agora vá até adicionar um novo gadget HTML/Javascrip e cole:


<div id="twist" class="hover"></div>



É isso. Espero que tenham gostado e Feliiiz Nataaaal ^3^



E participem do sorteioooo OWO


xoxo :*


12 comentários:

  1. Muito show! Adorei o efeito, estou com vários idéias para meu próximo lay, talvez eu encaixe esse efito lindo!
    Sonhos de Mel
    -M

    ResponderExcluir
    Respostas
    1. Thanks Mel :DD
      Tbm achei muito show esse efeito, bem diferente !

      kissus o3o

      Excluir
  2. Aceito sim afiliação, mas tenho q ver com o Léo, é ele que faz os afiliados e tals, quando conseguir falar com ele, entro em conto com vc de novo!
    Bjos!

    www.Be--Different.blogspot.com

    ResponderExcluir
  3. Nossa, que efeito mais lindo!

    Kissus,
    waverlyplace.tk

    ResponderExcluir
  4. Que daora.. Adorei o efeito ^^
    ~Seguindo e feliz natal~
    chokawai.blogspot.com.br

    ResponderExcluir
  5. OMG! Que efeito divo, amei, vou usar no próximo Lay ^u^
    Sobre a afiliação já te coloquei na elite dos afiliados viu flor?

    >>we--love--cherry.blogspot.com.br/
    c: XOXO

    ResponderExcluir
  6. Que efeito mais doido! Amei =)
    Feliz Natal!
    Beijo, Lili
    Princesa Teen // Agora você tem chance de aparecer na sidebar.

    ResponderExcluir