Si deseas lograr un efecto POP en las cajas de texto, en este artículo te enseñaré cómo debes hacerlo. Viendo a Chris Coyier quise compartir este artículo, en el que aprenderás a crear este llamativo efecto con las cajas de texto  realizado integramente con CSS, como el de Pop Agency.

Las cajas tienen un color blanco de fondo por defecto, y cuando pasas el ratón por encima el color pasa a ser oscuro mediante un efecto de deslizamiento, y el texto bota un poco. Cuando alejas el cursor el fondo cambia a blanco de nuevo y el texto se mueve hacia abajo.

Código HTML

Cada área es una caja.

Select Code
1
<a href="#" class="box"> <h2><span>Breaking news -</span> hippos are sorta dangerous</h2> <h3>Tonight at nine</h3> </a>>

Código CSS (fondo)

POP hace el efecto de deslizamiento de fondo animando la posición del elemento actual, esto únicamente funciona con navegadores que soporten degradados. Únicamente se animará background-position. Para poner la mitad de arriba blanco y la mitad de abajo negra sería así:

Select Code
1
background: linear-gradient( white, white 50%, black 50%, black );

Ahora se hace dos veces más alto que elemento en sí:

Select Code
1
background-size: 100% 200%;

Gráficamente sería algo así: bg-pos Se hará el fondo un poco más alto que el 200%, porque únicamente 200% hace que se muestre un poco del fondo en el elemento aún (en Chrome).

Select Code
1
.box { background: linear-gradient( white, white 50%, #333 50%, #333 ); transition: all 0.2s ease; } .box:hover { background-position: 100% 100%; }

Código CSS (Colores)

El color del texto por defecto es negro, así que no se necesita CSS en esta parte, pero habrá que ajustar los colores, cambiando el color del span para dar mayor dinamismo: .box:hover h2 { color: #48ad26; } .box:hover h2 span { color: white; } .box:hover h3 { color: #999; } El truco aquí está en que el salto ocurra en distintas direcciones dependiendo si estamos en hover o fuera de hover. El texto se mueve hacia arriba y vuelve a su posición original mediante animaciones, no con transiciones, usando @keyframes para el movimiento hacia arriba y otro @keyframe para el movimiento hacia abajo. Un poco de padding nos ayudará a que la altura de cada caja sea la misma.

Select Code
1
@keyframes up-bump { 0% { padding-top: 2em; } 50% { padding-top: 1.5em; } 100% { padding-top: 2em; } } @keyframes down-bump { 0% { padding-top: 2em; } 50% { padding-top: 2.5em; } 100% { padding-top: 2em; } }

 

Hover-off moverá hacia abajo el fondo y las letras y :hover lo moverá hacia arriba. Esto hace que la dirección del fondo se dirija hacia arriba o abajo.

Select Code
1
.box { animation: down-bump 0.4s ease; } .box:hover { animation: up-bump 0.4s ease; }

 

Se podía hacer para que se produjera la animación cuando se carga la página, pero Matt Boldt ha preferido no hacerlo así.

Ejemplo de su funcionamiento

Podemos ver el ejemplo desde codepen:

 

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!