Efeito fade com CSS3

Houve um tempo em que a única maneira de fazer aparecer ou desaparecer um elemento ou imagem com suavidade era usando JavaScript / jQuery. Com CSS3, você pode facilmente criar um efeito de fade com nada mais do que um pouco de CSS. 


Vamos começar com um elemento de texto (HTML):



<p class="fade">Este é o elemento que vai desaparecer quando você passar o mouse sobre ele</p>

Agora com (CSS):

 .fade {
      opacity: 1;
      transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
     }

     .fade:hover {
      opacity: 0.5;
     }

Passe o mouse sobre o texto abaixo para ver a demonstração: 

Este é o meu elemento de texto que vai desaparecer quando você passa o mouse sobre ele.
Vamos fazer a mesma coisa com uma imagem:


Podemos usá-lo também para alterar uma cor de fundo. Vamos criar um menu simples, usando uma lista simples (HTML):

<ul class="nav-fade">  <li>Home</li>  <li>Quem Somos</li>  <li>Contato</li> </ul>
Novamente o (CSS):

.nav-fade li {background: #fff; padding: 5px 10px; display: inline-block; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out;color:#000; }
.nav-fade li:hover { background: #ddd; }
Confira o resultado abaixo:
Como você pode ver, com esse recurso CSS3 você pode usar para uma infinidade de aplicações. 

Se tiver alguma dúvida ou sugestão não deixe de comentar, se gostou compartilhe. 



Comentários

  1. há a possibilidade de usar esse comando para suavizar a entrada de uma pagina quando clico em um link?

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

8 Guias Rápidos para Designers e Programadores

PSD para HTML5 - Converta layouts para html online!

Customizando check boxes e radio buttons