Logotipo Design Interativo

Efeito de Fade com CSS3


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!

Comentários
Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade