Aunque muchos consideren que el alcance de estas herramientas de desarrollo web CSS y HTML puedan ser limitadas, existen personas como Diana Smith que sobrepasan los límites de la imaginación para crear arte del siglo XIX utilizando solo código puro.
“Pure CSS Francine”, es el increíble proyecto de Diana Smith donde ilustra obras de arte del siglo XIX usando código HTML y CSS puro, y aunque muchos alegarán en este momento que la diseñadora pudo apostar por SVG (Vectores optimizados para CSS), Smith aclara en su GitHub que estos quedaron destacartados desde hace un tiempo.
CSS puro Francine: Una serie en curso en la que creo arte usando solo CSS y HTML.
Nota: en un momento estaba usando uno o dos elementos SVG, pero finalmente me cansé de ellos y desde entonces se han eliminado, por lo que esta regla ya no se aplica. Sin ofender a SVG.
Las páginas web están compuestas de una parte código en HTML (HyperText Markup language) que es el responsable de que todo lo que ves, luzca de forma estructurada y ordenada. Pero también, cuenta con otra parte compuesta del código CSS (Cascading style sheets, por sus siglas en inglés), se trata de una hoja de estilos que, como su nombre implica, se encarga de proporcionar los estilos a los elementos que componen la web, desde el color del texto, tamaño de imagen, tamaño de las secciones que conforman el sitio web, bordes, sombras y más, con el fin de darle una estética visualmente atractiva al visitante.
Francine, la obra de arte creada con código puro
La impresionante pintura al óleo de Smith está causando revuelo en las redes sociales, principalmente en el entorno de desarrolladores web, pues nadie se puede imaginar que esta ilustración del siglo XIX esté construida a mano prácticamente usando código HTML y CSS puro, sin trucos. Demostrando una vez más lo poderoso que puede ser el dominio de CSS para cualquier desarrollador web.
Tengo que escribir cada elemento primero, y luego escribir una regla de estilo para cada uno de esos elementos, no es tan fácil ni rápido como cargar la pintura en el pincel.
Debido a que la diseñadora utilizó las herramientas Chrome Developer Tools y ‘pintó’ usando el navegador Chrome como determinado, el resultado no será el mismo en otros navegadores, que como algunos saben cuentan con sus intérpretes de CSS diferentes.
Debido a la naturaleza artística de este proyecto, no me he preocupado por la compatibilidad entre navegadores, por lo que la vista previa en vivo probablemente se verá ridícula en cualquier otra cosa que no sea Chrome.
El código incrustado en la siguiente imagen permite que esta ilustración luzca diferente en otros navegadores, pero si estás usando Chrome posiblemente obtengas la visión de Smith.
Smith dice que este proyecto surgió por simple creatividad, solo por arte, y afirma que: “Estos navegadores que fueron creados en el pasado, no anticiparon que la gente estaría haciendo arte CSS; era solo el Internet donde vive la información y todo lo que necesita es un rectángulo y quizás algo de color” y continuó: “Cuando miras esta imagen en diferentes navegadores, estás mirando la historia de Internet y lo que se exigía en ese momento”.
Sin duda el trabajo que hace Smith va mucho más allá de simple diversión, pues este trabajo implica extensas horas de dedicación, kilos de paciencia y arte, ya que cada elemento, cada mínimo detalle requiere de miles de líneas de código y reglas css, además de diferentes pruebas hasta llegar al resultado esperado y aunque existen actualmente infinidades de herramientas que pueden facilitar la ilustración de imágenes, esta diseñadora prefirió la más larga de todas.
“Mucha gente te lo dirá, si estás tratando de aprender programación, encuentra una API gratuita y crea un proyecto a partir de ella“, continuó. “Debería ser lo mismo con CSS, porque en ese momento no estás haciendo nada por un empleador, solo estás jugando con el código, divirtiéndote con el proceso e intentando desafiarte a ti mismo. Y esta es una manera de hacer eso”.
Así que de ahora en adelante tendremos que pensarlo dos veces antes de acudir al diseñador para que haga esa imagen de 16×16, porque Smith ha demostrado que con un conocimiento amplio CSS y toneladas de paciencia, nada es imposible en el mundo del desarrollo web.