Efeito de fade em links usando transition
Com a nova propriedade transition do CSS3 podemos fazer várias efeitos bacanas sem a necessidade de recorrer aos diversos framework’s javascript (jQuery, Mootools etc…). Para entender melhor sobre a propriedade recomendo ler CSS3 Transitions ( W3C School, claro!! ) e o artigo bem legal da galera do Nettuts+
Para mostrar o funcionamento do transition, fiz um exemplo bem simples usando o evento hover como o gatilho para o meu efeito fade.
html
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
css
ul, li {
margin:0;
padding:10px 5px;
}
li {
margin-bottom:5px;
padding-bottom:3px;
}
li a {
color:#000;
text-decoration:none;
transition: color 1s ease-in; /*padrão*/
-webkit-transition:color 1s ease-in; /*chrome & safari*/
-moz-transition: color 1s ease-in; /*firefox*/
-o-transition: color 1s ease-in; /*opera*/
}
li a:hover {
color:#C00
}
O resultado pode ser conferido aqui: http://jsfiddle.net/tcelestino/3zcKb/7/
Agora use sua criatividade e abuse em suas folhas de estilo.
