Efeito fade com CSS

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!