Animaciones CSS: guía básica para empezar desde cero

Posted on by marta

Las animaciones CSS son una de esas herramientas que pueden transformar una interfaz sencilla en una experiencia más clara, fluida y agradable. Pero también pueden convertirse en ruido visual si se usan sin intención. Por eso, antes de empezar a añadir movimiento a botones, tarjetas, menús o ilustraciones, conviene entender algo importante: animar con CSS no consiste en decorar por decorar, sino en acompañar al usuario.

Una buena animación puede ayudar a explicar qué está pasando en una interfaz. Puede indicar que un botón es interactivo, que un menú se ha abierto, que una tarjeta ha cambiado de estado o que una acción se ha completado correctamente. En cambio, una animación excesiva, lenta o mal planteada puede aumentar la carga cognitiva, distraer y empeorar la experiencia.

En esta guía básica sobre animaciones CSS vamos a ver desde cero qué son, cuándo usarlas, qué diferencia hay entre transition y animation, cómo funcionan los @keyframes, qué propiedades conviene animar y qué buenas prácticas deberías tener presentes si quieres crear animaciones web útiles, accesibles y mantenibles.

La idea de este artículo es que funcione como un post pilar: una página central desde la que puedas entender los conceptos principales y, después, profundizar en temas concretos como microinteracciones, efectos hover, menús animados, loaders, animaciones accesibles o ilustraciones CSS más complejas. Si también te interesa la parte más visual del CSS, puedes complementar esta guía con el artículo sobre cómo dibujar formas básicas con CSS.

Qué son las animaciones CSS

Las animaciones CSS permiten modificar visualmente uno o varios estilos de un elemento a lo largo del tiempo. En lugar de que un cambio ocurra de forma brusca, puedes hacer que ese cambio sea progresivo.

Por ejemplo, imagina un botón que cambia de color cuando pasas el ratón por encima. Sin animación, el color cambia de golpe. Con una transición, ese cambio puede hacerse de forma suave:

.button {
  background-color: #cc2b5e;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #753a88;
}

Este pequeño detalle ya mejora la percepción de la interfaz. El usuario siente que el elemento responde de forma más natural.

CSS permite crear movimiento principalmente de dos formas: mediante transiciones y mediante animaciones con @keyframes. Las transiciones sirven para animar el cambio entre dos estados de un elemento, por ejemplo un estado normal y un estado :hover. Las animaciones con @keyframes, en cambio, permiten definir varios pasos intermedios dentro de una secuencia más controlada.

Por qué usar animaciones CSS en una web

Las animaciones no deberían estar ahí solo porque “quedan bonitas”. En diseño de interfaces, el movimiento tiene sentido cuando ayuda a comunicar mejor.

Una animación puede cumplir varias funciones dentro de una web:

  • Dar feedback visual.
  • Guiar la atención del usuario.
  • Explicar una relación entre elementos.
  • Suavizar cambios de estado.
  • Hacer que una interfaz se sienta más cuidada.
  • Reforzar la personalidad visual de una marca.

Por ejemplo, una tarjeta que se eleva ligeramente al pasar el cursor comunica que es clicable. Un panel que aparece desde un lateral ayuda a entender de dónde viene ese contenido. Un icono que gira al abrir un acordeón indica que algo ha cambiado de estado.

Ahora bien, también hay que tener cuidado. Si todo se mueve, nada destaca. Una web llena de efectos puede generar cansancio visual y hacer que el usuario tarde más en decidir qué hacer. Aquí conviene pensar en algo muy relacionado con la experiencia de usuario: la diferencia entre captar la atención y aumentar la carga cognitiva. Una animación útil reduce fricción. Una animación innecesaria puede añadir ruido.

Si quieres profundizar más en cómo las decisiones visuales afectan a la comprensión de una interfaz, te puede interesar el artículo sobre HTML semántico y accesibilidad web, porque muchas veces la claridad de una interfaz empieza mucho antes de añadir movimiento.

Transiciones CSS: el primer paso para animar con CSS

Las transiciones CSS son la forma más sencilla de empezar a animar con CSS. Sirven para suavizar el cambio entre dos valores de una propiedad.

Cómo funciona una transición

Una transición necesita, como mínimo, dos cosas: una propiedad que vaya a cambiar y una duración para ese cambio.

.card {
  transform: translateY(0);
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-8px);
}

Aquí estamos diciendo que la tarjeta parte de su posición original y, cuando el usuario pasa el cursor por encima, se desplaza ligeramente hacia arriba. Ese cambio no sucede de golpe, sino durante 0.25s.

La propiedad transition es una forma abreviada de declarar varias cosas a la vez: qué propiedad se anima, cuánto dura, qué curva de aceleración utiliza y si tiene retraso.

Propiedades principales de transition

Cuando trabajes con transiciones, estas son las propiedades que más vas a utilizar:

.element {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

También puedes escribirlo de forma abreviada:

.element {
  transition: transform 0.3s ease 0s;
}

La propiedad transition-property indica qué propiedad se va a animar. transition-duration define la duración. transition-timing-function controla el ritmo de la animación. Y transition-delay permite retrasar el inicio.

Cuándo usar transition

Usa transition cuando quieras animar un cambio sencillo entre dos estados. Es ideal para efectos :hover, estados :focus, botones, tarjetas, enlaces, cambios de color, cambios de opacidad o pequeños desplazamientos.

.link {
  color: #020101;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.link:hover {
  color: #cc2b5e;
  text-decoration-thickness: 3px;
}

Este tipo de microinteracción puede mejorar mucho la experiencia sin añadir complejidad. Además, es una buena puerta de entrada si estás empezando a animar con CSS.

Animaciones CSS con @keyframes

Cuando necesitas más control que una simple transición, entran en juego las animaciones con @keyframes.

Una animación CSS se compone de dos partes principales: una regla @keyframes, donde defines los pasos de la animación, y una propiedad animation, donde aplicas esa animación a un elemento.

Qué es @keyframes

La regla @keyframes define cómo cambia un elemento durante una animación. Puedes usar from y to, o porcentajes como 0%, 50% y 100%.

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  animation: fadeIn 0.6s ease-out both;
}

En este caso, el título aparece progresivamente y sube ligeramente desde abajo. Es una animación típica para introducir contenido en pantalla.

Diferencia entre from/to y porcentajes

Puedes escribir una animación sencilla así:

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

Pero si necesitas más control, puedes usar porcentajes:

@keyframes bounceSoft {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

Los porcentajes permiten definir puntos intermedios. Esto es útil para animaciones más elaboradas, como rebotes, loaders, entradas escalonadas o pequeños efectos decorativos.

Propiedades principales de animation

La propiedad animation también puede escribirse de forma abreviada. Agrupa propiedades como animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode y animation-play-state.

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

Aquí estamos diciendo que el elemento usará la animación pulse, durará 1.5s, tendrá una curva ease-in-out y se repetirá infinitamente.

La versión extendida sería:

.badge {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

Transition vs animation: cuándo usar cada una

Una de las dudas más habituales al empezar con CSS animation es cuándo usar transition y cuándo usar animation.

Usa transition cuando hay un cambio de estado

Las transiciones son perfectas cuando el elemento cambia como respuesta a una interacción o a una clase añadida con JavaScript.

.menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

Aquí el menú cambia entre cerrado y abierto. La transición suaviza ese cambio.

Usa animation cuando necesitas una secuencia propia

Las animaciones con @keyframes son más adecuadas cuando el movimiento tiene una secuencia definida que no depende únicamente de un cambio entre dos estados.

Por ejemplo, usarías animation para crear un loader, un icono que pulsa, una ilustración animada, una entrada de contenido o una animación que se repite.

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  animation: rotate 1s linear infinite;
}

En resumen: si solo necesitas suavizar un cambio, usa transition; si necesitas definir una secuencia, usa animation y @keyframes.

Propiedades recomendadas para animar

No todas las propiedades CSS se comportan igual cuando las animas. Algunas son más eficientes y otras pueden afectar al rendimiento de la página.

Prioriza transform y opacity

Cuando sea posible, conviene animar transform y opacity. Son dos propiedades especialmente útiles porque permiten crear muchos efectos visuales sin obligar al navegador a recalcular constantemente la estructura de la página.

.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Con transform puedes crear desplazamientos, escalados, rotaciones e inclinaciones:

.box:hover {
  transform: translateY(-6px) scale(1.02);
}

Con opacity puedes crear apariciones y desapariciones suaves:

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip.is-visible {
  opacity: 1;
}

Evita animar propiedades costosas

Siempre que puedas, evita animar propiedades como width, height, top, left, margin o padding. No significa que estén prohibidas, pero sí que deberías usarlas con cuidado.

Por ejemplo, en lugar de animar top, suele ser mejor animar transform: translateY().

Menos recomendable:

.modal {
  top: -40px;
  transition: top 0.3s ease;
}

.modal.is-open {
  top: 0;
}

Mejor:

.modal {
  transform: translateY(-40px);
  transition: transform 0.3s ease;
}

.modal.is-open {
  transform: translateY(0);
}

Visualmente el resultado puede ser parecido, pero la segunda opción suele ser más eficiente y más fácil de mantener.

Curvas de animación: el papel del easing

La duración de una animación importa, pero el ritmo también. Ahí entra en juego el concepto de easing, que define cómo progresa la animación a lo largo del tiempo.

No es lo mismo una animación completamente lineal que una animación que empieza despacio, acelera y termina suavemente.

Valores habituales de timing-function

Algunos valores comunes son:

.element {
  transition-timing-function: ease;
}
.element {
  transition-timing-function: linear;
}
.element {
  transition-timing-function: ease-in;
}
.element {
  transition-timing-function: ease-out;
}
.element {
  transition-timing-function: ease-in-out;
}

Cuándo usar cada curva

Para interfaces, ease y ease-out suelen funcionar bien en muchas situaciones porque hacen que el movimiento se sienta más natural.

  • linear: útil para loaders o rotaciones constantes.
  • ease: buena opción general.
  • ease-in: empieza lento y termina más rápido.
  • ease-out: empieza rápido y termina suave.
  • ease-in-out: suaviza tanto la entrada como la salida.
.toast {
  animation: slideIn 0.35s ease-out both;
}

En una notificación, ease-out suele tener sentido porque queremos que aparezca con cierta agilidad y se asiente de forma suave.

Ejemplos básicos de animaciones CSS

Veamos algunos ejemplos prácticos que puedes usar como punto de partida. La idea no es copiar y pegar sin pensar, sino entender el patrón para adaptarlo después a tus propios componentes.

Botón con hover suave

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: #cc2b5e;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  background: #753a88;
}

Este patrón es sencillo, pero muy útil. El botón responde visualmente sin resultar exagerado.

Tarjeta que aparece al cargar

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: cardEnter 0.5s ease-out both;
}

Aquí usamos both para que el elemento conserve los estilos del primer y último fotograma cuando corresponda.

Loader circular

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 2rem;
  height: 2rem;
  border: 3px solid #f8e0ea;
  border-top-color: #cc2b5e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

En este caso, linear tiene sentido porque queremos una rotación constante.

Aparición escalonada de elementos

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  animation: fadeUp 0.45s ease-out both;
}

.list-item:nth-child(2) {
  animation-delay: 0.1s;
}

.list-item:nth-child(3) {
  animation-delay: 0.2s;
}

.list-item:nth-child(4) {
  animation-delay: 0.3s;
}

Este recurso es útil para listas, grids de tarjetas o bloques de contenido. Eso sí: úsalo con moderación. Si una página tiene muchos elementos y todos aparecen con retraso, la experiencia puede volverse lenta.

Si estás trabajando con ilustraciones CSS, este tipo de animaciones también puede combinarse con técnicas como pseudo-elementos o recortes visuales. En ese caso, puedes ampliar el tema con el artículo sobre pseudo-elementos en CSS o con la guía sobre clip-path en CSS.

Accesibilidad en animaciones CSS

La accesibilidad es un punto fundamental cuando hablamos de animaciones web. No todas las personas perciben el movimiento de la misma manera. Para algunos usuarios, ciertas animaciones pueden provocar mareo, incomodidad o dificultad para concentrarse.

Por eso, CSS ofrece la media feature prefers-reduced-motion, que permite detectar si una persona ha activado en su sistema una preferencia para reducir el movimiento no esencial.

Cómo usar prefers-reduced-motion

Una forma habitual de aplicarlo es reducir o eliminar animaciones cuando el usuario ha indicado esa preferencia:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

Este enfoque es bastante global. En proyectos reales, también puedes crear alternativas más cuidadas en lugar de eliminar todo de golpe.

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
  }

  .card:hover {
    transform: none;
  }
}

Animar no debería bloquear la comprensión

Una animación accesible debería cumplir estas ideas:

  • No debe ser imprescindible para entender el contenido.
  • No debe impedir usar la interfaz.
  • No debe ejecutarse de forma infinita sin motivo.
  • No debe parpadear agresivamente.
  • No debe generar desplazamientos inesperados.
  • Debe poder reducirse si el usuario lo necesita.

Una buena regla práctica es esta: si quitas la animación, la interfaz debería seguir funcionando y entendiéndose perfectamente.

También es importante no olvidar los estados de teclado. Si una animación acompaña el estado :hover, muchas veces debería contemplar también :focus-visible. Puedes profundizar en esta parte en el artículo sobre focus visible y navegación con teclado.

Buenas prácticas para crear animaciones CSS

Crear buenas animaciones no depende solo de saber escribir @keyframes. También implica criterio visual, intención de diseño y cuidado técnico.

1. Empieza con movimientos pequeños

Cuando estás empezando, es fácil pasarse. Una tarjeta no necesita volar por la pantalla para comunicar que es interactiva. A menudo basta con un pequeño cambio de opacidad, color o posición.

.card:hover {
  transform: translateY(-4px);
}

Un movimiento pequeño suele sentirse más elegante y menos invasivo.

2. Usa duraciones cortas

En interfaces, muchas animaciones funcionan bien entre 150ms y 400ms. No es una regla absoluta, pero sí un buen punto de partida.

  • Microinteracciones: 150ms–250ms.
  • Entradas de elementos: 300ms–500ms.
  • Animaciones decorativas: depende del caso, pero conviene usarlas con cuidado.

Una animación demasiado rápida puede pasar desapercibida. Una demasiado lenta puede hacer que la web parezca pesada.

3. Mantén consistencia

Si cada botón, tarjeta y modal usa una duración diferente, la interfaz puede sentirse caótica. Es mejor definir un pequeño sistema de tiempos:

:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-base: ease;
}

Y después reutilizarlo:

.button {
  transition: transform var(--duration-base) var(--ease-base);
}

Esto ayuda a que el proyecto sea más mantenible.

4. No animes todo

Una web con demasiadas animaciones puede parecer menos profesional. El movimiento debe tener jerarquía. Antes de añadir una animación, pregúntate si ayuda a entender algo, si aporta feedback, si guía la atención o si simplemente está ahí porque se puede hacer.

Si no cumple ninguna función clara, probablemente sobra.

Errores comunes al empezar con CSS animation

Cuando empiezas a trabajar con CSS animation, es normal cometer algunos errores. Lo importante es detectarlos pronto para que las animaciones no perjudiquen la experiencia.

Animar propiedades equivocadas

Uno de los errores más frecuentes es animar propiedades que afectan al layout cuando podrías usar transform.

Menos recomendable:

.box:hover {
  width: 120%;
}

Mejor:

.box:hover {
  transform: scale(1.05);
}

Usar infinite sin necesidad

Las animaciones infinitas deben reservarse para casos concretos, como loaders o pequeños indicadores de actividad. Si un elemento decorativo se mueve todo el tiempo, puede distraer mucho.

.icon {
  animation: pulse 1s infinite;
}

Antes de usar algo así, pregúntate si realmente necesita repetirse siempre.

Crear animaciones demasiado largas

Una animación larga puede parecer elegante en una demo, pero molesta en una interfaz real. El usuario no quiere esperar a que la web termine de “presentarse” para poder interactuar.

Olvidar el estado focus

Muchas veces se anima :hover, pero se olvida :focus-visible. Esto deja fuera a quienes navegan con teclado.

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

Las animaciones también deben acompañar la accesibilidad de la interacción, no solo el uso con ratón.

Cómo organizar animaciones CSS en un proyecto real

Cuando un proyecto crece, conviene evitar animaciones sueltas y repetidas por todo el CSS. Puedes crear una pequeña arquitectura de movimiento para que todo sea más coherente.

Variables para tiempos y curvas

:root {
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;

  --motion-ease-standard: ease;
  --motion-ease-enter: ease-out;
  --motion-ease-exit: ease-in;
}

Clases reutilizables

.animate-fade-up {
  animation: fadeUp var(--motion-duration-slow) var(--motion-ease-enter) both;
}

.transition-base {
  transition-duration: var(--motion-duration-base);
  transition-timing-function: var(--motion-ease-standard);
}

Keyframes centralizados

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Este enfoque hace que las animaciones sean más coherentes y fáciles de ajustar. Si más adelante decides que las entradas son demasiado lentas, puedes cambiar una variable en lugar de revisar decenas de componentes.

Una nota sobre diseño responsive

También conviene probar las animaciones en distintos tamaños de pantalla. Un desplazamiento que se ve sutil en escritorio puede sentirse excesivo en móvil. Si trabajas mucho con composición visual en CSS, te recomiendo revisar también el artículo sobre cómo adaptar ilustraciones CSS a distintos tamaños de pantalla.

Animaciones CSS como parte de una estrategia de contenidos

Este artículo está pensado como una guía base sobre animaciones CSS, pero el tema da para mucho más. Por eso tiene sentido usarlo como página central de un cluster de contenidos.

Desde aquí puedes enlazar, por ejemplo, a artículos más específicos sobre:

  • Cómo usar transition en CSS.
  • Cómo crear animaciones con @keyframes.
  • Efectos hover modernos con CSS.
  • Animaciones CSS para botones.
  • Cómo animar menús responsive.
  • Loaders CSS sin JavaScript.
  • Animaciones accesibles con prefers-reduced-motion.
  • Errores de rendimiento al animar con CSS.
  • Microinteracciones CSS para mejorar la UX.
  • Diferencias entre animaciones CSS y animaciones JavaScript.

Esta estructura ayuda tanto al usuario como al SEO. El usuario encuentra una ruta de aprendizaje clara. Y Google puede entender mejor la relación semántica entre los artículos del sitio.

Un post pilar no debería intentar resolver todos los temas con profundidad extrema. Su función es ordenar el mapa, explicar los conceptos base y derivar hacia contenidos complementarios más concretos.

Preguntas frecuentes sobre animaciones CSS

¿Qué diferencia hay entre transition y animation en CSS?

transition sirve para suavizar el cambio entre dos estados de un elemento, por ejemplo cuando un botón pasa de su estado normal a :hover. animation, en cambio, permite crear una secuencia más completa mediante @keyframes, con pasos intermedios, repeticiones, retrasos y mayor control.

¿Qué propiedades CSS conviene animar?

Siempre que sea posible, conviene animar transform y opacity, porque suelen ser más eficientes para el navegador. Con transform puedes crear desplazamientos, escalados y rotaciones. Con opacity puedes controlar apariciones y desapariciones suaves.

¿Las animaciones CSS son mejores que las animaciones con JavaScript?

No siempre. Las animaciones CSS son ideales para microinteracciones, transiciones sencillas, loaders básicos y efectos visuales ligados a estilos. JavaScript puede ser más adecuado cuando necesitas controlar una animación de forma dinámica, responder a eventos complejos, sincronizar estados o crear interacciones avanzadas. La mejor opción depende del problema que quieras resolver.

Movimiento con intención

Las animaciones CSS son una herramienta poderosa, pero su valor no está en el movimiento por sí mismo. Su valor está en cómo ese movimiento ayuda a que una interfaz se entienda mejor.

Una buena animación no interrumpe. No compite con el contenido. No obliga al usuario a esperar. Simplemente acompaña: guía la mirada, suaviza los cambios, refuerza la interacción y hace que la experiencia se sienta más cuidada.

Si estás empezando desde cero, no necesitas memorizar todas las propiedades de golpe. Empieza con transition, practica con transform y opacity, crea tus primeros @keyframes y observa cómo cambia la percepción de una interfaz cuando el movimiento tiene intención.

Animar con CSS no es añadir efectos porque sí. Es tomar decisiones pequeñas, pero importantes, sobre cómo se comporta una web. Y cuando esas decisiones están bien pensadas, las animaciones dejan de ser un adorno para convertirse en parte de la experiencia de usuario.

Dibujar con CSS responsive: cómo adaptar ilustraciones a distintos tamaños de pantalla

Posted on by marta

Cuando empezamos a dibujar con CSS, lo habitual es centrarnos en la parte más vistosa: crear círculos, combinar bordes, jugar con sombras, apilar capas o construir personajes y objetos con div y pseudo-elementos. Sin embargo, hay una cuestión igual de importante que muchas veces se deja para el final: qué ocurre con esa ilustración cuando cambia el tamaño de la pantalla.

Ese es el punto en el que entra de lleno el enfoque responsive. Porque una ilustración hecha con hojas de estilo no debería funcionar solo en el contexto en el que la diseñaste. También debería conservar proporción, claridad visual y equilibrio cuando pasa de una pantalla amplia de escritorio a un móvil estrecho o a una tablet en vertical.

En otras palabras, un dibujo con CSS no está terminado solo porque “se vea bonito”. Está terminado cuando sigue funcionando bien en distintos contextos reales. Y precisamente ahí está una de las mayores diferencias entre una prueba visual simpática y una pieza verdaderamente sólida de front-end.

Si ya has trabajado antes la construcción de formas, te vendrá bien complementar este tema con el artículo sobre cómo dibujar formas básicas con CSS: círculos, triángulos, óvalos y estrellas, porque entender bien esa base facilita muchísimo después la adaptación responsive.

Por qué el responsive importa tanto al dibujar con CSS

Diseñar una ilustración en CSS sin pensar en responsive es construir algo frágil. Puede funcionar muy bien en tu monitor, pero romperse en cuanto cambian el ancho, la altura disponible o la relación entre ambos. Y en desarrollo web eso no es un detalle menor: es una señal de que la composición depende demasiado de condiciones concretas.

Cuando hablamos de CSS responsive, muchas personas piensan enseguida en media queries. Y sí, forman parte del proceso. Pero la adaptación no consiste solo en añadir un par de cortes en 768px y 1024px. En realidad, se trata de diseñar la ilustración como un sistema flexible, con elementos que puedan crecer, reducirse, recolocarse o incluso simplificarse según el espacio disponible.

Esto es importante por una razón muy práctica: una ilustración también ocupa espacio, genera jerarquía y compite por atención. Si en móvil se descompensa, invade zonas delicadas o pierde legibilidad, deja de aportar y empieza a molestar.

Un dibujo con CSS también es layout

Aquí hay un cambio de mentalidad muy útil: dibujar con CSS también es trabajar el layout. Aunque el resultado final tenga una intención más ilustrativa que funcional, sigue estando construido con cajas, capas, posiciones, alineaciones y relaciones espaciales. No deja de ser una pequeña arquitectura visual.

Eso significa que muchas de las reglas que aplicas al maquetar una interfaz también son válidas cuando haces dibujo con hojas de estilo. Por ejemplo:

  • pensar en proporciones antes que en píxeles fijos,
  • definir qué partes son esenciales y cuáles son decorativas,
  • conservar una jerarquía visual clara,
  • evitar que el detalle dependa de un espacio demasiado optimista.

