Efeito Increase Rotate

Olá anjos!!

Feliz ano novo! Que 2013 seja um ano de muito felicidade e de realizações! 

O primeiro post do ano e o primeiro tutorial também, é o efeito Increase Rotate, que eu converti do Tumblr Single Themes. Esse efeito é bem legal e pode ser usado em um menu, se você fizer algumas imagens legais. 

Veja um preview aqui. 

1-Vá no HTML do seu blog e procure por /b:skin. Acima, cole:

.rotatesd {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    margin: 20px;
    float: left;
    background: #9fcae8;
    position: relative;
    box-shadow:  
        0px 0px 5px 0px #80a9c6 inset,
        0px -1px 5px 4px #80a9c6 inset,
        0px 0px 0px 7px #fff,
        0px 0px 1px 8px rgba(188, 188, 188, 0.4),
        0px 0px 0px 9px #fff;
    -webkit-transition: all 0.3s linear;
 
}
.rotatesd span{
    display: table-cell;
    width: 80px;
    height: 80px;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 26px;
    color: #fff;
    text-shadow: 0px 1px 1px #80a9c6;
    font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
     -webkit-transition: all 0.3s linear;
}
.rotatesd span:nth-child(1),
.rotatesd span:nth-child(3){
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 20px;
    line-height: 36px;
    opacity: 0;
}
.rotatesd span:nth-child(1){
    background: transparent url(http://static.tumblr.com/b1gnlwd/IIEmegzpj/bg.png) no-repeat center center;
    opacity: 0.2;
}
.rotatesd:hover{
    background: #cdb3e7;
    box-shadow:  
        0px 0px 5px 0px #c6abe1 inset,
        0px -1px 5px 4px #c6abe1 inset,
        0px 0px 0px 7px #fff,
        1px 4px 5px 8px rgba(188, 188, 188, 0.6),
        0px 0px 0px 9px #fff;
}
.rotatesd:hover span:nth-child(3){
    opacity: 1;
}
.rotatesd:hover span:nth-child(2){
         -webkit-transform: scale(0);
    opacity: 0;
}
.rotatesd:hover span:nth-child(1){
     -webkit-animation: rotate 1s linear;
}

.rotatesd:active{
    box-shadow:  
        0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset,
        0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset,
        0px 0px 0px 7px #fff,
        0px -1px 0px 8px rgba(188, 188, 188, 0.3),
        0px 0px 0px 10px #fff;
}
.rotatesd:active span:nth-child(2){
    color: rgba(170, 77, 27, 0.8);
    text-shadow: 0px 1px 1px #ad8dce;;
}

@-webkit-keyframes rotate{
    0% {  -webkit-transform: scale(1) rotate(0);}
    50% {  -webkit-transform: scale(0.5) rotate(180deg);}
    100% {  -webkit-transform: scale(1) rotate(360deg);}
}

Nesse código só tem um link, que é o “http://static.tumblr.com/b1gnlwd/IIEmegzpj/bg.png”. Apenas faça uma imagem de tamanho 120x120 redonda e troque esse link pelo link da sua imagem.

Na div “.rotatesd”, você pode mudar a cor do background (troca #9fcae8 pela cor que você quer), e a sombra interna (trocando #80a9c6 pela cor desejada). Já a sombra do texto e a fonte do mesmo, você muda na div “.rotatesd span”.

Para mudar a cor do brackground do hover, modifique os códigos na div “.rotatesd:hover”. Na mesma div, troque #c6abe1 pela cor que você quer na sombra interna das bolas.

2-Cole esse código onde quer que apareça:

<a href="LINK" class="rotatesd">
    <span></span>
    <span>link</span>
    <span>escreva aqui
    </span>
</a>

<a href="LINK" class="rotatesd">
    <span></span>
    <span>link</span>
    <span>escreva aqui</span>
</a>

É só ir repetindo para ter mais links. Alguma dúvida só falar comigo.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar