Cajas Informativas tipo menú animadas con CSS3

En este tutorial veremos como hacer unas elegantes cajas informativas tipo menú con HTML y animadas con CSS3, seguimos dando tips para que cada día avancemos y profundicemos mas en el mundo del diseño y desarrollo web, esta vez con algunas técnicas CSS3 para conseguir resultados agradables a la vista.

Esto es lo que vamos a lograr:

Sin mas, comencemos.

EL HTML

Ok, cada cuadro o caja lo vamos a contener mediante un div llamado “caja1”, dentro tenemos una imagen contenida por un div con clase “imagen”, luego el titulo lo hacemos con “h2”, la descripción la tenemos igualmente en un div llamado “descripcion”, y por ultimo el leer mas que también lo tenemos en un div con clase “leermas”. Algo más o menos así:

distribuccion-div

EL CSS

.homebox, damos los estilos para posicionar la caja madre para contener a una o mas box.
.homebox .caja1
, estilos para la caja, alineamos el texto, damos un degradado, damos las dimensiones y aplicamos una transición al cambiar el background.
.homeBox .caja1:hover, cambiamos el color de background cuando nos posicionamos sobre la caja.

.homeBox .caja1 .imagen, damos una transición para el cambio que va a tener esta imagen.
.homeBox .caja1:hover .imagen, le damos una posición relativa y aplicamos los parámetros para su animación , la animación para esta se llamara animacion-desde-arriba que crearemos después.
.homeBox .caja1 h2, estilos para el h2 que esta dentro de la caja.
.homeBox .caja1:hover h2, estilos que se le aplicaran al h2 en el estado hover, igualmente le aplicamos la misma animación anterior animación-desde-arriba pero va a hacer mas rápido ya que dura 200ms.
.homeBox .caja1 .descripcion, estilos al texto de descripción que tiene la caja.
.homeBox .caja1:hover .descripcion, estilos que se aplican en el estado hover, aplicamos la respectiva animación, pero esta es diferente, esta se llama animacion-desde-abajo por que vendrá desde abajo, mas adelante la haremos.
div.leermas a, estilos al enlace del leer más.
div.leermas a:hover, estilos aplicado en su estado de hover.

keyframes animacion-desde-arriba y keyframes animacion-desde-abajo, animaciones por keyframes que aplicamos a los diferentes elementos que tendrán interactividad en la caja, lo que hacemos es cambiar de posición cuando esta se aplique, que generalmente pasara cuando este situado sobre el elemento, en animacion-desde-arriba hacemos es darle una posición Y negativa para que haga la animación desde arriba (-600% o -600px) y se situé en su posición original. Y para keyframes animacion-desde-abajo hacemos lo mismo pero esta vez aparecerá desde abajo (bottom o 400%). Y aplicamos los respectivos sufijos para cada navegador moderno que soporta esta propiedad.

y esto es todo por este tips, espero que te sea de utilidad.

———————————

———————————

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. Noe dice:

    muy bueno el tutorial (Y)