Dibujar escribiendo CSS puro

Cuando hablamos de CSS, cascade style sheet, nos referimos al lenguaje usado para escribir en la hoja de estilos de una web.

En ella se listan una serie de propiedades que definen el aspecto y la composición de todos los elementos que forman parte de un sitio web. La hoja de estilos CSS es, por lo tanto, la herramienta más importante para un diseñador web.

En muchas ocasiones los profesionales de otras disciplinas visuales se adentran en el diseño web, también llamado diseño UI (user interface), para ampliar sus conocimientos y poder plasmar sus creaciones en la Red.

Aunque hay muchos conceptos base que son compatibles entre todas las disciplinas del campo visual, como por ejemplo, la teoría del color y la composición, existe una diferencia clave. Se trata del proceso a través del cual el diseñador da forma a lo que tiene en su mente a través de un programa.

Por ejemplo, si queremos crear un cuadrado rosa en Illustrator, activaremos una herramienta específica para ello y le aplicaremos una serie de propiedades con la ayuda de paneles ideados para su objetivo. Todo ello usando el ratón o la tableta, arrastrando y soltando. Esa experiencia es igual en edición de vídeo, motion, editorial, etc.

Una introducción: cómo se ejecuta técnicamente un «dibujo» en CSS

Sin embargo, si queremos hacer esa misma operación en una web, mostrar un cuadrado rosa, debemos escribir con la sintaxis exacta lo que queremos representar para que el navegador web lo muestre. Algo así:

Por lo tanto, todas las propiedades gráficas en diseño web deben escribirse correctamente y en el orden adecuado en la hoja de estilos CSS para que el navegador nos muestre lo que deseamos.

Una vez logramos entender el cambio que supone crear gráficos en un programa como los de Adobe o hacerlo escribiendo en un documento, estamos preparados para admirar y comprender el reto que entraña crear ilustraciones solo con código, también conocidas como dibujos en CSS puro.

De lo más simple a lo más complejo

En Internet podemos encontrar gran cantidad de ejemplos, desde lo más simple, como un muestrario de formas CSS que se logran con distintas combinaciones de propiedades.

Hasta llegar a Diana Smith, la artista que se considera a día de hoy la creadora de las ilustraciones CSS más complejas.

En esta ilustración incluso podemos ajustar parámetros de estilo como cuando elegimos personaje en un videojuego.

Es probable que cuando leas este artículo ya haya cambiado, por eso podemos seguir este increíble ranking de ilustradores CSS.

Seguramente estás pensando que hacer algo así no tiene sentido práctico para el desarrollo web… y es probable que tengas razón.

El CSS puro no es la mejor forma de obtener esos resultados en ilustraciones para diseño web y, además, siempre está el fastidio de que la ilustración se vea distinta dependiendo del navegador que se utilice.

Imagen del artículo Francine, el retrato digital que cambia radicalmente en función del navegador que utilices de Magnet.

Desde el propio inicio de la computación, el afán por obtener una imagen usando los mínimos medios siempre ha estado ahí: las ilustraciones conocidas como ASCII son un claro ejemplo de ello.

Hay cierto magnetismo en dibujar escribiendo, una especie de artesanía digital que puede llegar a ser adictiva, como puede ser el punto de cruz… ¡Que se lo pregunten a Susan Kare!

Quizá si no lo pruebas, no entiendas a estos creadores que han dedicado tantas horas para hacer estas obras intangibles y posiblemente efímeras.

Bocetos de Susan Kare
Bocetos para los iconos del primer Mac de Susa Kare.

Y si te interesa, pero no sabes por dónde empezar, en nuestro Máster Online en Diseño UI y Desarrollo Web aprendemos a dibujar y animar con CSS desde cero.

Dinos lo que piensas

Tu email no se mostrará ;)