Tutorial - Efeito Four Side


Boa noite, sei que não é meu dia de postar, mais como a Carol não postou até agora eu decidir postar. Bom vim trazer um tutorial de um efeito muito lindo e viciante que eu modifiquei do tumblr para blog, o nome dele é Four Side e é ótimo para usar no efeito das autoras ou afiliados, principalmente se eles estiverem no cabeçalho. Visualize aqui.


: 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;}
Em link da imagem que cobre, você vai por a imagem que cobrirá a imagem original. Vocês podem achar algumas aqui.
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>
Então é isso, espero que tenham gostado e os créditos vão ao HTMLuv. Qualquer dúvida vocês já sabem o que fazer.

10 comentários:

  1. Nossa esse efeito é simplesmente demais, vou usá-lo no Layout que estou preparando, fica super lindo.

    X-Tudo Confissões

    ResponderExcluir
  2. OMG! Esse efeito é perfeito! Além de ser lindo, deixa o layout mas divertido e tá bem explicadinho. Talvez use em um dos meus designs, sem esquecer dos créditos, é claro! :3
    Ana || explosaodecerejas.blogspot.com

    ResponderExcluir
  3. Que lindo o efeito ,adorei! ♥

    Kissus
    gotas-de-fofura.blogspot.com

    ResponderExcluir
  4. Muuito lindo amr,eu adorei *-*
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir