Una espectacular imagen creada sólo con CSS es la mejor demostración de lo que es posible hacer con los navegadores web modernos.

Las páginas web que cargas en tu navegador no son más que texto, interpretado de cierta manera; la mayoría de los detalles visuales que ves se consiguen con CSS, hojas de estilo que el navegador lee e interpreta. Por ejemplo, para cambiar el color del texto o del fondo, o para variar la forma y el tamaño del texto, etc.

Con los años y la llegada de nuevos estándares, CSS ha evolucionado hasta ser capaz de hacer mucho más. Las posibilidades son inmensas, y ya hay auténticos artistas digitales con creaciones escritas sólo en CSS.

Una espectacular imagen creada sólo con CSS

Diana Smith, cyanharlow en Github, es una de estas artistas, como ha demostrado con su última creación; se llama Pure CSS Francine, y es una imagen creada sólo con CSS que podría perfectamente acabar como un cuadro en una mansión.

Este retrato de una mujer ha sido creado al estilo del siglo XIX; la diferencia respecto a otros trabajos similares es que no ha sido dibujado con un programa de edición de imágenes, ni es un artista con una tableta de dibujo.

No, toda la imagen ha sido generada a partir de código. Cuando abrimos la “imagen”, el navegador sólo recibe texto, y se encarga de convertirlo en la imagen que vemos.

imagen css 1

Una cosa es cambiar el color de fondo, pero ¿conseguir todos los efectos y detalles de la imagen? Eso necesita dedicación y muchos conocimientos. Cada elemento de la imagen ha sido escrito en HTML y CSS, de manera independiente, para formar la imagen.

Lo malo de crear imágenes de esta manera, es que depende de cómo el navegador interprete ese código; y aunque la industria ha avanzado mucho en adoptar estándares únicos, aún queda algo que avanzar en este sentido.

Su propia creadora advierte que ha creado la imagen pensando en Chrome, por lo que en el navegador de Google podremos ver la imagen exactamente como la imaginó.

imagen css 4

Sin embargo, con otros navegadores modernos no deberíamos tener problemas. En Firefox hemos notado algunas ligeras diferencias, sobre todo en las líneas que separan los elementos de la imagen (fíjate en el cuello o en la frente), pero más o menos es la misma imagen.

No podemos decir lo mismo de navegadores antiguos. Así se ve en Opera 10, por ejemplo:

imagen css 3

Puedes ver la imagen accediendo al siguiente enlace: