Efeito de Fade com CSS3


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!





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

Um comentário em “Efeito de Fade com CSS3

  1. Roberth 5 de novembro de 2015 19:00

    valeeewww

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>