Efeito Transition

Postado por:Math

Data:

Ás:21:28

Eae galera, sou eu mais uma vez e hoje vou postar um tuto muito interessante, o efeito Transition. Ele não serve só para fontes, mas também para imagens, irei mostrar como fazer quase tudo, como fazer com imagens, com apenas fontes e tudo mais em uma série de tutoriais. Então vamos lá:
FONTES:
EXEMPLO:

Exemplo 1 Exemplo 1

Para fazer um efeito legal em links, você procure por
]]></b:skin>

E acima dessa tag adicione:

.transex {
font-family:arial;
font-weight:normal;
font-size:15px; /Tamanho da font/
color:#131313; /Mude a cor da font/
}
.transex a{
font-family:arial; /Edite a font/
font-weight:normal; /Edite o estilo da font, italico, negrito etc/
font-size:15px; /Tamanho da font/
color:#fff !important; /Cor da font/
background: #131313; /Fundo do link/
border-radius: 5px; /Arredondamento de bordas/
padding:4px;
text-shadow: #272727 0px 1px 0px; /Sombra da font/
text-decoration: none;
-moz-transition: all 3s; /Transition/
-webkit-transition: all 3s; /Edite os valores de acordo com a velocidade que deseja/
-o-transition: all 3s; /Transition/
}
.transex a:hover{
font-family:arial;
font-weight:normal;
font-size:15px;
color:#bfbfbf  !important;
padding:4px;
background: #272727;
border-radius: 5px;
cursor:pointer;
text-shadow: #333 0px 1px 0px;
text-decoration: none;
}


Depois de adicionar e editar os valores, vá em "Adicionad Gaget" e clique em HTML/JavaScript adicionando:


<div class='transex'>
<a href='#'>NOME DO LINK</a> 
</div>   


OBS: Para adicionar mais um link adicione:
1 - <a href='#'>NOME DO LINK</a> 
antes da </div>

2 - Para adicionar um desses em uma postagem é só clicar em HTML e adicionar:

<div class='transex'>
<a href='#'>NOME DO LINK</a>
</div>