Dibujar iconos sencillos con CSS sin usar SVG ni imágenes

Posted on by marta

Cuando pensamos en iconografía para una interfaz, lo más habitual es recurrir a SVG, librerías de iconos o imágenes exportadas desde una herramienta de diseño. Es una decisión lógica, práctica y muy extendida. Sin embargo, hay un terreno donde dibujar iconos con CSS sigue teniendo muchísimo sentido: pequeños componentes, microinteracciones, detalles visuales del sistema y elementos geométricos sencillos que no necesitan depender de recursos externos.

Este enfoque no consiste en reemplazar por completo otras soluciones. La clave está en entender cuándo compensa y por qué puede ser útil. En muchos casos, crear iconos con CSS permite reducir dependencias, integrar mejor el estilo visual con el componente y controlar estados interactivos de forma muy natural.

Además, trabajar así obliga a pensar la interfaz de otra manera. No se trata solo de “dibujar”, sino de construir formas con intención. Y ahí aparece una idea muy interesante desde UX: la relación entre tiempo de decisión y carga cognitiva.

Un icono cumple bien su función cuando se entiende casi sin pensar. Si una persona necesita detenerse demasiado para interpretarlo, el tiempo de decisión aumenta. Y cuando eso ocurre, también sube la carga cognitiva. En cambio, si el icono es claro, reconocible y coherente con el sistema visual, la interfaz se vuelve más fluida.

En este artículo vas a ver cómo dibujar iconos sencillos con CSS sin usar SVG ni imágenes, qué propiedades conviene utilizar, qué errores evitar y cómo aplicar este enfoque en componentes reales. La idea no es solo que copies ejemplos, sino que entiendas la lógica visual que hay detrás para poder construir tus propios iconos con criterio.

Cuándo tiene sentido dibujar iconos con CSS

La primera pregunta razonable es esta: si ya existen SVG, librerías y sprites, ¿por qué seguir explorando el dibujo con hojas de estilo?

La respuesta no es que CSS sea mejor en todos los casos. La respuesta correcta es que, en algunos contextos, es una solución suficientemente buena y además muy eficiente.

CSS como herramienta para formas simples

Los iconos hechos con CSS funcionan especialmente bien cuando están formados por:

  • líneas
  • círculos
  • rectángulos
  • esquinas
  • diagonales
  • composiciones muy básicas

Por eso suelen encajar bien iconos como una X de cerrar, un signo más, un signo menos, una flecha, una lupa o un check. Todos ellos comparten una característica: pueden descomponerse visualmente en formas muy simples.

Qué ventajas puede aportar este enfoque

Cuando el contexto acompaña, crear iconos con CSS tiene varias ventajas. La primera es que evitas cargar archivos o dependencias externas para resolver algo muy pequeño. La segunda es que el icono pasa a formar parte del propio sistema de estilos del componente. La tercera es que las transiciones, animaciones y cambios de estado se vuelven muy cómodos de manejar.

También hay una ventaja menos obvia: este enfoque te ayuda a pensar mejor la estructura visual de una interfaz. Te obliga a preguntarte qué forma es realmente necesaria para comunicar una acción.

Cuándo no compensa

Aquí conviene ser claras: no todos los iconos deberían hacerse con CSS. En cuanto el icono necesita detalle, curvas complejas, múltiples capas, precisión de marca o escalabilidad muy fina, SVG suele ser mejor opción.

Dicho de otra manera: CSS es excelente para iconos sencillos, pero no para todo un sistema complejo de iconografía.

Cómo pensar un icono como una construcción geométrica

Para dibujar con CSS hay que cambiar un poco la mentalidad. No estás pintando libremente, sino construyendo a partir de cajas y reglas visuales.

Todo parte de un contenedor

La base habitual de un icono CSS es un elemento contenedor pequeño que servirá como área de dibujo:

<span class="icon icon-close" aria-hidden="true"></span>

Y una base común como esta:

.icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  color: currentColor;
}

Este patrón es simple, pero muy útil. El icono tiene un espacio definido, puede heredar color del contexto y permite posicionar pseudo-elementos dentro de él.

El papel de ::before y ::after

Los pseudo-elementos son casi imprescindibles para este tipo de trabajo. Gracias a ::before y ::after puedes añadir trazos y formas sin meter más HTML.

.icon::before,
.icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

Con este enfoque tienes tres capas principales para dibujar:

  • el propio elemento
  • ::before
  • ::after

Y si además usas box-shadow, puedes duplicar líneas o repetir formas con muy poco código.

Propiedades CSS que más vas a usar

Si quieres trabajar iconos con CSS, estas propiedades te van a acompañar una y otra vez:

  • background
  • border
  • border-radius
  • transform
  • rotate
  • box-shadow
  • gradientes lineales y radiales
  • posicionamiento absoluto

No hace falta recurrir siempre a técnicas avanzadas. De hecho, muchas veces cuanto más simple es la construcción, mejor se entiende y más fácil es de mantener.

Tiempo de decisión y carga cognitiva en iconografía de interfaz

Aquí entramos en un punto clave para que este artículo no se quede solo en la parte técnica.

Un icono no se valora únicamente por cómo está construido, sino por la rapidez con la que comunica. Cuando una persona ve un icono y entiende al instante qué acción representa, el tiempo de decisión baja. Eso significa que la interacción se siente más natural.

En cambio, cuando el icono es ambiguo, recargado o inconsistente con otros iconos del sistema, ocurre lo contrario. El usuario duda más. Tiene que interpretar. Tiene que frenar un segundo. Y ese pequeño freno incrementa la carga cognitiva.

Un icono muy ingenioso no siempre es un buen icono

