Crea ilustraciones simples con CSS usando bordes, pseudo-elementos, gradientes y transformaciones.
Dibujar con CSS ayuda a entender composición visual, capas y posicionamiento con precisión.
Con pseudo-elementos puedes construir piezas adicionales sin ensuciar el HTML.
No sustituye SVG en ilustraciones complejas, pero es ideal para iconos y elementos decorativos ligeros.
Empieza por círculos, triángulos y cápsulas.
Un círculo es una caja cuadrada con <code>border-radius: 50%</code>.
El triángulo clásico se genera con bordes cuando ancho y alto son 0.
Combinando transformaciones y gradientes puedes crear resultados sorprendentes con poco código.
Una sola etiqueta, varias piezas visuales.
<code>::before</code> y <code>::after</code> permiten añadir formas extra sin añadir nodos HTML.
Esto simplifica tarjetas decorativas, insignias, badges y pequeños iconos.
Crea ilustraciones simples con CSS usando bordes, pseudo-elementos, gradientes y transformaciones.
Código del tema: display: grid; gap: 1rem;
Empieza por círculos, triángulos y cápsulas.
Un círculo es una caja cuadrada con border-radius: 50%.
El triángulo clásico se genera con bordes cuando ancho y alto son 0.
Combinando transformaciones y gradientes puedes crear resultados sorprendentes con poco código.
Una sola etiqueta, varias piezas visuales.
::before y ::after permiten añadir formas extra sin añadir nodos HTML.
Esto simplifica tarjetas decorativas, insignias, badges y pequeños iconos.