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.
Top, me ajudou muito, vlw!
ResponderExcluirhá a possibilidade de usar esse comando para suavizar a entrada de uma pagina quando clico em um link?
ResponderExcluir