Este es uno de los errores más comunes cuando se explora el dibujo con CSS: obsesionarse con lo espectacular y olvidar lo legible.

Sí, puede ser divertido construir una forma rebuscada solo con bordes, sombras y rotaciones. Pero si el resultado no se entiende rápido o requiere demasiados ajustes visuales para funcionar, quizá no sea la mejor solución.

La pregunta útil no es solo “¿puedo dibujarlo con CSS?”, sino esta otra: “¿lo entenderá la persona usuaria sin esfuerzo?”

Preparar una base reutilizable para iconos con CSS

Si vas a usar esta técnica en más de un componente, merece la pena preparar una pequeña base reutilizable.

Variables CSS para mantener coherencia

:root {
  --icon-size: 24px;
  --icon-stroke: 2px;
}

Y después:

.icon {
  position: relative;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  color: currentColor;
  flex-shrink: 0;
}.icon::before,
.icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

Esto te permite mantener coherencia entre varios iconos y cambiar el tamaño general sin tener que reescribir toda la colección.

Integración natural con botones y enlaces

Una de las ventajas más claras de los iconos con CSS es que pueden integrarse muy bien dentro de un botón o enlace sin depender de un recurso externo.

.button-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  color: #222;
}

Como el icono usa currentColor, adoptará automáticamente el color del texto del componente. Eso reduce trabajo visual y mejora consistencia.

Ejemplos prácticos de iconos sencillos con CSS

Vamos a la parte más útil: ejemplos concretos.

Cómo dibujar una X de cerrar con CSS

Este es uno de los iconos más agradecidos para empezar.

.icon-close::before,
.icon-close::after {
  top: 50%;
  left: 50%;
  width: 18px;
  height: var(--icon-stroke);
  background: currentColor;
  transform-origin: center;
}.icon-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}.icon-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

Aquí estás usando dos barras y cruzándolas. La idea es simple y funciona muy bien en botones de cerrar, modales, etiquetas y alertas.

Qué conviene vigilar

Si haces la X demasiado fina o pequeña, perderá claridad. Y si el grosor no acompaña, el usuario puede tardar un poco más en procesarla. Aunque parezca un detalle menor, este tipo de ajustes afecta directamente al tiempo de decisión.

Cómo dibujar un icono de más y menos con CSS

Muy útiles para acordeones, controles de cantidad o interfaces expandibles.

Icono de más

.icon-plus::before,
.icon-plus::after {
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}.icon-plus::before {
  width: 18px;
  height: var(--icon-stroke);
}.icon-plus::after {
  width: var(--icon-stroke);
  height: 18px;
}

Icono de menos

.icon-minus::before {
  top: 50%;
  left: 50%;
  width: 18px;
  height: var(--icon-stroke);
  background: currentColor;
  transform: translate(-50%, -50%);
}

Cómo mejorar la interacción

Si el + pasa a - en un acordeón, una transición suave ayuda a que el cambio se perciba con más naturalidad. Una interfaz clara no solo depende de las formas, sino también de cómo cambian esas formas.

Cómo dibujar una hamburguesa de menú con CSS

El clásico menú hamburguesa puede resolverse con muy poco código.

