CSS-Kunstwerke mit einem einzigen Div erstellen

• A Single Div ist ein CSS-Zeichenexperiment, das zeigt, welche visuellen Darstellungen mit nur einem einzigen div möglich sind
• Das Projekt wird als Arbeit von Lynn Fisher ausgewiesen, der Zeitraum ist mit 2014–2019 angegeben
• Auf der Seite sind außerdem GitHub, #divtober und Buy me a coffee aufgeführt
• Anhand des bereitgestellten Textes lassen sich keine Details wie Implementierungscode, Werkliste oder Entstehungsprozess bestätigen
• Die zentrale Einschränkung besteht darin, die CSS-Darstellung nicht auf mehrere HTML-Elemente, sondern auf ein einziges HTML-Element zu konzentrieren

---

Charakter des Projekts

• A Single Div ist ein CSS-Zeichenexperiment, das untersucht, „was mit einem einzelnen div möglich ist“
• Auf der Seite steht außerdem die Beschreibung a CSS drawing project by Lynn Fisher
• Der Arbeitszeitraum ist mit 2014–2019 angegeben

Auf der Seite erkennbare Elemente

• Es gibt einen GitHub-Eintrag
• Es gibt einen Eintrag #divtober
• Es gibt einen Eintrag Buy me a coffee
• Anhand des bereitgestellten Textes lassen sich weder die konkreten Linkziele der einzelnen Einträge noch zusätzliche Erläuterungen bestätigen

[GN⁺]

Meinungen auf Hacker News

• Erinnert mich an eine Demo, die früher mal gepostet wurde. Auf der Seite wurden Inhalte angezeigt, aber bei Quelltext anzeigen waren es, soweit ich mich erinnere, 0 Byte.
  Vermutlich nutzte sie eine Funktion, mit der man CSS über HTTP-Header referenzieren kann; im HTML selbst war also kein CSS, und das CSS hängte Inhalte an die obligatorischen Elemente an, die der Browser der Seite automatisch hinzufügt.
  • https://news.ycombinator.com/item?id=34464951
  • Vielleicht ist auch die Demo von pwnfunction gemeint:
    "This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo
  • Ein interessantes Experiment; wäre schön, wenn jemand den Link teilt, falls er ihn findet. Ich würde gern selbst damit herumspielen und sehen, was intern genau passiert.
• Auch 2016 und 2014 gab es dazu ziemlich viele Diskussionen, und vor 16 Tagen gab es mit Only s ein ähnliches Projekt.
  [0]: https://news.ycombinator.com/item?id=8229072
  [1]: https://news.ycombinator.com/item?id=12091173
  [2]: https://news.ycombinator.com/item?id=40049258
  • Die Website a single div ist gelegentlich interessant und eine gute Inspirationsquelle, deshalb habe ich sie geteilt. Alte Projekte aus der Perspektive moderner Webentwicklung noch einmal anzusehen und zu diskutieren, ist meiner Ansicht nach meistens hilfreich für die Community.
• Menschen, die CSS-Art machen, finde ich immer wieder erstaunlich. In der 3D-Grafik ist heutzutage alles voll von three.js, aber CSS-Art hat definitiv ihren Platz, und viele scheinen das zu vergessen oder nicht tiefer einzusteigen, weil es zu schwierig ist.
  three.js ist großartig für große Szenen, aber eine kleine einzelne Charakter-Szene auf einer persönlichen Website lässt sich auch mit CSS bauen. Ich habe oft versucht, beeindruckende CodePens nachzubauen, dann ein ganzes Wochenende damit verbracht und es trotzdem nicht perfekt hinbekommen.
  Das Internet mag bereit sein, aber man kann kaum sagen, dass die meisten mit dem Internet verbundenen Geräte WebGL richtig unterstützen. Es hängt zwar von der Zielgruppe ab, aber besser ist es, Websites zu bauen, die für alle zugänglich sind, statt nur für den eigenen Gartenzaun.
  • CSS-Art hat etwas Neues an sich, aber man muss bis in sehr feine Details von CSS vordringen, weshalb Entwickler sie wohl normalerweise nicht bevorzugen. three.js dagegen rückt in einer Nischen-Community aus 3D-Künstlern und Codern in den Mainstream vor, und das kann an sich etwas Gutes sein.
    Trotzdem ist three.js nicht die perfekte Lösung für alles; man sollte es mit Blick auf Vor- und Nachteile einsetzen, damit man keine unnötig aufgeblähten Websites baut.
  • Mit dieser CSS-Technik habe ich einmal ein Tool zum Erzeugen von Partikeleffekt-Buttons gebaut [0].
    Ich dachte immer, es wäre spannend, ein Tool zu bauen, mit dem man kleine „Bilder“ aus Grundformen bearbeitet und das automatisch CSS-Code ausgibt. Ich frage mich, ob jemand so ein Tool kennt.
    [0] https://bewelge.github.io/CSS-Button-Particles/ Auf Mobilgeräten sieht die UI grauenhaft aus, aber der Button-Effekt selbst sollte gut funktionieren.
  • Man kann sich auch ein Lagerfeuer ansehen, das nur mit CSS gebaut wurde (:
    https://megaemce.github.io/Bonfire
• Ich verstehe nicht, was hier mit single div gemeint ist. Beim Blick in den Quelltext habe ich irgendwann aufgegeben, die divs zu zählen, also scheint es nicht wörtlich zu heißen: „Auf dieser Seite gibt es nur ein div.“ Was bedeutet es dann?
  • Jede kleine Kritzelei besteht aus einem div. Genauer gesagt gibt es ein Container-div, das nicht mitgezählt wird, ein Haupt-div, das gezählt wird, und nicht mitgezählte ::before- und ::after-Elemente, über die Inhalte eingefügt werden.
    Als kreative Übung ist das interessant, aber den Missbrauch von ::before und ::after halte ich immer für schlechte Praxis. Die Fixierung auf „sauberes“ HTML ist unsinnig; klares HTML ist leichter zu warten.
  • Jedes „Bild“ in der Liste wird durch CSS-Regeln gerendert, die für ein einzelnes div definiert sind.
    Oft steckt dabei viel Zauberei mit massenhaft box-shadow dahinter.
• Ich klickte oben auf den Link zur Designerin Lynn Fisher, landete auf https://lynnandtonic.com/ und entdeckte zufällig etwas.
  Ich hatte in einem Chrome-Fenster die Entwicklertools geöffnet und änderte die Fenstergröße; je nach Richtung der Größenänderung sah ich, wie die Person im Logo den Weg hinauf- oder hinunterging. Wirklich großartig.
  • Das kannte ich nicht. Macht mir Lust, es am Wochenende in einer einfacheren Umgebung nachzubauen. Man könnte so etwas wie einen Ball machen, der über eine Straße rollt, oder ein Raumschiff, das über die Erde fliegt.
  • Scheint nur in Chrome zu funktionieren und nur beim Ändern der horizontalen Größe.
  • Im Hintergrund gibt es auch eine Referenz auf Daria.
• Erinnert sich jemand an die Simpsons in CSS? Das war auch großartig.
  https://pattle.github.io/simpsons-in-css/
  • Die waren ebenfalls lustig. Wenn man hier die Mausposition als Event-Trigger für die Augenbewegungen anhängt, könnte daraus eine ziemlich überzeugend gruselige Simpsons-Version werden.
• Ich schaue es auf dem Handy an; heißt das, dass jede Grafik mit einem einzigen div gebaut wurde? Erstaunlich.
  Auch der Grafikdesign-Geschmack ist gut.
  • Genau, alles ist ein einziges div. Technisch gesehen ist es ein div plus ::before- und ::after-Pseudoelemente, aber es ist trotzdem alles CSS.
• Schön, dass es wieder hochgekommen ist. Ich erinnere mich vage daran, hatte es aber eine Weile nicht gesehen, und es ist immer noch extrem beeindruckend.
  • Ich wollte diese Website wiedersehen, konnte mich aber nicht an den Namen erinnern; erst nachdem ich weiter in meinem „dump link“-Ordner gewühlt hatte, fand ich sie wieder.
• Es ist zwar cool, aber ich wünschte, der Autor hätte das HTML etwas lesbarer formatiert. Im Inspector ist es in Ordnung, aber bei so etwas klickt man instinktiv auf Quelltext anzeigen, und weil die Leerzeichen entfernt wurden, ist es praktisch unlesbar.
  • Im HTML gibt es pro „Werk“ nur ein div; der interessante Teil ist ausschließlich das CSS. Wenn man die Magie hinter den einzelnen Werken sehen will, ist es viel besser, einfach per Rechtsklick Element untersuchen zu wählen.
• Ich mochte diese Website wirklich sehr.
  • Manchmal möchte ich mich einfach hinsetzen und diese kleinen Stücke eins nach dem anderen nachbauen.