Une œuvre d’art CSS créée avec un seul div

 (a.singlediv.com)
2 points par GN⁺ 2024-05-03 | 1 commentaires | Partager sur WhatsApp
  • A Single Div est une expérimentation de dessin en CSS qui montre quelles représentations visuelles sont possibles avec un seul div
  • Le projet est présenté comme un travail de Lynn Fisher, avec une période indiquée de 2014 à 2019
  • La page affiche également des éléments GitHub, #divtober et Buy me a coffee
  • À partir du seul texte fourni, il n’est pas possible de vérifier des détails comme le code d’implémentation, la liste des œuvres ou le processus de création
  • La contrainte centrale est de concentrer l’expression CSS sur un seul élément HTML, plutôt que sur plusieurs éléments HTML

Nature du projet

  • A Single Div est une expérimentation de dessin en CSS visant à voir « ce qu’il est possible de faire avec un seul div »
  • La page affiche également la description a CSS drawing project by Lynn Fisher
  • La période de travail indiquée est 2014-2019

Éléments visibles sur la page

  • Un élément GitHub est présent
  • Un élément #divtober est présent
  • Un élément Buy me a coffee est présent
  • À partir du seul texte fourni, il n’est pas possible de confirmer la destination précise des liens ni des explications supplémentaires pour chaque élément

À lire aussi

1 commentaires

 
GN⁺ 2024-05-03
Avis sur Hacker News
  • Ça me rappelle une démo publiée autrefois. La page affichait du contenu, mais il me semble qu’en faisant Afficher la source, elle faisait 0 octet.
    C’était probablement une fonctionnalité permettant de référencer du CSS via les en-têtes HTTP : il n’y avait pas de CSS dans le HTML, et le CSS ajoutait du contenu aux éléments indispensables que le navigateur insère automatiquement dans la page.
  • Il y avait déjà pas mal de discussions à ce sujet en 2016 et 2014, et il y a 16 jours il y avait aussi un projet similaire, 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
    • Le site a single div est parfois intéressant et une bonne source d’inspiration, alors je l’ai partagé. Revoir d’anciens projets sous l’angle du développement web moderne et en discuter est, dans l’ensemble, utile à la communauté.
  • Les gens qui font du CSS art m’émerveillent toujours. Aujourd’hui, côté graphisme 3D, tout semble bouillonner autour de three.js, mais le CSS art a clairement sa place, et j’ai l’impression que beaucoup l’oublient ou ne creusent pas parce que c’est trop difficile.
    three.js est excellent pour créer de grandes scènes, mais une petite scène avec un personnage unique sur un site personnel peut aussi se faire en CSS. Il m’est souvent arrivé de passer tout un week-end à essayer de reproduire de superbes CodePen sans parvenir à un résultat parfait.
    Internet est peut-être prêt, mais il est difficile de considérer que la majorité des appareils connectés à Internet prennent correctement en charge WebGL. Cela dépend du public visé, mais il vaut mieux créer des sites accessibles à tous plutôt que des sites réservés à son propre petit enclos.
    • Le CSS art a quelque chose de nouveau, mais il faut plonger très profondément dans les détails les plus fins de CSS, ce que les développeurs ne semblent généralement pas apprécier. En revanche, three.js est en train de passer au premier plan dans une communauté de niche d’artistes/codeurs 3D, et cela peut être une bonne chose en soi.
      Cela dit, three.js n’est pas la solution parfaite à tout ; il faut l’utiliser en pesant ses avantages et ses inconvénients pour éviter de créer des sites inutilement gonflés.
    • J’ai déjà créé un outil qui génère des boutons à effet de particules avec cette technique CSS [0].
      J’ai toujours pensé qu’il serait amusant de créer un outil permettant d’éditer de petites “images” à partir de formes de base puis d’exporter automatiquement le code CSS ; je me demande si quelqu’un connaît un outil de ce genre.
      [0] https://bewelge.github.io/CSS-Button-Particles/ Sur mobile, l’interface a l’air horrible, mais l’effet du bouton lui-même devrait bien fonctionner.
    • On peut aussi voir un feu de camp fait uniquement en CSS (:
      https://megaemce.github.io/Bonfire
  • Je ne comprends pas ce que single div veut dire ici. J’ai regardé la source et j’ai abandonné l’idée de compter les div, donc ça ne semble pas vouloir dire littéralement “il n’y a qu’un seul div sur cette page”. Alors qu’est-ce que cela signifie ?
    • Chaque petit dessin est fait avec un seul div. Plus précisément, il y a un div conteneur qui ne compte pas, un div principal qui compte, et du contenu ajouté via ::before et ::after, qui ne comptent pas non plus.
      Comme exercice créatif, c’est intéressant, mais je considère que l’abus de ::before et ::after est toujours une mauvaise pratique. L’obsession d’un HTML “propre” est stupide ; un HTML clair est plus facile à maintenir.
    • Chaque “image” de la liste est rendue par des règles CSS définies sur un div unique.
      Il y a souvent beaucoup de tours de passe-passe à base de box-shadow.
  • J’ai cliqué sur le lien de la designer Lynn Fisher en haut pour aller sur https://lynnandtonic.com/, et je suis tombé sur quelque chose par hasard.
    J’avais les outils de développement ouverts dans une fenêtre Chrome et je la redimensionnais ; selon le sens du redimensionnement, j’ai vu le personnage du logo monter et descendre le chemin. Vraiment génial.
    • Je ne savais pas ça. Ça me donne envie d’essayer de le reproduire ce week-end dans un environnement plus simple. On pourrait faire quelque chose comme une balle qui roule sur un chemin, ou un vaisseau spatial qui vole autour de la Terre.
    • Ça semble ne fonctionner que dans Chrome, et seulement lors du redimensionnement horizontal.
    • Il y a aussi une référence à Daria en arrière-plan.
  • Quelqu’un se souvient des Simpsons faits en CSS ? C’était chouette aussi.
    https://pattle.github.io/simpsons-in-css/
    • Ceux-là étaient amusants aussi. Si on y ajoutait la position de la souris comme déclencheur d’événement pour le mouvement des yeux, ça ferait une version des Simpsons assez convaincante et flippante.
  • Je regarde sur mobile : cela veut dire que chaque graphique a été créé avec un seul div ? Impressionnant.
    Le sens du design graphique est bon aussi.
    • Oui, ce sont tous des div uniques. Techniquement, c’est un div avec les pseudo-éléments ::before et ::after en plus, mais tout reste du CSS.
  • Content de le revoir remonter. J’en avais un vague souvenir, mais je ne l’avais pas vu depuis un moment, et c’est toujours extrêmement impressionnant.
    • Je voulais revoir ce site, mais je ne me souvenais plus de son nom ; j’ai dû fouiller plus profondément dans mon dossier “dump link” pour le retrouver.
  • C’est chouette, mais j’aimerais que l’auteur ait formaté le HTML de manière un peu plus lisible. Dans l’inspecteur ça va, mais ce genre de chose pousse instinctivement à cliquer sur Afficher la source, et comme les espaces ont été supprimés, c’est pratiquement illisible.
    • Le HTML ne contient qu’un div par “œuvre”, et la partie intéressante est uniquement dans le CSS. Pour voir la magie derrière chaque œuvre, il vaut bien mieux faire un clic droit puis Inspecter l’élément.
  • J’aimais vraiment ce site.
    • Parfois, j’ai juste envie de m’asseoir et de recréer ces petites pièces une par une.