Para el día de hoy vamos a trabajar los los efectos CSS3. Gracias a ellos podremos dar un aspecto más profesional a nuestras páginas web. ¡Vamos al lío!
Anima tu web con los efectos CSS3
Con unas pocas líneas de código podemos crear hermosos efectos CSS3 al pasar el mouse sobre botones, logotipos, imágenes, elementos, etc…Hover.css es una sencilla y práctica colección de efectos CSS3 que nos permitirán realizar diferentes tipos de animaciones
Para poder utilizarlos lo primero que debemos de hacer es descargar y conectar la hoja de estilos a nuestra página Html5 desde el siguiente enlace.
<link href="css/hover.css" rel="stylesheet" media="all">Vamos a imaginar que queremos aplicar un efecto CSS3 a un botón, el cual tenemos en nuestra hoja de estilo definido de la siguiente forma:
.boton {
background:#1abc9c;
color: #ffffff;
cursor: pointer;
margin: 0.4em;
padding: 1em;
text-decoration: none;
}A este sencillo botón le vamos a aplicar un efecto de grow-rotate (crecer-rotar), un giro suave y aumentar al asomar.
Para ello nos vamos al archivo hover.css y encontramos los estilos de este efecto:
/* Grow Rotate */
.grow-rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover,
.grow-rotate:focus,
.grow-rotate:active{
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}Ahora aplicamos a nuestro botón agregando la siguiente clase:
<a href="#" class="boton grow-rotate">Comprar</a>Para otros de los muchos efectos que posee la colección hover.css3 podéis visitar el siguiente enlace.
Conclusión
¿Os resulto fácil? La verdad que es muy sencillo de implementar en tu página web y agrega multitud de efectos muy profesionales.
Espero que os haya resultado de gran utilidad y podáis sacarle partido a todo el potencial que nos ofrece esta colección de efectos CSS3.
Gracias y si te gustó dale a like y comparte con tus amigos en las redes sociales.