.icon-menu::before,
.icon-menu::after,
.icon-menu {
  background: currentColor;
}.icon-menu {
  width: 18px;
  height: var(--icon-stroke);
  margin-top: 11px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

Aquí el elemento principal funciona como línea central y box-shadow genera las dos líneas extra.

Por qué es una buena solución

Es compacta, ligera y fácil de animar. Eso sí, sigue siendo importante recordar que esconder la navegación tras un menú no siempre mejora la experiencia. En escritorio, muchas veces mostrar las opciones directamente reduce carga cognitiva.

Cómo dibujar una lupa con CSS

La lupa es uno de los mejores ejemplos de iconos sencillos con CSS.

.icon-search::before {
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border: var(--icon-stroke) solid currentColor;
  border-radius: 50%;
}.icon-search::after {
  width: 9px;
  height: var(--icon-stroke);
  background: currentColor;
  right: 2px;
  bottom: 4px;
  transform: rotate(45deg);
  transform-origin: right center;
}

Aquí combinas un círculo y una barra inclinada. La forma es muy estable visualmente y además escala bien en distintos tamaños.

Cómo dibujar un check con CSS

.icon-check::before {
  left: 7px;
  top: 3px;
  width: 7px;
  height: 14px;
  border-right: var(--icon-stroke) solid currentColor;
  border-bottom: var(--icon-stroke) solid currentColor;
  transform: rotate(45deg);
}

Este patrón funciona muy bien en validaciones, listas de ventajas o estados completados.

Qué hace que un check funcione bien

Debe verse claro, limpio y equilibrado. Si queda demasiado estrecho, muy corto o con mala inclinación, deja de leerse con rapidez.

Cómo dibujar flechas con CSS

Las flechas son ideales para enlaces, CTAs y navegación.

Flecha derecha

.icon-arrow-right::before {
  top: 50%;
  left: 4px;
  width: 14px;
  height: 14px;
  border-top: var(--icon-stroke) solid currentColor;
  border-right: var(--icon-stroke) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

Flecha con cuerpo

.icon-arrow-line::before {
  top: 50%;
  left: 3px;
  width: 14px;
  height: var(--icon-stroke);
  background: currentColor;
  transform: translateY(-50%);
}.icon-arrow-line::after {
  top: 50%;
  right: 3px;
  width: 8px;
  height: 8px;
  border-top: var(--icon-stroke) solid currentColor;
  border-right: var(--icon-stroke) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

Una flecha bien construida comunica dirección y avance casi instantáneamente. Esa inmediatez es justo lo que reduce tiempo de decisión.

Ejemplos un poco más avanzados de dibujo con hojas de estilo

Cuando ya controlas trazos, círculos y diagonales, puedes experimentar con formas algo más complejas.

Corazón sencillo con CSS

.icon-heart {
  transform: rotate(-45deg);
}.icon-heart::before,
.icon-heart::after {
  width: 12px;
  height: 18px;
  background: currentColor;
  border-radius: 12px 12px 0 0;
}.icon-heart::before {
  left: 6px;
  top: 6px;
}.icon-heart::after {
  left: 0;
  top: 12px;
  transform: rotate(90deg);
  transform-origin: top left;
}

Este ejemplo ya requiere más cuidado visual. Funciona, pero también deja bastante claro que llega un punto en el que CSS empieza a ser menos natural que SVG.

Casa básica con CSS

.icon-home::before {
  left: 5px;
  bottom: 4px;
  width: 14px;
  height: 10px;
  border: var(--icon-stroke) solid currentColor;
  border-top: none;
}.icon-home::after {
  left: 6px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-top: var(--icon-stroke) solid currentColor;
  border-left: var(--icon-stroke) solid currentColor;
  transform: rotate(45deg);
}

Es un icono muy simple, pero comunica bien la idea de “inicio” o “home” cuando el contexto acompaña.

Animación e interacción: donde CSS aporta mucho valor

Aquí es donde este enfoque gana fuerza. Un icono hecho con CSS no es solo un dibujo: puede convertirse en una parte viva del componente.

Un pequeño desplazamiento en hover

.button-with-icon .icon-arrow-line {
  transition: transform 0.2s ease;
}.button-with-icon:hover .icon-arrow-line {
  transform: translateX(3px);
}

Ese gesto pequeño ayuda a reforzar la idea de avance o navegación.

Transformar menú en cerrar

También puedes convertir una hamburguesa en una X cuando el menú se abre. Este tipo de transformación visual suele resultar muy natural si está bien medida.

La microanimación también influye en la claridad

Una animación adecuada puede acompañar la comprensión del cambio de estado. Una animación excesiva, lenta o innecesaria puede distraer y añadir carga cognitiva. Como casi todo en interfaz, el equilibrio importa más que el efecto.

Errores frecuentes al crear iconos con CSS

Aunque el dibujo “salga”, eso no significa que la solución sea buena.

Forzar CSS cuando el icono ya pide SVG

Este es el error más común. Si la forma necesita demasiados trucos, quizá ya no sea una buena candidata para CSS.

Usar demasiados valores mágicos

Muchos top, left, right y width sin sistema detrás pueden volver el código difícil de mantener.

Dibujar demasiado pequeño

Un icono minúsculo pierde definición y obliga a hacer más esfuerzo visual.

No cuidar la accesibilidad

Si el icono es decorativo, debe ir con aria-hidden="true". Si representa una acción sin texto visible, el botón o enlace debe tener un nombre accesible.

<button aria-label="Cerrar panel">
  <span class="icon icon-close" aria-hidden="true"></span>
</button>

Ser original a costa de la claridad

En iconografía de interfaz, la creatividad tiene que convivir con el reconocimiento inmediato. Si el usuario duda, el sistema pierde claridad.

Buenas prácticas para crear iconos CSS mantenibles

Conviene cerrar la parte técnica con recomendaciones aplicables en proyectos reales.

Usa variables y patrones comunes

Te ayudarán a mantener coherencia entre tamaños, grosores y espaciados.

Piensa primero en la forma mínima necesaria

Antes de escribir código, pregúntate si el icono puede resolverse con dos o tres piezas simples.

Mantén un estilo consistente

No mezcles iconos muy gruesos con otros extremadamente finos si forman parte del mismo sistema.

Prueba siempre a tamaño real

Un icono puede parecer correcto ampliado, pero no funcionar dentro de un botón de 40 píxeles.

Diseña para lectura rápida

La prioridad no es demostrar una técnica ingeniosa, sino hacer que la persona usuaria entienda la acción sin fricción.

Cuándo usar iconos con CSS en un proyecto real

La respuesta más honesta es: úsalos cuando simplifican, no cuando complican.

Funcionan muy bien en:

  • botones de cerrar
  • controles de acordeón
  • microinteracciones
  • estados simples
  • flechas básicas
  • prototipos
  • componentes ligeros

No suelen ser la mejor opción para:

  • sistemas completos de iconografía
  • iconos de marca
  • formas muy orgánicas
  • ilustraciones complejas
  • bibliotecas escalables de gran tamaño

Lo importante no es la pureza técnica, sino elegir lo que mejor resuelve el problema con el menor coste de mantenimiento.

Preguntas frecuentes sobre dibujar iconos con CSS

¿Es recomendable crear todos los iconos de una web solo con CSS?

No suele ser lo más práctico. CSS funciona muy bien para iconos básicos y geométricos, pero cuando el sistema crece o los iconos se vuelven más complejos, SVG suele ofrecer más control y mejor mantenimiento.

¿Los iconos con CSS son buenos para animaciones?

Sí, especialmente para microinteracciones sencillas. Cambios de estado, desplazamientos, rotaciones o transformaciones pequeñas suelen resolverse muy bien con CSS.

¿Dibujar con CSS mejora siempre el rendimiento?

No siempre. Puede evitar recursos externos en casos simples, pero si el icono requiere demasiadas capas, sombras o ajustes complejos, el beneficio deja de ser tan claro.

Iconografía en CSS: cuando la simplicidad mejora la experiencia

Explorar cómo dibujar iconos sencillos con CSS sin usar SVG ni imágenes no es solo un ejercicio técnico. También es una forma muy útil de entrenar criterio visual.

Cuando reduces una forma a líneas, bordes, radios y transformaciones, te obligas a pensar qué parte del dibujo es realmente necesaria para comunicar. Y ese ejercicio conecta directamente con algo esencial en UX: hacer que las decisiones sean fáciles de tomar.

Un icono claro reduce dudas. Un icono ambiguo las aumenta. Un sistema coherente baja la carga cognitiva. Un sistema inconsistente la eleva. Por eso, aunque hablemos de detalles pequeños, estamos hablando de experiencia de usuario en sentido amplio.

En el fondo, dibujar con hojas de estilo no consiste solo en ahorrar un SVG. Consiste en entender cómo una interfaz comunica con la menor fricción posible. Y cuando ese objetivo se cumple, incluso un simple icono puede mejorar mucho más de lo que parece.

Cómo dibujar formas básicas con CSS: círculos, triángulos, óvalos y estrellas

Posted on by marta

Cuando hablamos de dibujar con CSS, mucha gente piensa en pequeños trucos visuales o en experimentos creativos sin demasiada utilidad práctica. Pero lo cierto es que las formas básicas con CSS siguen teniendo muchísimo valor en proyectos reales. No solo sirven para decorar: también ayudan a construir interfaces más ligeras, más coherentes y más fáciles de mantener.

Un círculo, un triángulo, un óvalo o una estrella pueden convertirse en piezas funcionales dentro de un sistema de diseño. Pueden actuar como indicadores, botones, insignias, flechas, ratings o elementos de apoyo visual. Y lo mejor es que, al estar hechos con hojas de estilo, suelen ser más fáciles de adaptar a cambios de color, tamaño, interacción o contexto que una imagen fija.

Además, este tema encaja muy bien con una idea importante en diseño de interfaz: el equilibrio entre tiempo de decisión y carga cognitiva. Porque una forma no solo ocupa espacio. También comunica. Le dice al usuario qué mirar, qué tocar, qué priorizar o qué interpretar.

En este artículo vamos a ver cómo dibujar formas básicas con CSS de forma técnica, clara y útil. Verás ejemplos prácticos, recomendaciones para diseño e interacción y varios criterios para decidir cuándo una forma ayuda de verdad y cuándo empieza a generar ruido visual.

Por qué dibujar con CSS sigue teniendo sentido hoy

Aunque hoy tenemos SVG, canvas, librerías visuales y herramientas de diseño más sofisticadas, dibujar con CSS sigue teniendo sentido en muchos escenarios. Sobre todo cuando hablamos de formas simples que forman parte de componentes de interfaz.

Las ventajas más claras son estas:

  • Reduces dependencias externas.
  • Mantienes la coherencia visual desde el propio CSS del proyecto.
  • Puedes modificar color, tamaño o comportamiento con mucha facilidad.
  • Integras mejor estados interactivos como hover, focus-visible o active.
  • Favoreces el mantenimiento, porque no dependes de múltiples assets para pequeñas piezas visuales.

Por ejemplo, un círculo puede servir para indicar estado, un triángulo puede resolver la flecha de un tooltip, un óvalo puede funcionar como botón tipo cápsula y una estrella puede integrarse en un sistema de valoración.

La clave no está en usar CSS para todo, sino en saber cuándo es una buena decisión.

Cuándo conviene usar CSS para dibujar formas

Usa CSS cuando:

  • la forma es simple
  • necesitas personalizarla fácilmente
  • quieres reutilizarla dentro de un componente
  • quieres animarla o añadir interacción
  • no merece la pena cargar una imagen o un SVG para algo tan básico

Cuándo quizá no es la mejor opción

En cambio, quizá sea mejor recurrir a SVG cuando:

  • la forma es compleja
  • necesitas muchísima precisión
  • el icono tiene demasiados detalles internos
  • quieres controlar trazados complejos
  • el recurso visual tiene más peso gráfico que funcional

Dicho de otra forma: las formas básicas con CSS funcionan especialmente bien cuando forman parte del lenguaje de interfaz, no cuando intentas forzar CSS para resolver ilustraciones complejas.

Qué necesitas entender antes de empezar a dibujar formas con CSS

Antes de meternos con círculos, triángulos, óvalos y estrellas, conviene tener claras algunas bases. La mayoría de formas CSS nacen de combinar cuatro ideas muy sencillas.

Tamaño del elemento

Muchas formas parten de un bloque con width y height.

.shape {
  width: 100px;
  height: 100px;
  background: #cc2b5e;
}

Con eso tienes un cuadrado. A partir de ahí, CSS transforma esa base.

border-radius

Es la propiedad clave para redondear esquinas y crear círculos u óvalos.

Bordes

Los bordes permiten construir triángulos sin necesidad de contenido interno. Es uno de los trucos más conocidos del CSS.

clip-path

Es especialmente útil para recortar formas más complejas, como estrellas o polígonos personalizados.

Pseudo-elementos

::before y ::after te permiten sumar piezas a una forma sin ensuciar el HTML con div extra.

Cómo hacer círculos con CSS

El círculo es la forma más directa de construir. Solo necesitas un elemento cuadrado y redondearlo al 50%.

<div class="circulo"></div>

.circulo {
  width: 120px;
  height: 120px;
  background: #cc2b5e;
  border-radius: 50%;
}

El resultado es un círculo perfecto porque ancho y alto tienen la misma medida.

Dónde usar círculos en una interfaz

Los círculos aparecen muchísimo en diseño digital. Por ejemplo:

  • indicadores de estado
  • avatares
  • botones flotantes
  • puntos de navegación
  • insignias
  • marcadores visuales
  • loaders

Su forma tiene una ventaja clara: destaca rápido y se percibe como compacta y fácil de identificar.

Ejemplo práctico: botón circular interactivo

<button class="circle-button">+</button>
.circle-button {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: #cc2b5e;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}.circle-button:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}.circle-button:focus-visible {
  outline: 3px solid #753a88;
  outline-offset: 4px;
}

Aquí ya no estamos hablando solo de dibujar con CSS, sino de construir un componente con interacción y accesibilidad.

Cómo afecta un círculo al tiempo de decisión

Un botón circular suele transmitir inmediatez. Si está bien ubicado y no compite con demasiados elementos, puede reducir el tiempo de decisión: el usuario lo detecta rápido y entiende que ahí hay una acción destacada.

Pero cuidado. Si llenas la interfaz de círculos, colores potentes, sombras y animaciones, ocurre justo lo contrario: sube la carga cognitiva. El usuario tiene demasiadas señales compitiendo entre sí.

Por eso, incluso cuando una forma funciona técnicamente, conviene preguntarse si también funciona comunicativamente.

Cómo dibujar óvalos con CSS

El óvalo sigue el mismo principio que el círculo, pero cambiando la proporción entre ancho y alto.

<div class="ovalo"></div>

.ovalo {
  width: 180px;
  height: 100px;
  background: #f8e0ea;
  border-radius: 50%;
}

Al mantener el redondeo, pero alterar las dimensiones, aparece la forma ovalada.

Usos habituales del óvalo en diseño UI

Los óvalos tienen una estética más suave y orgánica. Funcionan muy bien para:

  • botones tipo pill
  • etiquetas
  • chips
  • categorías
  • fondos decorativos suaves
  • contenedores de acciones secundarias

Ejemplo práctico: botón cápsula

<a href="#" class="pill-button">Leer más</a>

.pill-button {
  display: inline-block;
  padding: 0.9rem 1.4rem;
  background: #753a88;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pill-button:hover {
  background: #5f2d6f;
  transform: translateY(-2px);
}
.pill-button:focus-visible {
  outline: 3px solid #cc2b5e;
  outline-offset: 4px;
}

Este patrón es muy útil porque el contenido define el tamaño y el acabado sigue siendo ovalado gracias a un border-radius muy alto.

Óvalos y jerarquía visual

Los óvalos suelen aportar cercanía y suavidad. Pero si todas las acciones de una interfaz usan la misma forma redondeada, la jerarquía se aplana. Todo empieza a parecer igual de importante.

Y cuando todo parece igual de importante, el usuario tarda más en decidir. Es decir: más tiempo de decisión y más carga cognitiva.

Aquí CSS no resuelve solo lo visual. También influye en cómo se lee y se prioriza una interfaz.

Cómo hacer triángulos con CSS

El triángulo clásico se construye usando bordes sobre un elemento sin ancho ni alto.

<div class="triangulo"></div>
.triangulo {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #cc2b5e;
}

La forma aparece porque el elemento no tiene caja interior visible y el borde inferior es el único coloreado.

Variantes según la dirección

Triángulo hacia arriba

.triangulo-up {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 60px solid #753a88;
}

Triángulo hacia abajo

.triangulo-down {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 60px solid #753a88;
}

Triángulo hacia la derecha

.triangulo-right {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 50px solid #753a88;
}

Ejemplo práctico: flecha de tooltip

<div class="tooltip">
  Texto del tooltip
  <span class="tooltip-arrow"></span>
</div>
.tooltip {
  position: relative;
  display: inline-block;
  background: #020101;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 10px;
}.tooltip-arrow {
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #020101;
}

Este es uno de los ejemplos más prácticos de formas básicas con CSS en interfaces reales.

Cuándo un triángulo ayuda y cuándo sobra

Un triángulo puede ser muy útil para indicar dirección, procedencia o relación espacial. Pero también se abusa mucho de él. A veces se mete una flecha en todos los tooltips, menús y cajas informativas aunque no haga falta.

Cada forma extra añade una señal visual más. Y cada señal compite por atención. Si una forma no aporta claridad, puede acabar aumentando la carga cognitiva en lugar de reducirla.

Cómo dibujar estrellas con CSS

La estrella ya entra en un terreno algo más avanzado. Hoy, una de las formas más cómodas de resolverla es con clip-path.

<div class="estrella"></div>
.estrella {
  width: 120px;
  aspect-ratio: 1;
  background: gold;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

Aquí lo que haces es partir de una caja y recortarla siguiendo un conjunto de coordenadas.

Ejemplo práctico: estrella para rating

<button class="rating-star" aria-label="Valorar con 5 estrellas"></button>
.rating-star {
  width: 48px;
  aspect-ratio: 1;
  border: none;
  cursor: pointer;
  background: #f5c542;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  transition: transform 0.2s ease, filter 0.2s ease;
}.rating-star:hover {
  transform: scale(1.1);
  filter: brightness(1.05);
}.rating-star:focus-visible {
  outline: 3px solid #753a88;
  outline-offset: 6px;
}

Este patrón encaja muy bien en productos digitales porque combina forma, estado e interacción.

La estrella como símbolo cargado de significado

La estrella no es neutral. Suele comunicar favorito, premio, valoración o destaque. Precisamente por eso conviene usarla con intención.

Si conviertes cualquier cosa “importante” en estrella, la interfaz pierde precisión. El usuario deja de entender qué significa realmente cada símbolo y eso complica la lectura.

Otra vez aparece el mismo criterio: menos ruido visual, más claridad.

Cómo aplicar estas formas a diseño e interacción de forma inteligente

Hasta aquí hemos visto la parte técnica. Ahora toca hablar de diseño de verdad.

Usa círculos para acciones o estados muy concretos

Funcionan muy bien en:

  • botones flotantes
  • indicadores de estado
  • pasos de un proceso
  • puntos de navegación

Usa triángulos para reforzar dirección o procedencia

Son útiles en:

  • tooltips
  • flechas
  • menús desplegables
  • indicadores visuales de apertura o cierre

Usa óvalos para suavizar la lectura de acciones secundarias

Encajan muy bien en:

  • tags
  • botones secundarios
  • labels
  • chips de filtros

Usa estrellas para destacar valoraciones o elementos favoritos

No las conviertas en un recurso decorativo genérico. Funcionan mejor cuando tienen una función clara.

Tiempo de decisión vs. carga cognitiva: la parte que más importa

Este es el punto que puede marcar la diferencia entre un artículo correcto y uno realmente útil.

Cuando introduces una forma en una interfaz, no solo estás resolviendo un detalle visual. Estás afectando a cómo la persona interpreta la pantalla.

Qué es el tiempo de decisión

Es el tiempo que tarda alguien en entender qué acción tiene más peso, qué elemento debe mirar primero o qué camino seguir.

Qué es la carga cognitiva

Es el esfuerzo mental que necesita para procesar toda esa información.

Cómo influyen las formas CSS en esa relación

Una forma bien usada puede reducir el tiempo de decisión:

  • un triángulo señala dirección
  • un círculo destaca una acción
  • un óvalo agrupa contenido de forma amable
  • una estrella subraya una valoración

Pero una forma mal usada hace lo contrario:

  • añade ruido
  • compite con otros elementos
  • genera dudas
  • dificulta la jerarquía visual

En otras palabras: no basta con saber cómo dibujar con CSS. También hay que saber cuándo una forma mejora la comprensión y cuándo solo añade decoración innecesaria.

Un filtro rápido para tomar mejores decisiones

Antes de añadir una forma, pregúntate:

  • ¿aporta significado?
  • ¿refuerza la jerarquía?
  • ¿ayuda a decidir más rápido?
  • ¿encaja con el sistema visual del proyecto?
  • ¿podría resolverse con menos elementos?

Si la respuesta es no en varios puntos, probablemente esa forma no está ayudando tanto como parece.

Errores comunes al dibujar formas básicas con CSS

Hay varios errores que se repiten muchísimo, sobre todo cuando se experimenta con CSS desde un enfoque más visual.

Usar formas porque sí

Que una forma sea vistosa no significa que sea útil. Si no comunica nada, probablemente sobra.

Abusar de tamaños fijos

Un componente que se ve bien a 120 píxeles puede romperse por completo en móvil si no piensas en escalabilidad.

Descuidar la accesibilidad

Si la forma es interactiva, debe tener foco visible, área clicable suficiente y una etiqueta accesible si corresponde.

Recargar demasiado la composición

Sombras, brillos, animaciones, bordes, gradientes, rotaciones y colores intensos al mismo tiempo suelen generar más espectáculo que claridad.

Olvidar el mantenimiento

Una forma muy rebuscada puede parecer brillante en el momento, pero convertirse en un problema cuando tengas que editarla o reutilizarla dentro de tres meses.

Buenas prácticas para usar formas CSS en proyectos reales

Integra estas formas en tu sistema de diseño

No las trates como experimentos aislados. Define variables para color, radio, transición y tamaños.

:root {
  --color-primary: #cc2b5e;
  --color-accent: #753a88;
  --radius-full: 999px;
  --transition-fast: 0.2s ease;
}

Piensa en componentes, no en demos sueltas

No construyas “una estrella bonita”. Construye una estrella que pueda servir como favorito, rating o marcador destacado.

Usa pseudo-elementos cuando tenga sentido

::before y ::after te ayudan a evitar HTML innecesario.

Valida el resultado en contexto

Una forma puede verse bien aislada y funcionar fatal dentro de una interfaz real. Prueba siempre el componente en su contexto.

No confundas creatividad con saturación

Una interfaz no mejora por tener más formas, más adornos o más recursos visuales. Mejora cuando guía mejor.

Preguntas frecuentes sobre dibujar con CSS

¿Es mejor usar CSS o SVG para formas básicas?

Para formas básicas con CSS, como círculos, triángulos, óvalos o estrellas sencillas, CSS suele ser una opción excelente. SVG es mejor cuando necesitas más precisión o complejidad.

¿Dibujar con CSS perjudica el rendimiento?

En general, no. De hecho, puede simplificar recursos en algunos casos. El problema aparece cuando añades demasiados efectos pesados o animaciones innecesarias.

¿Se pueden animar estas formas con CSS?

Sí. Puedes animar escala, rotación, posición, opacidad, color y muchos otros aspectos. La clave está en que la animación tenga una función y no incremente la carga cognitiva sin aportar valor.

Cuando una forma deja de ser adorno y empieza a comunicar

Aprender a dibujar con CSS no consiste solo en memorizar trucos para crear círculos, triángulos, óvalos o estrellas. La parte técnica importa, claro. Pero lo realmente interesante aparece cuando entiendes que cada forma es también una decisión de diseño.

Una forma puede hacer que una interfaz se entienda mejor o puede complicarla. Puede guiar o distraer. Puede reducir el tiempo de decisión o aumentar la carga cognitiva. Y ese es el verdadero criterio que deberías aplicar al usar hojas de estilo para construir elementos visuales.

Por eso, cuando trabajes con formas básicas con CSS, no pienses solo en si puedes hacerlas. Piensa en si merece la pena hacerlas, en qué están comunicando y en cómo afectan a la lectura general de la interfaz.

Pretext: Cómo medir y maquetar texto de alto rendimiento sin tocar el DOM

Posted on by marta

La mayoría de nosotros aceptamos que el navegador se encargue de todo: le das un <div>, un poco de CSS, y él decide dónde cortar las líneas. Pero, ¿qué pasa cuando necesitas un control milimétrico o cuando el rendimiento cae en picado porque tienes miles de nodos de texto?

Aquí entra Pretext, la librería experimental de Cheng Lou (uno de los creadores de ReasonML y figura clave en el ecosistema de React).

¿Qué hace a Pretext diferente?

  • Predecible: El texto se renderiza exactamente igual en cualquier entorno porque tú posees la lógica del layout.
  • Independencia del DOM: Realiza el cálculo de saltos de línea, anchos y alturas directamente en JavaScript/Reason.
  • Velocidad de vértigo: Al no depender de getBoundingClientRect() o de insertar elementos en el DOM para medir, evitas los fatídicos layout thrashing.

Por qué medir texto después de renderizar puede salir caro

El patrón habitual en muchos proyectos es este:

  1. renderizas el contenido,
  2. mides el nodo con el DOM,
  3. descubres que la altura no encaja,
  4. corriges el layout,
  5. y fuerzas un nuevo ciclo visual.

Cuando esto se repite mucho, empiezan los problemas:

  • cards que “bailan” al cargar,
  • rejillas que se reordenan tarde,
  • botones que quedan desalineados,
  • saltos visuales que rompen el ritmo de lectura,
  • y una sensación de interfaz inestable aunque “funcione”.

La propuesta de Pretext: calcular antes, no reaccionar después

La idea base de Pretext se puede resumir así:

si el sistema puede prever cómo se comportará el texto antes de pintar, la interfaz tiene menos que corregir después.

Y eso cambia bastante las reglas del juego. Pasas de un flujo reactivo como este:

render → medir → corregir → repaint

a uno más anticipatorio:

texto → cálculo → layout → render

Ese cambio, que sobre el papel puede parecer pequeño, tiene implicaciones enormes en componentes donde el texto condiciona la estructura visual.

Cómo funciona Pretext: prepare, layout y segmentación

La librería se apoya en una idea sencilla pero potente: separar el trabajo caro del trabajo frecuente.

prepare(): la fase pesada

La función prepare() se encarga del trabajo más costoso. Aquí se procesa el texto, se normaliza, se segmenta y se dejan listas estructuras que luego pueden reutilizarse.

La gracia está en que esta parte no deberías repetirla todo el rato si el contenido no ha cambiado. Es decir, si tienes el mismo excerpt pero cambia el ancho disponible, no necesitas reanalizar todo el texto desde cero una y otra vez.

layout(): la fase rápida

Después entra layout(), que calcula altura, líneas y distribución del contenido según el ancho disponible y el line-height que definas. Esta parte es mucho más ligera y es la que puedes reutilizar en resizes, layouts responsivos o cálculos previos al render.

Ejemplo conceptual básico

import { prepare, layout } from "@chenglou/pretext";

const excerpt = "Baseline no es soporte total: cómo tomar decisiones realistas en front-end sin sobredimensionar el soporte.";
const prepared = prepare(excerpt, '16px "Work Sans"');

const result = layout(prepared, 280, 24);

console.log(result.height);
console.log(result.lineCount);

Este patrón puede parecer pequeño, pero cambia por completo cómo diseñas ciertos componentes. Porque ya no estás esperando a ver qué decide el navegador una vez pintado el contenido: estás llegando al render con información previa.

Tiempo de decisión vs. carga cognitiva: por qué esta librería también importa en UX

Este punto es especialmente interesante porque aquí Pretext deja de ser solo una curiosidad técnica y se convierte en una herramienta útil para pensar diseño e interacción.

Cuando el texto cambia de tamaño tarde, cuando una tarjeta recoloca su contenido al terminar de calcular alturas o cuando un bloque empuja elementos hacia abajo en el último momento, el usuario tiene que rehacer parte de su lectura visual. Aunque ese esfuerzo sea mínimo, existe. Y cuando se acumula, genera fricción.

Por eso aquí encaja muy bien la comparación entre tiempo de decisión vs. carga cognitiva:

  • Sin control previo del layout: el sistema decide tarde, corrige tarde y el usuario interpreta más veces.
  • Con una estrategia más predictiva: el sistema reserva mejor el espacio y el usuario lee con menos interrupciones.

Una interfaz estable no solo “se ve mejor”. También reduce el número de microdecisiones que el usuario tiene que tomar para orientarse. Y eso tiene un impacto directo en comprensión, ritmo de lectura y sensación de calidad.

Esta relación también enlaza bien con temas como la accesibilidad en microinteracciones, donde pequeños cambios en el comportamiento visual o temporal pueden afectar muchísimo a cómo se percibe una interfaz.

Cuando la interfaz salta, el usuario paga el coste

Google lleva tiempo insistiendo en la importancia del CLS (Cumulative Layout Shift), precisamente porque los desplazamientos inesperados del contenido afectan a la calidad percibida. Si quieres profundizar en esa parte, merece la pena revisar la guía de web.dev sobre cómo optimizar los layout shifts y el CLS.

Pero más allá de la métrica, la idea importante es esta: cada corrección tardía del layout le pide algo al usuario. A veces es atención. A veces es paciencia. A veces es reinterpretación visual. Ninguna de esas tres cosas es gratis.

Ejemplos reales de diseño e interacción donde Pretext sí tiene sentido

No todas las interfaces necesitan esta librería. Y justo por eso conviene ver casos concretos donde sí aporta valor real.

Cards editoriales con excerpt variable

Este es probablemente uno de los escenarios más claros. Imagina un grid de posts con:

  • imagen destacada,
  • título con longitud variable,
  • excerpt de varias líneas,
  • y un CTA al final.

Si no controlas bien la altura del texto, el resultado suele ser el típico grid donde unas cards parecen “más largas” que otras, algunos botones quedan a distinta altura y el ritmo visual se rompe.

Con Pretext puedes calcular la altura del excerpt antes de renderizar y reservar un espacio más estable:

const prepared = prepare(post.excerpt, '16px "Work Sans"');
const { height } = layout(prepared, 280, 24);

Y luego usar esa altura en el componente para evitar correcciones tardías.

Ejemplo de uso en una card

function PostCard({ post }) {
  const prepared = prepare(post.excerpt, '16px "Work Sans"');
  const { height } = layout(prepared, 280, 24);

  return (
    <article className="post-card">
      <img src={post.image} alt={post.title} />
      <h2>{post.title}</h2>
      <p style={{ height: `${height}px`, overflow: "hidden" }}>
        {post.excerpt}
      </p>
      <a href={post.url}>Leer artículo</a>
    </article>
  );
}

Este tipo de planteamiento encaja especialmente bien si te interesan también temas de arquitectura y decisión técnica como los que aparecen en Primeros pasos con Astro o qué es Vanilla JS, porque al final todo esto forma parte de la misma conversación: qué merece abstraerse y qué merece resolverse con una aproximación más directa.

Masonry real sin hacks ni estimaciones pobres

Otro caso donde Pretext puede tener bastante sentido es en un masonry donde la altura de cada bloque depende del texto. Muchas implementaciones acaban mezclando:

  • mediciones del DOM,
  • ResizeObserver,
  • recolocaciones posteriores,
  • y pequeños glitches durante la carga.

Si puedes estimar mejor la altura del contenido antes de pintarlo, la distribución inicial de las piezas gana en estabilidad.

const baseHeight = 260;
const excerptHeight = layout(preparedExcerpt, 280, 24).height;
const finalCardHeight = baseHeight + excerptHeight;

Y a partir de ahí colocar cada tarjeta en la columna más baja sin esperar a renderizar primero para descubrir cuánto ocupa.

Textarea auto-resizable con menos fricción

Otro ejemplo muy útil es el de un textarea autoajustable. En muchos casos se resuelve leyendo scrollHeight, pero eso obliga a depender del nodo ya renderizado. Con Pretext, si respetas espacios y saltos de línea, puedes calcular mejor el crecimiento del texto sin ese paso reactivo.

const prepared = prepare(value, '16px Inter', {
  whiteSpace: "pre-wrap"
});

const { height } = layout(prepared, 400, 22);

No siempre será necesario, pero en herramientas de escritura, formularios largos o interfaces donde el texto tenga mucho peso, puede ser una solución bastante elegante.

Herramientas visuales y render en Canvas o SVG

Aquí es donde la librería se vuelve especialmente interesante para proyectos más creativos. Si estás construyendo composiciones tipográficas, generadores visuales, exportaciones a imagen o interfaces que no dependen de un flujo DOM tradicional, poder obtener líneas de texto manualmente es una ventaja enorme.

Si quieres ver esa parte más experimental, merece la pena echar un vistazo a las demos oficiales de Pretext, porque muestran bastante bien hacia dónde apunta la librería más allá del caso típico de una card.

Si quieres profundizar directamente en la fuente, lo mejor es ir al repositorio oficial de Pretext en GitHub.

Preguntas frecuentes sobre la librería Pretext (FAQs)

¿Pretext sustituye a React, Vue o Astro?

No. Pretext no compite con esos frameworks. Se usa junto a ellos cuando necesitas medir y predecir mejor el comportamiento del texto antes de renderizarlo.

¿Es mejor que resolverlo con CSS?

Depende del caso. Para layouts simples, CSS suele ser suficiente y más apropiado. Pretext empieza a tener sentido cuando la alternativa real implica mediciones del DOM, reflows, correcciones posteriores o una interfaz visualmente inestable.

¿Tiene sentido dentro de una estrategia Baseline-first?

Sí, pero no por defecto. Tiene sentido cuando sustituye una complejidad mayor por una solución más controlada. Si introduces la librería sin una necesidad real, probablemente no compense.

El futuro del texto como «Cálculo Matemático»

Para entender por qué Pretext es una genialidad técnica, hay que entender cómo funciona Internet hoy: normalmente, le damos el texto al navegador y este, como un decorador de interiores, decide sobre la marcha dónde «cortar» las frases para que quepan. Este proceso es cómodo, pero lento y a veces impredecible.

Pretext cambia las reglas del juego tratando el texto no como un elemento de diseño, sino como un problema matemático de alta precisión:

  • Adiós a la «adivinación» del navegador: En lugar de pedirle al navegador que mida el texto (un proceso pesado llamado Reflow), Pretext ya conoce las medidas exactas de cada letra de antemano. Es como si el decorador ya trajera los muebles cortados al milímetro en lugar de medirlos en la habitación.
  • Eficiencia algorítmica: Utiliza lógica inspirada en la tipografía de alta gama (como el algoritmo de Knuth-Plass). Esto no solo hace que el texto sea más eficiente de procesar, sino que busca la «belleza visual» de forma automática, evitando huecos extraños entre palabras que los navegadores normales suelen ignorar.
  • Velocidad de ejecución: Al mover todo este trabajo fuera de la vista del navegador y gestionarlo directamente en el motor de JavaScript, se eliminan los cuellos de botella. El resultado es una interfaz que responde de forma instantánea, incluso con volúmenes de datos que harían que una web normal se bloquease.

Pretext es una apuesta por el control absoluto. Nos demuestra que para alcanzar el siguiente nivel de rendimiento en la web, a veces debemos dejar de confiar en las herramientas automáticas del navegador y volver a los fundamentos de la computación: datos puros, cálculos exactos y renderizado inteligente.