Mi primer Efecto CSS3
En este primer Post relasionado a efectos CSS se les enseñara a crear pequeños efectos en cajas y en letras todo con ayuda de CSS el primer efecto sera el de desvanecer o fantasma esto es gracias a la propiedad :hover esta propiedad le dice al elemento que al sobre poner el cursor de unos detalles diferentes o propiedades distintas.
Desvanecer (efecto fantasma)
este primer efecto se realiza al crear una caja "div" y agregarle el tributo "class" o "id", y utilizando la propiedad :hover
Empezamos con el CSS
.fantasma{
background :#673ab7;
padding :20px;
border-radius :10px;
transition :400ms ease-in;/* maneja la duracion del efecto */
}
.fantasma:hover{
opacity :0.3;
}
background :#673ab7;
padding :20px;
border-radius :10px;
transition :400ms ease-in;/* maneja la duracion del efecto */
}
.fantasma:hover{
opacity :0.3;
}
<span class="fantasma"></span>
Efecto fantasma en letras
Como podemos observar lo unico que cambia al respecto del anterior efecto es la propiedad color:; con la que se cambia el color del texto.
Empezamos con el CSS
.fantasma-text{
background :#673ab7;
color :#000;
padding :20px;
border-radius :10px;
transition :400ms ease-in;/* maneja la duracion del efecto */
}
.fantasma-text:hover{
opacity :0.3;
color :#fff;
}
background :#673ab7;
color :#000;
padding :20px;
border-radius :10px;
transition :400ms ease-in;/* maneja la duracion del efecto */
}
.fantasma-text:hover{
opacity :0.3;
color :#fff;
}
<span class="fantasma-text">Fantasma texto</span>
Fantasma texto
Fantasma texto