Arte CSS extremadamente práctico

Siempre he disfrutado 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 la gente es capaz de crear imágenes tan fluidas y hermosas a partir de pequeñas cajas. Siempre termino investigando las 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 alrededor que dice “eso no es práctico” o “simplemente usa SVG” o algo igualmente 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 a Lynn Fisher ( Twitter , CodePen), una de mis artistas CSS favoritas, transmitir en vivo su proceso de single-div . En algún lugar del fondo de mi mente, asumí que las obras de arte de una sola división se basaban en box-shadows muy complicados, casi un enfoque de pixel art. No estoy seguro de dónde surgió 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 imaginaba: una serie de degradados de fondo en capas, tamaños y posiciones razonables.

Esperar. Yo se como hacer eso. Lo mágico no es la técnica, sino la audacia de convertir unos cuantos degradados en un bloque de queso con pastel dentro.

He usado todas estas propiedades antes en proyectos de clientes. Cree degradados, superponga imágenes en capas, las dimensiones y el color para obtener diversos 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 sencillas herramientas.

En unas pocas semanas, lo estaba usando en producción. Una vez más, no es nada cómodo 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 ya todos los demás fabulosos artistas CSS! Gracias por mostrarnos a todos cuánto más podemos llevar este lenguaje que tanto amamos y las herramientas muy serias que utilizamos todos los días.