3 de mar de 2012

Tutorial - Efeito Fade nos Links





Hoje eu trouxe um tuto fácil que achei no Cherry Bomb .
É o efeito fade nos links do blog.
. Quando você passa o mouse em um link , a cor muda bem devagar (:

Lets Go !
Vá em Design > Editar HTML, aperte Ctrl + F e procure por:

a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Apague e cole:


a:link {
color: #E9A1C0; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}


Faça as mudanças que preferir nas cores e depois salve (:
O código acima só funciona para a área dos posts, se quiser também com os links da Sidebar, prossiga.




Procure por esse código e apague:

.sidebar .widget a:link {
  color: $(widget.link.color);
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}
.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
}

Visualize e salve ! ~ 



Nenhum comentário:

Postar um comentário