sábado, 16 de fevereiro de 2013 @ 11:44

Era uma vez...



Era uma vez... Uma menina com vontade de criar um blog. E puft! Naceu o goodiesland. E pra começar com o pé direito, trouxe um tutorial transferido lá do tumblr Single Themes, para ver clique aqui. Bora?



É bem fácil fazer, você pode personalizar da maneira que quiser. Cole o seguinte código 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(LINK DA IMAGEM) 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);}
}
Ok, agora vamos aprender como formatar o código.

Link da imagem: Imagem, normal. Faça uma imagem em forma de bola tamanho 120x120.
#9fcae8 : Link do background quando a imagem giiiira!
#80a9c6: Link da sombra interna.

Para colocar em na sidebar, copie esse código e cole em 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>

 E faça as mudanças necessárias, qualquer coisa vá na ask do meu tumblr.

0 comentários