Siempre me ha gustado el arte CSS que crea la gente, pero nunca me he aventurado mucho en él. Estoy familiarizado con muchos de los trucos involucrados, pero todavía me sorprende cada vez: la forma en que las personas pueden hacer imágenes tan fluidas y hermosas con pequeñas cajas. Siempre termino buscando en herramientas de desarrollo para ver cómo se hacen las cosas, pero nunca había visto cómo se desarrollaba el proceso.
Cada vez que el arte CSS comienza a llamar la atención, siempre hay alguien que dice “eso no es práctico” o “simplemente usa SVG” o algo similar desdeñoso y aburrido. Es un argumento terrible, incluso si fuera cierto, nadie está obligado a ser práctico en todo momento. Qué mundo tan terrible sería ese.
En octubre, me tomé el tiempo para ver Lynn Fisher (Gorjeo, CodePen), uno de mis artistas CSS favoritos, transmite en vivo su proceso de div único. En algún lugar de mi mente, asumí que la obra de arte de un solo div se basaba en elementos muy complicados. box-shadows: casi un enfoque de pixel art. No estoy seguro de dónde vino esa idea, probablemente vi a alguien hacerlo hace años. Pero su proceso es mucho más “normal” y “práctico” de lo que me había dado cuenta: una serie de degradados de fondo razonablemente dispuestos en capas, tamaños y posiciones.
Esperar. Yo se como hacer eso. No es la técnica lo que es mágico, ¡es la audacia de convertir algunos gradientes en un bloque de queso con pastel adentro!
He usado todas estas propiedades antes en proyectos de clientes. Creé degradados, superpuse imágenes, las dimensioné y las posicioné para varios efectos. Nada de eso es nuevo, complicado o radical. Realmente no aprendí nada sobre el CSS en sí. Pero tuvo un gran impacto en mi percepción de lo que podía lograr con esas herramientas simples.
En unas pocas semanas, lo estaba usando en producción. Una vez más, no es nada sofisticado ni complicado: la fruta madura perfecta donde un SVG personalizado se siente un poco demasiado voluminoso. Este es el efecto que creé, para un proyecto personal, con algunas propiedades personalizadas para facilitar el ajuste:
La semana pasada utilizamos un truco similar como parte de una biblioteca de componentes de cliente oficial y muy práctica. Fue idea de Stacy Kvernmo y funcionó muy bien.
¡Gracias Lynn y todos los demás fabulosos artistas CSS! Gracias por mostrarnos a todos cuánto más podemos impulsar este lenguaje que tanto amamos y las herramientas Very Serious que usamos todos los días.