Este post fue visto: 1151

Hoy les traigo un poco de código para hacer un flipcard utilizando solo HTML y CSS. Es útil para añadir información extra sin ocupar espacio, además que le da dinamismo y movimiento a una sección estática.

Como verán, es una técnica muy simple y no requiere JS o JQuery. La estructura principal HTML también es muy simple: el contenedor general (flip-container), el recuadro (card), el frente y el dorso (front y back respectivamente). Luego, el CSS hace su parte y la magia sucede: la propiedad transform entran en acción. Esta propiedad de CSS3 es la que permite a un elemento cambiar su forma, tamaño o posición. Existen dos tipos de transformaciones: las 2D que suceden en un plano, y las 3D que parecieran moverse en el espacio.

El cuadro el ejemplo gira en forma horizontal. Pero si se fijan en la parte de código comentado, está la técnica para que el cuadro gire de forma vertical. Simplemente cambien una clase por otra y verán el resultado.

La utilicé en la sección Servicios de mi web principal, para que cada ítem tuviera una descripción sin agregar espacio extra. Y también la apliqué en el último proyecto web lanzado el mes pasado: Web del Dr. Carlos Ruiz Zepeda.

He aquí el código:

 

Aquí les comparto otro ejemplo de flipcard, también hecho puramente en HTML y CSS. Es un ejemplo responsivo, más avanzado. El toque que me gustó: ese llamativo efecto de «relieve» cuando el cuadro gira.

Por supuesto, pueden ir a los respectivos perfiles de Codepen y modificar el código para probar modificaciones antes de aplicar a sus proyectos. Hay muchas técnicas que se pueden aplicar a los flipcards, algunas más sofisticadas, con animación y efectos increíbles. En esta colección de Codepen reuní algunos ejemplos.

¡Espero que les haya gustado y lo puedan aplicar a sus proyectos!

Escribió:

Alejandra Arellano

¡Hola Mundo! Soy diseñadora gráfica y web, programadora HTML/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de aleare.design estudio de diseño y comunicación digital.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar

Sobre mí

¡Hola Mundo! Aquí Alejandra desde Buenos Aires, Argentina. Soy diseñadora gráfica y web, también programadora, community manager, redactora e ilustradora. También docente y mentora de futuras programadoras y programadores.

Fundadora de aleare.design estudio de diseño y comunicación digital, desde el 2008 brindando servicios a empresas y agencias digitales en varias ciudades del país, y también en México, España, Francia y Noruega.

Mi Filosofía

“Tienen que encontrar eso que aman […]. Su trabajo va a llenar gran parte de sus vidas […] y la única forma de hacer un gran trabajo es amando lo que hacen. Si todavía no lo han encontrado, sigan buscando. No se detengan […]. Sean curiosos. Sean inquietos.”

Steve Jobs
Discurso de apertura, Universidad de Stanford, 2005