Tutorial - Links em Fade - Entenda!

Hooy meus sorvetinhos de baunilha com cobertura de morango *----* Tudo bem com vocês?? Espero que siim, mas enfim, faz um tempinho que ninguém traz tutus pra cá, não é?? Por isso hoje trouxe esse, pra não deixar os links dos teus bloguitos aquela coisa feia sublinhada e em azul.. Mas o que é um link em fade?? Não tem quando você passa o mouse em cima de um link e ele vai mudando de cor aos pouquinhos?? Então, fade é isso.. Ta, agora chega de bater papo e vamos ver o tutu õ/

lala

PS: Acabei de abrir meu status.. Aproveite e encomende!!

Bem, primeiro, vá no seu html 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);
}

Quando tiver achado, apague todo o código, e no lugar dele coloque:

a:link {
color: #E9A1C0;
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;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;} 

ENTENDENDO..

Vermelho: Cor sem passar o mouse;

Lilás: Cor dos links visitados; 

Azul: Cor ao passar o mouse;

Laranja: Quanto maior o número (0.8s, 0.9s [...]) mais lento será o fade de cores. Quanto menor (0.6s, 0.5s [...]) mais rápido será a transição das cores.

 

Atenção: Os links da sidebar não vão ter esse efeito, para fazer que elas também tenham, procure no seu html, o código abaixo e em seguida o apague completamente.

.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;
} 

Depois de ter feito tudo isso, visualize e salve se estiver tudo certo..

Retirei esse  post do meu  próprio blog: My Candy Space

E ai, gostaram do tutu?? Usaram?? Deu certo?? Comente!!

Bezoos, Sabrina s2