El arte con CSS no tiene pinceles pero tiene truco: 16 impresionantes trabajos, aunque depende de con qué navegador lo veas

Nunca hay que sobreestimar ni la imaginación ni la paciencia de quien se maneja en herramientas de software como puede ser el Excel el lenguaje de diseño gráfico CSS (siglas de Cascading Style Sheets, es decir, "hojas de estilo en cascada"). Un lenguaje muy usado para establecer el diseño de webs e interfaces de usuario escritas en HTML o XHTML y que para algunas personas supone un lienzo.

El CSS nace como forma de separar los contenidos y su presentación y fue sobreviviendo como mejor propuesta de lenguaje de diseño frente a otras. Es lo que se usa para definir el aspecto de cada elemento previamente definido con HTML/XHTML (ninguno de todos lenguajes de programación, por cierto), definiendo color, tamaño, tipo de letra, etc., y lo que ocurre cuando se deja volar la imaginación (y se tiene tiempo) son cosas como las que veremos a continuación.

El "truco" del CSS Art y su indiscutible reina: Diana Smith

El trabado de la diseñadora de interfaces Diana A. Smith es realmente increíble. En su web se describe como experta en CSS y casi se le queda corto, viendo obras como las que en la misma web exhibe y que cuesta creer que se hayan hecho con códigos y teclas y no óleos y pinceles.

Imagen: Diana Smith

La propia diseñadora explica su afición y cómo crea estas obras, indicando que su meta es que algo creado con CSS no lo parezca en absoluto. La creación que poníamos antes, "Francine", está inspirada según comenta en una escena de la serie estadounidense 'American Dad', que sale en el vídeo haciendo que lo que saca Smith de ahí sea aún más impresionante.

A big thanks to @tomas_urbina at @vicecanada for his video production expertise and for being so fun to talk to: https://t.co/fg9xI5qIWH
— Diana Smith (@cyanharlow) September 22, 2018

También explica la gracia que tiene esto: el CSS es lo que indica al navegador cómo mostrar la página web, pero no es en sí un *.jpg, *.png o algo que se inserte ni se guarde como archivo. De hecho, lo que veréis en este artículo son todo capturas de pantalla de la imagen o de la página de edición, ya que puede cambiar según en qué navegador se vea.

i tried @cyanharlow's incredible pure css portrait in an old version of opera and well, the disclaimer wasn't lying: "so the live preview will most likely look laughable in anything other than chrome"https://t.co/fReKS0yCLz pic.twitter.com/MdPLNApQ2g
— David Zhou (@dz) May 1, 2018

And Netscape Navigator for the true romantics amongst you. pic.twitter.com/hO12KvVoJg
— Mayowa Tomori (@mdotslash) May 2, 2018

Aquí otras de las creaciones de Smith. Cada una le cuesta unas dos semanas, y aún parece poco viendo los resultados.

Imagen: Diana Smith

Imagen: Diana Smith

Imagen: Diana Smith.

Imagen: Diana Smith.

Una Monalisa algo borrosa y arte irlandés

El desarrollador y diseñador Jay Salvat dedica ratos libres al arte con CSS y damos con él al encontrar su Monalisa. De momento no tiene muchos más proyectos con CSS compartidos, más allá del popular cuadro de Leonardo y un reloj animado bastante sencillo.

Imagen: Jay Salvat

Por su parte, el desarrollador Josh Jutherford se basa en [esta ilustración de Zara Picken, siendo su inicio en el mundo del arte con CSS.

Imagen: Rosh Jutherford.

Móviles

El polaco Grzegorz Witczak tiene un surtido repertorio de creaciones con CSS, desde elementos web hasta un Carlton bailando. Una de las que destacan es este móvil, con gran nivel de detalle y que casi parece un render de alguna app o fabricante.

Imagen: Grzegorz Witczak.

Fabrizio Bianchi es otro desarrollador que también dedica ratos al CSS. En sus composiciones de "CSS Art" vemos también un móvil muy detallado, como el anterior.

Imagen: Fabrizio Bianchi.

En Xataka

El grandioso mundo del Excel Art: 21 hojas de cálculo hechas obras de arte

Una de clásicos

Andreas Jacob (o Córdobo) es un desarrollador que también dedica ratos a experimentar con el CSS Art, y parece que le tire más el rollo retro. Aquí vemos en todo su explendor y un Super Mario en su época inicial en 3D y animado.

Imagen: Andreas Jacob.

Imagen: Andreas Jacob.

Algo más contemporáneo es el experimento de Steve Dennis. Basándose en ese "juego" con el CSS según el navegador, propone que veamos su creación: la ballena de Twitter, creación de Yiying Lu.

La ballena de Twitter reinterpretada por Steve Dennis, de modo que si tenemos un navegador con Webkit (Safari, Chrome) se ve como la de arriba (pero animada). El resultado de abajo es tal y como se ve con Internet Explorer.

Un BB8 y otros objetos animados

La Fuerza llegó a Jaye Renzo para completar este trabajo con CSS. Os ponemos de nuevo una imagen pero se trata de una animación de BB8, merece la pena verla tal cual.

Imagen: Jaye Renzo.

El desarrollador de software iraní Alireza Sheikholmolouki cuenta con varios proyectos de este tipo, entre los que hay un Papá Noel y una animación del año nuevo persa (nowrooz). También encontramos motivos navideños en las creaciones de Heather Shar o la romántica caravana animada de Nikhil Krishnan.