• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

5 de junho de 2012

Efeito Fade no Link

{tremenda verdadii *--*}
Oiiiiêê caramelos salgaduús! alguém aí já viu um link tipo esse aquiele muda de cor aos poucos... e isso se chama: Fade. Vamos aprender?






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);
}
Agora, substitua este código pelo código abaixo:


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;
}
  • Rosa: Cor sem passar o mouse;
  • roxo: Cor dos links visitados; 
  • verde: 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 vão ficar sem esse efeito, para fazer ele funcionar procure por e apague todo o código abaixo.
.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;
Faça as modificações necessárias e visualize, se estiver tudo certo, salve! 
---Bônus---
                                              

                                                
hihi, fofinhos não?

Nenhum comentário:

Postar um comentário