Cada dia que passa vejo menos a necessidade de utilizar alguns efeitos com JQuery. Com a grande popularização de novas ferramentes e mídias na internet os usuários se veem obrigados a utilizarem navegadores mais atualizados e com isso conseguimos usar o CSS 3 como aliado para criar efeitos sofisticados e sem grande esforço e quantidade excessivas de scripts.
Criar efeito de fade com CSS3 é bem simples, e não requer muitas linhas de código.
Para exemplificar o nosso código veja o botão de “continue lendo” do Design Interativo, utilizei algumas linhas de CSS para fazer.
Para criarmos o fade precisamos colocar o código no css na tag “a” e depois na “a:hover”
Veja:
.botao a{
background:#000;
-webkit-transition:background 0.5s ease-out;
-moz-transition:background 0.5s ease-out;
-o-transition:background 0.5s ease-out;
-ms-transition:background 0.5s ease-out;
}
.botao a:hover{
background:#ccc;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
Não tem jeito somos obrigados a utilizar as variações -webkit, -moz, -o, -ms, para que todos os browsers consigam interpretar o efeito.
No exemplo mostro uma transição simples fazendo o background mudar de preto para cinza utilizando um fade suave, mas note que depois da tag de transição temos a palavra :background, ai esta a jogada você pode trocar por outras propriedades de css e aplicar o efeito em diversas formas, seja para um box-shadow, um color etc…
Use a sua criatividade e economize em Javascripts!