![](http://static.tumblr.com/txsij54/yr0m2qvuw/tumblr_lg5nbj30vk1qb9uyvo1_500_large.jpg)
{tremenda verdadii *--*}
Oiiiiêê caramelos salgaduús! alguém aí já viu um link tipo esse aqui? ele 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);
}
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---
![](http://img41.imageshack.us/img41/8799/kaoicon5.gif)
![](http://img685.imageshack.us/img685/9535/kaoicon7.gif)
![](http://img710.imageshack.us/img710/6383/kaoicon38.gif)
![](http://img99.imageshack.us/img99/4959/kaoicon39.gif)
![](http://img94.imageshack.us/img94/4908/kaoicon15.gif)
![](http://img403.imageshack.us/img403/2677/kaoicon50.gif)
![](http://img94.imageshack.us/img94/6922/kaoicon42.gif)
![](http://img685.imageshack.us/img685/2425/kaoicon1.gif)
![](http://img685.imageshack.us/img685/823/kaoicon31.gif)
![](http://img41.imageshack.us/img41/8292/kaoicon6.gif)
hihi, fofinhos não?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIbWgljHWj1BciWXDFNiWUanzwRzntHGW4gk5hP2mmR9Od-Cz2it83N9zvc0sq0lHyvDLkWiRdcy-dLiW24GvqZh2AnjwvZwva_7IAwQggsvJ1azXGIEsCKLDgqrtwgd5WN8fKpD-mIa_o/s1600/bi.gif)
Nenhum comentário:
Postar um comentário