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!
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!