Efeito “fade” no Background utilizando “transition-property” – CSS3

Como criar o efeito Fade no Background utilizando “transition-property” com CSS3.

efeito fade no background utilizando CSS

A propriedade transition-property especifica o nome da propriedade CSS para que ocorra o efeito de transição (o efeito de transição começará quando a propriedade CSS especificada for alterada).

Um efeito de transição normalmente pode ocorrer quando um usuário passa o mouse sobre um elemento (hover event).

Especifique sempre a propriedade de duração de transição, caso contrário, a duração é 0 e a transição não terá efeito.

Exemplo efeito fade

Exemplo do efeito Fade utilizando uma cor sólida de background:

Passe o mouse

CSS utilizado:

.fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.fade:hover, .fade:focus, .fade:active {
background-color: #2098D1;
color: white;
}

Código CSS reduzido

Utilize essa versão para incluir em seu projeto.

.fade{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;overflow:hidden;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:color,background-color;transition-property:color,background-color}.fade:active,.fade:focus,.fade:hover{background-color:#2098D1;color:#fff}

 

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *