Création d'œuvres artistiques avec une seule Div

(a.singlediv.com)

2 points par GN⁺ 2024-05-03 | 1 commentaires | Partager sur WhatsApp

Présentation du projet A Single Div

Projet de dessin CSS mené par Lynn Fisher de 2014 à 2019
Objectif : créer plusieurs illustrations avec CSS en n'utilisant qu'une seule balise HTML ``
Le projet est mené sur le dépôt GitHub #divtober
Il est possible de soutenir le projet via le lien "Buy me a coffee"
Le lien "View more single divs ⇨" permet de voir davantage d'œuvres Single Div

Utiliser uniquement le CSS pour représenter des graphismes variés est un sujet à la fois stimulant et intéressant pour les développeurs web ; ce projet peut être un bon exemple de l'exploitation du CSS jusqu'à ses limites en termes de fonctionnalités et d'expressivité.
La contrainte de dessiner avec une seule balise `` peut au contraire stimuler la créativité. Elle offre une occasion aux développeurs d'apprendre et d'expérimenter de nouvelles techniques CSS.
Comme avec des défis de type Code Golf, créer le résultat voulu avec un minimum de code peut renforcer les compétences en résolution de problèmes des développeurs.
En revanche, en environnement de production réel, il faut aussi tenir compte des performances et de la maintenabilité, donc ce type d'approche peut être difficile à appliquer tel quel. Il est donc souhaitable d'utiliser ce projet uniquement à des fins d'apprentissage et d'expérimentation CSS.
J'espère que ce projet créatif de Lynn Fisher saura inspirer de nombreux développeurs web et stimuler leur intérêt et leur passion pour le CSS.

GN⁺ 2024-05-03

Présentation d’un projet de démonstration impressionnant qui dessine les personnages de la famille Simpson avec une seule balise HTML `` grâce au CSS.
Même si le rendu est très visible dans l’inspecteur des outils de développement du navigateur, la lisibilité est jugée très mauvaise en mode affichage du code source.
Des projets d’art CSS similaires ont déjà été l’objet de nombreuses discussions actives sur Hacker News par le passé.
Même si l’art CSS est bien plus complexe et prend bien plus de temps que des bibliothèques graphiques 3D comme three.js, il peut quand même être une meilleure option en matière d’accessibilité web.
Il a été constaté que cela fonctionne bien aussi sur mobile, et la qualité du graphisme graphique a été saluée.
Certains ont noté quelques ralentissements sur les MacBook équipés de puce M1.
Les participants se disent curieux de savoir ce que signifie exactement « une seule div » et quelles techniques ont été utilisées.