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
Eu gostei!
ResponderExcluirNunca entendi muito o HTML do tumblr, acho mais complicado que o do blog!
Efeito muito lindo. ♥
Underground.
Eu até entendo o HTML, mas não consigo fazer templates lá ^^
Excluir