Efeitos em Links do Blog

Bem, a pedido do Bruno e da Rita hoje trago um tutorial de como colocar os links como os meus, eu por acaso gosto deste efeito, vou mostrar ainda outros para quem não gosta muito deste.

Todos os códigos é para colocar acima de b:skin

Efeito Afastado

Pelo que me disseram dá um ar futurista, os créditos estão na imagem ^-^ bem... Bora começar? Acima de b:skin cola este código: (não retires nenhuma parte do código)

*// Efeito nos links by Bibokices (bibokices.blogspot.com) //*
a{
letter-spacing:2px;  **espaço entre as letras**
-webkit-transition-duration: .50s;  **tempo que demora a desaparecer o efeito**
}

 a:hover {

color:#000; **cor hover** 
text-shadow: 2px 7px 1px #b8d935, **cor afastamento de cima**
               -10px 1px 1px #fc5d77, **cor afastamento do meio**
               4px -7px 1px #5dcdfc; **cor afastamento de baixo**
-webkit-transition-duration: .50s; **tempo que demora a aparecer o efeito**
}

Fácil né? 

Efeito 3D

a{
   color: white;
   text-shadow: 1px 1px #D0A9F5,                 2px 2px #D0A9F5,                 3px 3px #D0A9F5;   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
 a:hover{
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #F781F3,                 2px 2px #F781F3,                 3px 3px #F781F3,                 4px 4px #F781F3,                 5px 5px #F781F3,                 6px 6px #F781F3;}

Efeito Glow

 

a{
 -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}
 a:hover{
 color: #00adbc;
      text-shadow: 0px 0px 12px #00adbc;
}

O que acharam dos efeitos?