Obras de arte CSS hechas con un solo Div

 (a.singlediv.com)
2 puntos por GN⁺ 2024-05-03 | 1 comentarios | Compartir por WhatsApp
  • A Single Div es un experimento de dibujo en CSS que muestra qué tipo de representación visual es posible usando solo un div
  • El proyecto aparece atribuido a Lynn Fisher, y se indica el período 2014-2019
  • En la página también aparecen los elementos GitHub, #divtober y Buy me a coffee
  • Solo con el texto proporcionado no se pueden confirmar detalles como el código de implementación, la lista de obras o el proceso de creación
  • La restricción principal es que la expresión en CSS se concentra en un solo elemento HTML, en lugar de usar varios elementos HTML

Naturaleza del proyecto

  • A Single Div es un experimento de dibujo en CSS para comprobar “lo que es posible con un solo div”
  • En la página también aparece la descripción a CSS drawing project by Lynn Fisher
  • El período de trabajo indicado es 2014-2019

Elementos visibles en la página

  • Hay un elemento de GitHub
  • Hay un elemento #divtober
  • Hay un elemento Buy me a coffee
  • Solo con el texto proporcionado no se puede confirmar el destino exacto de los enlaces ni explicaciones adicionales de cada elemento

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-05-03
Comentarios en Hacker News
  • Me acordó de una demo que había salido antes. Recuerdo que la página mostraba contenido, pero al hacer ver código fuente tenía 0 bytes
    Creo que usaba una función para referenciar CSS mediante headers HTTP, así que no había CSS dentro del HTML, y el contenido se añadía con CSS a elementos obligatorios que el navegador agrega automáticamente a la página
  • Ya hubo bastante discusión relacionada en 2016 y 2014, y hace 16 días también salió un proyecto parecido, Only s
    [0]: https://news.ycombinator.com/item?id=8229072
    [1]: https://news.ycombinator.com/item?id=12091173
    [2]: https://news.ycombinator.com/item?id=40049258
    • El sitio a single div a veces resulta interesante y da buena inspiración, por eso lo compartí. Creo que volver a ver y discutir proyectos viejos desde la perspectiva del desarrollo web moderno suele ayudar a la comunidad
  • La gente que hace arte con CSS siempre me asombra. Hoy en día todo lo de gráficos 3D parece hervir alrededor de three.js, pero claramente hay espacio para el arte con CSS, y siento que mucha gente lo olvida o no profundiza porque es demasiado difícil
    three.js es excelente para crear escenas grandes, pero una escena pequeña con un solo personaje para un sitio personal también se puede hacer con CSS. Muchas veces he intentado recrear CodePens geniales y terminé gastando todo el fin de semana sin dejarlo perfecto
    Puede que internet esté listo, pero cuesta creer que la mayoría de los dispositivos conectados a internet soporten WebGL correctamente. Dependerá de tus usuarios objetivo, pero es mejor hacer sitios accesibles para todos y no solo para tu propio entorno
    • El arte con CSS tiene novedad, pero parece exigir meterse muy a fondo en detalles minúsculos de CSS, así que normalmente no es algo que los desarrolladores prefieran. En cambio, three.js viene empujando desde una comunidad nicho de artistas/coders 3D hacia algo más mainstream, y eso en sí puede ser bueno
      Aun así, three.js no es la solución perfecta para todo, y conviene usarlo sopesando pros y contras para no terminar haciendo sitios inflados sin necesidad
    • Una vez hice una herramienta para generar botones con efecto de partículas usando esta técnica de CSS [0]
      Siempre pensé que sería divertido hacer una herramienta donde editas una pequeña “imagen” con formas básicas y te exporta automáticamente el código CSS; me pregunto si alguien conoce algo así
      [0] https://bewelge.github.io/CSS-Button-Particles/ En móvil la UI se ve horrible, pero el efecto del botón probablemente funcione bien
    • También puedes ver una fogata hecha solo con CSS (:
      https://megaemce.github.io/Bonfire
  • No entiendo qué significa aquí single div. Me rendí contando los divs al ver el código fuente, así que no parece significar literalmente “esta página tiene un solo div”; entonces, ¿qué quiere decir?
    • Cada pequeño dibujo está hecho con un div. Más exactamente, hay un div contenedor que no cuenta, un div principal que sí cuenta, y contenido agregado con ::before y ::after, que no se cuentan
      Como ejercicio creativo es interesante, pero creo que abusar de ::before y ::after siempre es una mala práctica. La obsesión por tener HTML “limpio” es tonta, y un HTML claro es más fácil de mantener
    • Cada “imagen” de la lista se renderiza con reglas CSS definidas sobre un solo div
      Normalmente hay mucha magia con montones de box-shadow
  • Hice clic en el enlace de la diseñadora Lynn Fisher de arriba, entré a https://lynnandtonic.com/ y por accidente descubrí algo
    Tenía abiertas las herramientas de desarrollo en una ventana de Chrome mientras cambiaba el tamaño, y vi a la persona del logo subir o bajar por el camino según la dirección del ajuste. Está increíble
    • No sabía eso. Me dan ganas de intentar recrearlo este fin de semana en un entorno más simple. Parece que se podría hacer algo como una pelota rodando por un camino o una nave volando sobre la Tierra
    • Parece que solo funciona en Chrome, y solo al redimensionar horizontalmente
    • También hay una referencia a Daria en el fondo
  • ¿Alguien recuerda los Simpsons hechos con CSS? Eso también estaba genial
    https://pattle.github.io/simpsons-in-css/
    • Estos también eran divertidos. Si además le conectaras la posición del mouse como disparador del movimiento de ojos, podría quedar una versión bastante inquietante de los Simpsons
  • Lo estoy viendo desde móvil, ¿significa que cada gráfico está hecho con un solo div? Impresionante
    También tiene muy buen ojo para el diseño gráfico
    • Sí, todos son un solo div. Técnicamente es un div con los pseudoelementos ::before y ::after, pero aun así todo es CSS
  • Qué gusto verlo de nuevo. Lo recordaba vagamente, no lo había visto en mucho tiempo, y sigue siendo tremendamente impresionante
    • Quería volver a ver este sitio, pero no recordaba el nombre; tuve que escarbar más en mi carpeta de “dump link” antes de encontrarlo
  • Está genial, pero me gustaría que el autor formateara el HTML para que se vea mejor. En el inspector está bien, pero con algo así a uno le sale por instinto darle a ver código fuente, y como le quitaron todos los espacios, en la práctica es ilegible
    • El HTML solo tiene un div por cada “obra”; la parte interesante es el CSS. Si quieres ver la magia detrás de cada pieza, es mucho mejor hacer clic derecho y inspeccionar elemento
  • Me encantaba este sitio
    • A veces me dan ganas de sentarme y volver a recrear una por una estas pequeñas piezas