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

Anna Martí

Nunca hay que sobreestimar ni la imaginación ni la paciencia de quien se maneja en herramientas de software como puede serel Excelel lenguaje de diseño gráfico CSS(siglas deCascading 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), definiendocolor, 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 interfacesDiana A. Smithes realmente increíble. Ensu webse describe comoexperta en CSSy 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.

La propia diseñadora explica su afición ycó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_urbinaat@vicecanadafor his video production expertise and for being so fun to talk to:https://t.co/fg9xI5qIWH

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 quepuede 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/fReKS0yCLzpic.twitter.com/MdPLNApQ2g

And Netscape Navigator for the true romantics amongst you.pic.twitter.com/hO12KvVoJg

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

Una Monalisa algo borrosa y arte irlandés

El desarrollador y diseñadorJay Salvatdedica ratos libres al arte con CSS y damos con él al encontrarsu Monalisa. De momento no tiene muchos más proyectos con CSS compartidos, más allá del popular cuadro de Leonardo y unreloj animadobastante sencillo.

Por su parte, el desarrolladorJosh Jutherfordse basa en [esta ilustración deZara Picken, siendo su inicio en el mundo del arte con CSS.

Móviles

El polacoGrzegorz Witczaktieneun surtido repertorio de creaciones con CSS, desde elementos web hasta un Carlton bailando. Una de las que destacan eseste móvil, con gran nivel de detalle y que casi parece un render de alguna app o fabricante.

Fabrizio Bianchies otro desarrollador que también dedica ratos al CSS. Ensus composicionesde “CSS Art” vemos también un móvil muy detallado, como el anterior.

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 yun Super Marioen su época inicial en 3D y animado.

Algo más contemporáneo es el experimento deSteve 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 deYiying Lu.

Un BB8 y otros objetos animados

La Fuerza llegó aJaye Renzopara completar este trabajo con CSS. Os ponemos de nuevo una imagen pero se trata deuna animación de BB8, merece la penaverla tal cual.

El desarrollador de software iraníAlireza Sheikholmoloukicuenta convarios 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 deHeather Sharo la romántica caravana animada deNikhil Krishnan.