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

El arte con CSS no tiene pinceles pero tiene truco: 16 impresionantes trabajos, aunque depende de con qué navegador lo veas
3 comentarios Facebook Twitter Flipboard E-mail

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.

Diana Francine
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.

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.

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

Diana Lace
Imagen: Diana Smith
Diana Vignes
Imagen: Diana Smith
Diana Pink
Imagen: Diana Smith.
Diana Zigario
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.

Jay Monalisa
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.

Jutherford Caballo
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.

Witczak Movil
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.

Bianchi Movil
Imagen: Fabrizio Bianchi.

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.

Cordobo Ie
Imagen: Andreas Jacob.
Cordobo Supermario
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.

Dennis Ballena
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.

Jaye Bb8
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.

Snowman
Una animación navideña de Heather Shar.
Krishnan Lovecar
Imagen: Nikhil Krishnan.
Comentarios cerrados
Inicio