De hecho, si ya te interesa la idea de reducir ruido y priorizar lo importante, este tema conecta muy bien con por qué diseñar primero lo esencial mejora la experiencia de usuario. En ilustración CSS ocurre algo parecido: cuando falta espacio, lo esencial debe seguir funcionando antes que lo decorativo.

La base de una ilustración responsive: proporción, sistema y escalado

La mayoría de los dibujos en CSS que se rompen lo hacen porque nacen demasiado rígidos. Empiezan con medidas absolutas, posiciones muy cerradas y dependencias frágiles entre elementos. Mientras todo permanece en el mismo contexto, parecen estables. Pero en cuanto cambian las dimensiones del contenedor, aparecen las colisiones visuales.

Por eso, si quieres construir ilustraciones adaptables, necesitas una base más sistémica. No basta con dibujar. Hay que diseñar el comportamiento del dibujo.

Trabaja con un contenedor que actúe como lienzo

Uno de los enfoques más útiles es pensar la ilustración como un lienzo contenido. Es decir, un bloque principal con un ancho controlado, una proporción clara y una estructura interna que dependa de él.

En lugar de decidir que tu dibujo medirá 640 píxeles, suele ser mucho más efectivo definir algo como una anchura máxima razonable y una anchura flexible relativa al viewport. Ese pequeño cambio mejora muchísimo la respuesta del conjunto.

Cuando el contenedor principal se comporta como una referencia estable, el resto de las piezas pueden dimensionarse en porcentajes o mediante variables derivadas. Así, el dibujo deja de depender de un único tamaño ideal.

Mejor proporciones que medidas rígidas

Cuanto más dependa tu ilustración de los píxeles absolutos, menos capacidad de adaptación tendrá. Esto no significa que los píxeles estén prohibidos, sino que conviene usarlos con criterio: como límite, ajuste fino o tamaño mínimo, no como base única de toda la construcción.

En responsive suele funcionar mucho mejor combinar:

  • porcentajes para anchos y posiciones,
  • rem para separaciones o escalas relacionadas con la tipografía,
  • clamp() para establecer un comportamiento fluido con límites,
  • variables CSS para convertir la composición en un pequeño sistema.

Por qué las variables CSS ayudan tanto en ilustración

Las custom properties son especialmente útiles al dibujar con CSS porque te obligan a pensar en relaciones, no en valores sueltos. En lugar de ajustar veinte medidas distintas cada vez que algo se ve grande o pequeño, puedes definir una escala base y hacer que muchas piezas dependan de ella.

Eso simplifica el mantenimiento y, además, reduce la posibilidad de inconsistencias. Si el sol, el personaje, la sombra y los adornos parten de un mismo sistema proporcional, la composición respira mejor en distintas pantallas.

Este enfoque también encaja muy bien con técnicas más avanzadas de construcción visual, como las que comentábamos en pseudo-elementos en CSS: la clave para crear ilustraciones más complejas. Cuando trabajas con capas, ::before y ::after, tener un sistema de medidas coherente se vuelve todavía más importante.

Conservar la proporción evita muchos problemas

Otro de los puntos clave para un buen CSS responsive aplicado a ilustración es conservar una relación razonable entre ancho y alto. Cuando la anchura cambia y la altura queda fijada de forma artificial, la composición suele empezar a deformarse o a sentirse comprimida.

Por eso conviene pensar desde el principio cuál es la proporción natural del dibujo. ¿Es una escena panorámica? ¿Es una composición más vertical? ¿Tiene aire lateral o necesita más espacio en la base? Definir esto desde el inicio evita muchas correcciones posteriores.

Cómo adaptar una ilustración CSS sin que pierda claridad

Uno de los mayores errores al hacer una ilustración responsive es intentar resolverlo todo reduciendo tamaño. Muchas veces el problema no es de escala, sino de densidad visual. Es decir, hay demasiadas cosas ocurriendo en demasiado poco espacio.

En esos casos, encoger no basta. De hecho, a menudo empeora el resultado. Lo que necesitas es simplificar con intención.

No todo debe sobrevivir en móvil

Esto puede parecer contraintuitivo al principio, pero es una de las ideas más útiles de todo el proceso: en responsive, algunas piezas deberían desaparecer.

No hablo de eliminar elementos esenciales del dibujo, sino de filtrar adornos secundarios, pequeñas texturas, sombras complejas o detalles que solo aportan valor cuando el espacio acompaña. Una nube decorativa, unas estrellitas de fondo o una segunda capa ornamental pueden enriquecer una escena en escritorio, pero sobrar completamente en una pantalla pequeña.

Y eso no significa empobrecer el diseño. Significa priorizar. En realidad, muchas veces una ilustración se ve mejor cuando tiene menos ruido y más intención.

Recolocar suele funcionar mejor que miniaturizar

Cuando dos elementos empiezan a chocar entre sí en una pantalla estrecha, la reacción habitual es reducir ambos. Sin embargo, recolocar suele ser una estrategia más eficaz que encoger sin límite.

Por ejemplo, si tienes un personaje centrado con elementos decorativos a ambos lados, en escritorio puede verse equilibrado. En móvil, esos adornos laterales pueden ocupar espacio crítico. En lugar de mantenerlos en la misma posición, quizá conviene mover uno arriba, otro abajo o prescindir de alguno.

Este tipo de decisiones hace que la ilustración mantenga su identidad sin volverse torpe. Y ahí está una de las claves de dibujar con CSS de forma profesional: adaptar la composición, no solo el tamaño.

Piensa en niveles de detalle

Una estrategia muy útil es diseñar el dibujo por niveles:

  • nivel esencial: la forma principal o la silueta reconocible,
  • nivel secundario: detalles que aportan carácter,
  • nivel decorativo: adornos prescindibles.

Este planteamiento te da mucha claridad a la hora de tomar decisiones responsive. Si falta espacio, sabes qué proteger primero. Y además te ayuda a evitar un problema muy común: tratar todas las piezas como si tuvieran la misma importancia.

Media queries, composición y sentido común

Las media queries siguen siendo una herramienta muy válida para adaptar ilustraciones CSS, pero conviene usarlas con criterio. No deberían convertirse en una sucesión de parches para arreglar lo que una base mal planteada ha roto.

Lo ideal es que la ilustración ya tenga una lógica flexible y que los cortes responsive entren solo para refinar. Por ejemplo:

  • ocultar detalles secundarios en tamaños pequeños,
  • reubicar adornos,
  • ajustar proporciones generales,
  • aumentar o reducir aire alrededor de la composición.

Cuando una ilustración depende de diez breakpoints para no desmoronarse, normalmente el problema no está en el número de pantallas, sino en la arquitectura del dibujo.

La importancia de dibujar pensando desde móvil

Aunque no siempre haga falta trabajar con una filosofía mobile first estricta, sí conviene hacerse una pregunta temprana: cuál es la versión mínima viable de esta ilustración.

Si consigues que el dibujo funcione primero en un contexto pequeño, luego será mucho más fácil enriquecerlo en tamaños mayores. En cambio, si diseñas primero una escena muy cargada en escritorio y luego intentas comprimirla, lo más probable es que acabes luchando contra tu propio diseño.

Este principio también se relaciona con otros recursos visuales como clip-path en CSS: cómo recortar formas y crear dibujos más originales. Herramientas como esta pueden ayudarte a crear composiciones muy potentes, pero cuanto más compleja es la construcción, más importante se vuelve pensar en su comportamiento al reducir espacio.

Errores frecuentes al dibujar con CSS responsive

Hay fallos que se repiten muchísimo cuando empezamos a adaptar ilustraciones a distintos tamaños de pantalla. Detectarlos a tiempo puede ahorrarte bastantes horas de prueba y error.

Usar demasiadas posiciones absolutas sin una lógica clara

Las posiciones absolutas son muy útiles en ilustración CSS, pero si todo depende de coordenadas cerradas, el dibujo se vuelve quebradizo. No pasa nada por usarlas, siempre que estén apoyadas en un contenedor estable y en relaciones proporcionales.

Fijar alturas sin pensar en el comportamiento del conjunto

Una altura demasiado rígida suele provocar recortes, amontonamientos o espacios muertos. Muchas ilustraciones se rompen por esto antes incluso de que llegue el problema del ancho.

Sobrecargar el móvil con el mismo detalle que el escritorio

No todas las pantallas necesitan la misma riqueza visual. A veces insistimos en conservar cada decoración “porque forma parte del diseño”, cuando en realidad lo que define el diseño es la idea general, no cada pequeño adorno.

Confundir creatividad con complejidad

Al dibujar con CSS, es fácil caer en la tentación de añadir capas y más capas solo porque técnicamente podemos hacerlo. Pero una ilustración eficaz no siempre es la más compleja. Muy a menudo, la más sólida es la que mejor equilibra expresión visual y control técnico.

Esto se ve muy claro también al construir elementos pequeños y reconocibles, como comentábamos en dibujar iconos sencillos con CSS sin usar SVG ni imágenes. Cuanto más simple parece el resultado, más importante suele ser que las proporciones estén bien pensadas.

Buenas prácticas para que tus dibujos con CSS escalen mejor

Si quieres que tus ilustraciones aguanten bien el paso entre dispositivos, estas prácticas suelen marcar una diferencia real:

  • trabaja con una estructura base clara, no con piezas sueltas;
  • define qué elementos son imprescindibles y cuáles pueden desaparecer;
  • usa proporciones y variables en lugar de confiar solo en píxeles;
  • simplifica antes de encoger;
  • recoloca cuando sea necesario, no fuerces siempre la misma composición;
  • prueba el dibujo en contextos reales, no solo en una ventana redimensionada a ojo.

