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.
