Dibujar con CSS

CSS Personal
· 3 min de lectura

Oh, "dibujar con CSS", sí, por supuesto. Esa grandiosa idea de hacer que tu navegador se parezca más a un lienzo de Picasso que a un sitio web. Es básicamente como coger un martillo para ajustar un reloj. Puede funcionar, pero ¿es realmente la herramienta correcta para el trabajo?

Entonces, ¿qué significa "dibujar con CSS"? Bueno, es sencillo: haces arte con un lenguaje diseñado para darle estilo a documentos, no para ser un pincel. Usas Cascading Style Sheets, para crear formas, colores y animaciones.

Claro, porque cuando piensas en CSS lo primero que se te viene a la cabeza es "arte" y no "ayuda, ¿por qué este <div> no está centrado?".

¿Cómo dibujas con CSS?

Imagínate crear un cuadrado. En vez de usar una herramienta de diseño gráfico donde puedes dibujar un cuadrado en unos segundos, te lanzas al abismo de las propiedades de CSS. Entonces acabas con algo así:

<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
</style>

<div class="square"></div>

¡Ahí lo tienes, un cuadrado rojo de 100x100 píxeles! Impresionante. ¡Una obra maestra! Seguro que nadie podría haberlo hecho con una herramienta de diseño en dos clics.

Ahora solo tienes que repetir este proceso unas 1733 veces para crear una ilustración sencilla. Frustrarte porque no puedes hacer que un elemento se ponga detras de otro sin romper el dibujo.

Cuando finalmente termines, te darás cuenta de que no puedes cambiar el tamaño de la ilustración sin tener que reescribir todo el código. Perfecto, ya está. ¡Has dibujado con CSS!

Sin embargo, algunas personas por razones aún desconocidas por la ciencia, deciden crear maravillas artísticas con CSS. He de confesar que yo soy una de esas personas.

¡Además, es super fácil! Solo necesitas dominar un millón de diferentes propiedades y funciones de CSS, entender completamente cómo interactúan entre sí y luego, solo entonces, podrás dibujar una ilustración sencilla que podría haberse hecho en 2 minutos con cualquier programa de diseño. ¿Fácil, verdad?

¿Por qué dibujas con CSS?

Pero, por supuesto, no olvidemos el verdadero espíritu detrás de este desafío, la razón por la que nuestros audaces developers deciden enfrentar la tempestad de divs y selectores: se trata de hackear el lenguaje.

Se trata de coger este humilde instrumento y decir: "No, no te conformes con tus fronteras, CSS. Puedes ser más que un color de fondo, puedes ser arte".

Llevamos CSS más allá de sus convencionalismos mundanos y sumergiéndolo en la euforia de lo absurdo. Cada <div>, cada línea de código, se convierte en una prueba de los límites de tu creatividad. Es el enfoque de un hacker, desafiando las reglas, explorando las posibilidades, forzando a un lenguaje diseñado para lo mundano a convertirse en algo extraordinario, mágico.

Así que, cuando veas una ilustración de La Gioconda hecha con puro CSS, recuerda, no estás viendo solo una imagen. Estás viendo las huellas de un ser indomable, una mente que se negó a aceptar las limitaciones. Un ser irónico, absurdo e incluso masoquista (sobre todo masoquista), pero también audaz, valiente y deslumbrante. Así es cómo veo yo realmente el arte de "dibujar con CSS".

Algunos ejemplos

Aquí tienes algunos ejemplos de dibujos con CSS que he hecho a lo largo de los años. La mayoria son animados, así que te recomiendo que los veas en Instagram:

Por ultimo, un listado de proyectos en codepen con algunos de los mejores dibujos con CSS que he hecho: https://codepen.io/collection/AOYoNV

¿Quién más dibuja con CSS?

Somos pocos, pero aquí tienes algunas cuentas que te recomiendo seguir si te interesan los dibujos con CSS (SPOILER: lo vas a flipar):

¿Conoces a alguien más? ¡Déjalo en los comentarios!

Así que ya sabes, dibujar con CSS: una excelente forma de demostrar tus habilidades de CSS, volverte loco en el proceso y probablemente cuestionarte tus decisiones de vida. 🤪

Nota final

Espero que este post te haya inspirado a adentrarte en el arte de "dibujar con CSS" y te motive a embarcarte en tu propia aventura creativa. Y recuerda, en el mundo del código, ¡las únicas limitaciones son las que te impones tú mismo!

Extra: enlace a La Gioconda en CSS: https://codepen.io/jaysalvat/full/kazzOj

Editado el 11 de Julio, 2023

Editar en GitHub