Este último punto es especialmente importante. A veces algo parece funcionar en el inspector del navegador, pero falla cuando convive con texto real, márgenes de sección, cambios de fuente o contenedores más estrechos dentro de una grid.

Preguntas frecuentes sobre dibujo con CSS responsive

¿Se puede dibujar con CSS y conseguir un resultado realmente adaptable?

Sí, completamente. Pero para ello no basta con construir la ilustración y luego reducirla. La adaptabilidad tiene que formar parte del planteamiento desde el principio. Cuanto más pienses en sistema, jerarquía y proporciones, mejor responderá el dibujo.

¿Es mejor usar píxeles o unidades relativas para una ilustración CSS?

Lo más recomendable es combinar ambas cosas con intención. Los píxeles pueden servir como límite o ajuste fino, pero una ilustración responsive suele comportarse mejor cuando parte de porcentajes, variables CSS y escalas más flexibles.

¿Una ilustración responsive debe verse exactamente igual en todas las pantallas?

No necesariamente. Y, de hecho, esa no debería ser la meta. Lo importante es que mantenga su identidad, su claridad y su equilibrio visual. A veces eso implica que ciertos detalles cambien, se reubiquen o desaparezcan.

La diferencia entre una demo bonita y una ilustración sólida

Dibujar con CSS responsive es mucho más que hacer una ilustración que “quepa” en móvil. Es aprender a pensar visualmente con lógica de sistema. Es entender que una composición no solo debe ser bonita, sino también flexible, legible y coherente en diferentes contextos.

Ahí está, en realidad, uno de los aprendizajes más interesantes de este tipo de ejercicios. Porque te obligan a ir más allá del efecto visual inmediato. Te obligan a preguntarte qué partes sostienen realmente la ilustración, cuáles son accesorias y cómo se comporta todo cuando el espacio deja de ser ideal.

Y esa forma de pensar no solo mejora tus dibujos con CSS. También mejora tu criterio como desarrolladora o desarrollador front-end.

Si tuviera que resumir la idea central de este artículo en una sola frase, sería esta: una buena ilustración con CSS no se diseña como una imagen estática, sino como una composición adaptable. En el momento en que entiendes eso, tu manera de trabajar cambia. Y tus dibujos también.

Cómo instalar y configurar TailwindCSS paso a paso

Posted on by marta
Cómo instalar y configurar TailwindCSS paso a paso

Instalación de Node.js y npm

Asegúrate de tener Node.js y npm instalados en tu sistema. Puedes descargarlo desde Node.js official site.

Crear un proyecto nuevo

Crea una nueva carpeta para tu proyecto y navega a ella en la terminal:

mkdir mi-proyecto
cd mi-proyecto

Instala TailwindCSS

Instala TailwindCSS a través de npm:

npm install -D tailwindcss
npx tailwindcss init

Esto creará un archivo tailwind.config.js en tu proyecto.

Configura TailwindCSS

En tu archivo tailwind.config.js, puedes personalizar la configuración según tus necesidades. Aquí hay un ejemplo básico:


module.exports = {
  content: [
    "./**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configura los archivos CSS

Crea un archivo CSS y agrega las directivas de Tailwind:

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Para añadir un par de plugins a tu configuración de TailwindCSS, sigue estos pasos:

Instalar TailwindCSS y sus dependencias

Instalaremos PostCSS y Autoprefixer:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Crear un archivo de configuración de PostCSS

Crea un archivo postcss.config.js en la raíz de tu proyecto con el siguiente contenido:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },

Añadir plugins en TailwindCSS

Edita el archivo tailwind.config.js para incluir los plugins que deseas usar. Aquí hay dos ejemplos de plugins:

Plugin para tipografía y formularios personalizados

Primero, instala los plugins:

npm install -D @tailwindcss/typography @tailwindcss/forms

Luego, edita tu tailwind.config.js para incluir los plugins:

module.exports = {
  content: [
    './**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

Con estos pasos, has añadido con éxito dos plugins a tu configuración de TailwindCSS: uno para mejorar la tipografía y otro para manejar formularios personalizados.

Compila tu CSS

Configura un script en tu package.json para compilar el CSS:

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

Ejecuta el script:

npm run build

Usa TailwindCSS en tu HTML

Crea un archivo HTML index.html y enlaza tu archivo CSS compilado:


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/styles.css" rel="stylesheet">
  <title>Mi Proyecto con TailwindCSS</title>

  <h1>
    ¡Hola, TailwindCSS!
  </h1>

Ejecuta y prueba

Abre el archivo HTML en tu navegador para ver los estilos aplicados.