El extraordinario mundo del arte con CSS y HTML: “pintando” con código en lugar de pinceles
¿Nos creerías si te dijéramos que se puede crear arte solo utilizando códigos y un ordenador? Y no, no nos referimos a poder crear maravillosas páginas web con diseños exclusivos, a dibujar utilizando tabletas gráficas, ni en mejor medida a crear un NFT: hablamos de crear desde cero obras de arte e ilustraciones con puro HTML y CSS.
Qué es HTML y CSS
En primer lugar hablemos de HTML, un lenguaje en donde se utilizan etiquetas para crear la estructura de las páginas en donde navegamos (vendría a ser como el esqueleto de un sitio web). En cuanto al CSS, por otro lado, sería el estilo de esa página web: el lenguaje que nos permite realizar cambios en el diseño y estética de lo que luego va a ser un proyecto o documento HTML.
El mundo del diseño y la programación ha llegado a lugares impensables, pudiéndose crear obras increíbles usando solo HTML y hojas de estilo CSS.
Realmente es fascinante de ver hasta dónde puede llegar el desarrollo web y las herramientas con las que contamos, desde preprocesadores como SASS hasta el uso de grandes bibliotecas y frameworks.
Crear arte con CSS, ¿cómo es posible?
Para Diana Smith, una increíble desarrolladora web especializada en frontend, crear obras en base a códigos es muy posible —y de hecho las realiza de manera sublime. Partiendo de la estructura y luego añadiendo los estilos, la ilustradora logra manipular todos los elementos, tamaños, bordes y sombras para conseguir así un diseño que impacte visualmente y sea atractivo para quienes lo visitan. Y sin lugar a dudas lo consigue.
Como podemos imaginar no es tan rápido como tomar un pincel, óleos, un bastidor y comenzar la obra. Es un camino largo entre códigos de colores, selectores, atributos y valores que requieren de mucha creatividad, imaginación y práctica para poder manipularlos. De esta manera y, aunque tengamos todos estos conocimientos, la práctica hace al maestro. Pero el talento, ¿dónde queda? Es una cuestión de probar, manipular los códigos y poder aumentar la creatividad comenzando con diseños sencillos.
Es por ello que Diana Smith lleva a la programación y a los lenguajes a niveles increíbles para crear nuevos sentidos y significados en relación con el arte. Un arte que posee habilidad, perfeccionismo y talento por donde se mire.
El único “detalle” (si es que se puede decir así) es que las obras de Diana han sido optimizados solo para Google Chrome, por lo que si ingresamos a sus trabajos desde otros navegadores la experiencia se volverá algo distinta, y la obra (el código) que ella creó se podría ver diferente.
Aunque para la ilustradora esto no es un problema, ya que comenzó el programa utilizando determinadas herramientas desde el inicio, sabiendo que no iban a ser compatibles e interpretadas de igual forma por cada navegador.
Manipulando códigos en el mundo del arte con CSS
Ahora bien, puede que Diana Smith nos haya inspirado un poco mostrándonos que en este mundo del arte nada, absolutamente nada, es imposible. Sin embargo, ella no es la única que nos puede llevar a mundos inimaginables, ya que existen otros programadores, diseñadores y desarrolladores frontend que investigan más acerca del arte, el CSS, la ilustración y los dibujos.
Y si bien no todos realizan obras de la dimensión y el detalle de Diana —que como ya observamos, son obras realistas e hiperrealistas— , muchos de ellos exploran el tratamiento de los valores, las luces, las sombras y la animación, por lo que es una excelente forma de acercarse a probar cosas nuevas, innovando y haciéndonos ver al arte y las nuevas maneras de ilustrar desde otra perspectiva.
A continuación os dejamos algunos ejemplos de programadores y diseñadores que hacen arte e ilustraciones utilizando solo CSS. Pongamos el foco en este universo que parece no tener límites de ningún tipo.
- Cassidy: https://codepen.io/cassidoo/
- Sarah Fossheim: https://dev.to/fossheim/i-drew-a-synthesizer-with-html-css-53f
- Julia Miocene: https://codepen.io/miocene/
- Christopher Kirk-Nielsen: https://css-art.com/nintendo-switch-in-css/
- Grzegorz Witczak: https://codepen.io/Wujek_Greg
- Louise Flanagan: https://lou-flan.com/
- Nikhil Krishnan: https://codepen.io/nikhil8krishnan
Finalmente, queda solo una duda relacionada con este mundo: ¿realizar estas obras es ilustrar en sí? ¿No utilizar ni pincel ni lápiz nos aleja de lo artístico? Para nosotros la respuesta está clara: el arte está en los ojos de quien lo mire, por lo que para uno será arte lo que tal vez para otra persona no es realmente.
Es relativo (como las propiedades de los elementos en CSS), aunque para nosotros definitivamente esto es arte; un arte que requiere de talento y una cabeza creativa que supera límites jamás pensados.
En conclusión, con CSS se pueden realizar obras, dibujos, ilustraciones y cosas realmente asombrosas. Solo se trata de manejar esta destreza artística e investigar las numerosas formas de unir códigos, letras y números con el extraordinario mundo artístico.
¿No os parece increíble?
Este artículo ha sido publicado por un colaborador invitado.
Si te gustaría colaborar con Techies. es y publicar un artículo en nuestra web puedes ponerte en contacto con nosotros.
Si te ha gustado el artículo síguenos para no perderte nuestras publicaciones: