Las animaciones en CSS o tarjetas en css son un recurso moderno que le otorga movimiento a los elementos de una página web y expande la experiencia de usuario. Además, son una gran forma de mostrar tus habilidades en diseño web. Por ello, en este post te enseñaremos cómo crear una tarjeta animada con CSS para darle movimiento a tu página de presentación.
¿Qué es una tarjeta y cómo crearla?
Antes de crear una tarjeta animada con CSS ( css animation card ), hay que crear la tarjeta en sí. Una tarjeta es una forma simple y atractiva de introducir una sección o una página web. En términos sencillos, es un espacio en la web que normalmente contiene una imagen, un título y un texto breve.
En este post, crearemos una tarjeta que contiene una imagen de fondo, un título y un breve texto que introduce a otra página web. Primero deberemos crear un elemento div, pues no hay elemento que describa una tarjeta. Dentro de este elemento div, insertaremos nuestra imagen y otro elemento div que contenta los elementos H1 y p. Una vez creados estos elementos en nuestro documento HTML, les daremos un atributo de clase a cada uno. Te recordamos que el nombre que elijas para tus atributos de clase debe ser fácil de reconocer, pues debes poder saber qué estás estilizando directamente desde CSS.
Nosotros le hemos dado los atributos «card-title» y «card-text» a los elementos descritos anteriormente, los cuales se encuentran dentro de un div «.card-content» que se encuentra dentro de un div «.card». A este div le hemos dado un width de 250px y hemos definido que el max-with de la imagen sea de 100px.
Después, podemos usar el z-index para dejar la imagen en el fondo. Para subir el título y la descripción encima de ella, usamos el posicionamiento clásico de CSS y determinamos que la propiedad transform: translateY tiene un valor de 100%. Además, podemos usar el selector .card-content para darle un color de fondo a estos elementos.
¿Cómo crear una tarjeta animada con CSS?
Ahora que tenemos nuestra tarjeta, es el momento de animar sus componentes. Para crear una tarjeta animada con CSS ( cards animadas css ), podemos, por ejemplo, hacer que los contenidos de la tarjeta aparezcan cuando el ratón pasa por encima de ella.
Para hacer esto, usamos las transiciones de CSS y la propiedad de transformación translateY. Entonces, podemos usar la pseudo-clase :hover para hacer que el estado de los elementos sea distinto cuando el ratón está encima de la tarjeta. Para elegir este elemento, debemos usar los selectores .card:hover .card-content. Dentro de este podemos decir que la propiedad transform: translateY tiene un valor de 0. Esto hará que la posición de los contenidos pase a su inicio en vez de estar 100% fuera de la pantalla.
El problema en este momento es que el contenido aparece y desaparece de manera muy brusca. Para mejorarlo, podemos aplicar una transición al selector .card-content escribiendo la siguiente línea de código: transition: all 0.5s ease-in-out. Si quieres crear un efecto aún más suave, puedes hacer que la opacidad del color de fondo pase de 0 en el elemento .card.content a 1 en el estado hover.
Y ahora, ¿qué sigue?
Ahora que sabes cómo crear una tarjeta animada con CSS usando las transiciones y transformaciones de este lenguaje de programación, ¡es el momento de crear y diseñar tu propia tarjeta! Por eso te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, donde podrás convertirte en un profesional en pocos meses. Además de seguir aprendiendo sobre HTML, CSS y todo lo necesario para ser un experto en desarrollo web, crearás y diseñarás tu propia página web con ayuda de nuestros profesores. ¡Matricúlate ya!
