Efeito Increase Rotate

Olá, pessoas (≧∇≦)

Hoje eu não tenho nada de bom pra falar pra vocês, só posso dizer que estou adorando participar da blogosfera, conheci blogs incríveis, estou adorando tudo isso. Só estou esperando seguidores, mas sei que em pouquíssimo tempo eu irei conseguir. 

Mal posso esperar por isso, gente >3<

Enfim, resolvi postar um efeito que eu encontrei em um tumblr, Efeito Increase Rotate. Espero que gostem, pois eu adorei!

Ah, para visualizarem o efeito, cliquem aqui :3

 Primeiro, coloque o código a seguir antes de ]]></b:skin>

.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);}

}

 Agora, como mudar a cor, background, imagem. Nesse código ai, eu só tenho um link, que é o “http://static.tumblr.com/b1gnlwd/IIEmegzpj/bg.png", ok? Apenas faça uma imagem de tamanho 120x120 e formato de bola 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.

Para finalizar, coloque este código num gadget de HTML/JavaScript:

<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>

<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>

Faça as alterações necessárias e salve.

Tumblr - Single Themes