HTML5/CSS3

Colección de efectos CSS3 para tu web

Índice
  1. Anima tu web con los efectos CSS3
    1. Conclusión

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.

AJ Morales

Consultor de Marketing Digital, especializado en Marketing de Contenidos y Posicionamiento SEO 🚀. Me considero un apasionado de la tecnología y de la edición profesional de fotografías con Adobe Photoshop. Málaga ciudad con alma.

Ver comentarios

Publicaciones Recientes

Gemini Deep Research en Google Drive: Analiza Múltiples Documentos en Segundos y Ahorra Horas de Trabajo

Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…

2 días Hace

Quitar la Marca de Agua en las Imágenes de Google Nano Banana

Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…

3 semanas Hace

Límites de Gemini Gratis ¿Qué te ofrece la IA de Google sin pagar?

¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……

3 meses Hace

Convierte una foto en una figura coleccionable con Nano Banana Gratis

¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…

3 meses Hace

Cómo Hacer un Video de Ciudad Emblemática con Veo 3

Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…

3 meses Hace

Google Opal: Automatiza Tareas Diarias y Revoluciona Tu Productividad

¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…

3 meses Hace

Esta página utiliza cookies para mejorar su rendimiento