単一のDivで作るCSSアート作品

 (a.singlediv.com)
2 ポイント 投稿者 GN⁺ 2024-05-03 | 1件のコメント | WhatsAppで共有
  • A Single Div は、1つの div だけでどのような視覚表現が可能かを示す CSSドローイング実験
  • プロジェクトは Lynn Fisher の作品として表示され、期間は 2014-2019 と案内されている
  • ページには GitHub、#divtober、Buy me a coffee の項目があわせて配置されている
  • 提供されたテキストだけでは、実装コード、作品一覧、制作過程のような詳細情報は確認できない
  • 中核となる制約は、複数のHTML要素ではなく 単一のHTML要素 にCSS表現を集中させる点にある

プロジェクトの性格

  • A Single Div は、「単一の div でできること」を確かめるCSSドローイング実験
  • ページには a CSS drawing project by Lynn Fisher という説明も表示されている
  • 制作期間は 2014-2019 と表示されている

ページで確認できる項目

  • GitHub の項目がある
  • #divtober の項目がある
  • Buy me a coffee の項目がある
  • 提供されたテキストだけでは、各項目の具体的なリンク先や追加説明は確認できない

関連記事

1件のコメント

 
GN⁺ 2024-05-03
Hacker Newsのコメント
  • 以前投稿されていたデモを思い出した。ページにはコンテンツが表示されるのに、ソースを表示すると0バイトだった記憶がある
    おそらくHTTPヘッダーでCSSを参照できる機能を使っていて、HTML内にはCSSがなく、ブラウザがページに自動追加する必須要素にCSSで内容を付け加える方式だったのだと思う
  • 2016年と2014年にも関連する議論がかなりあり、16日前にも似たプロジェクト 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
    • a single div のサイトは時々興味深く、良いインスピレーションになるので共有していた。古いプロジェクトを現代のWeb開発の観点から見直して議論するのは、たいていコミュニティの役に立つと思う
  • CSSアートをやる人たちにはいつも驚かされる。最近の3Dグラフィックス界隈は何でもthree.js一色だが、CSSアートが使われる場面は確かにあるし、多くの人がそれを忘れているか、難しすぎて深く掘り下げていない気がする
    three.jsは大きなシーンを作るには素晴らしいが、個人サイトに入れる小さな単一キャラクターのシーン程度ならCSSでも作れる。すごいCodePenを真似して作ってみようとして、週末を丸ごと使ったのに完璧にはならなかったことが何度もある
    インターネットは準備できているかもしれないが、インターネットにつながった大多数のデバイスがWebGLをきちんとサポートしているとは言いがたい。対象ユーザー次第ではあるが、自分の囲い込み向けではなく、誰でもアクセスできるWebサイトを作るほうが望ましい
    • CSSアートには新鮮さがあるが、CSSの非常に細かい部分まで深く入り込まなければならないので、開発者は普通あまり好まないようだ。一方で three.js はニッチな3Dアーティスト／コーダーのコミュニティから主流へ押し上げられつつあり、それ自体は良いことかもしれない
      それでもthree.jsがあらゆるものの完璧な解決策ではないので、不要に肥大化したWebサイトを作らないよう長所と短所を見て使うべきだ
    • このCSS手法で パーティクル効果ボタン を生成するツールを作ったことがある [0]
      基本図形で小さな「画像」を編集すると自動でCSSコードを出力するツールがあれば面白いとずっと思っていたが、そういうツールを知っている人がいるのか気になる
      [0] https://bewelge.github.io/CSS-Button-Particles/ モバイルではUIがひどく見えるが、ボタン効果自体はちゃんと動くはず
    • CSSだけで作ったたき火も見られる (:
      https://megaemce.github.io/Bonfire
  • ここでいう single div が何を意味するのかわからない。ソースを見ながらdivの数を数えるのを諦めたので、文字どおり「このページにはdivが1つしかない」という意味ではなさそうだが、では何を指しているのか？
    • 小さな落書きひとつひとつが divひとつ でできている。より正確には、数えないコンテナdivがあり、数えるメインdivがあり、さらに数えない ::before と ::after で内容を追加する構造だ
      創造的な練習としては面白いが、::before と ::after の乱用は常に悪い慣行だと思う。「きれいな」HTMLにこだわるのは愚かで、明確なHTML のほうが保守しやすい
    • リスト内の各「絵」は 単一のdiv に定義されたCSSルールでレンダリングされている
      たいてい box-shadow を大量に使ったトリックが多い
  • 上部のデザイナー Lynn Fisher のリンクを押して https://lynnandtonic.com/ に入ったら、偶然何かを見つけた
    Chromeのウィンドウで開発者ツールを開いたままサイズを調整していたところ、調整する方向によってロゴの中の人物が道を上り下りするのが見えた。本当にすごい
    • これは知らなかった。週末にもっと単純な環境で再現してみたくなった。道の上を転がるボールや、地球の上を飛ぶ宇宙船のようなものも作れそうだ
    • Chromeでのみ、しかも横方向のサイズ変更でだけ動くようだ
    • 背景に Daria の参照もある
  • CSSで作った Simpsons を覚えている人はいる？ あれもすごかった
    https://pattle.github.io/simpsons-in-css/
    • これらも面白かった。ここにマウス位置を目の動きのイベントトリガーとして付ければ、かなりそれっぽい不気味なSimpsons版になりそうだ
  • モバイルで見ているのだけど、各グラフィックが 単一のdiv で作られているという意味？ 驚いた
    グラフィックデザインのセンスもいい
    • そう、全部divひとつだ。技術的にはdivひとつに ::before と ::after の疑似要素が加わった形だが、それでも全部CSSだ
  • また上がってきてうれしい。ぼんやり記憶はあるが、しばらく見ていなかったし、今見ても本当に印象的だ
    • このサイトをまた見たかったのに名前が思い出せず、自分の「dump link」フォルダをさらに掘ってようやく見つけられた
  • すごいのは確かだが、作者にはHTMLをもう少し見やすく整形してほしい。インスペクタでは問題ないが、こういうものは本能的にソースを表示したくなるし、空白が削られていて実質読めない
    • HTMLは「作品」ごとにdivがひとつあるだけで、面白いのはCSSだけだ。各作品の背後にある魔法を見たいなら、右クリックして要素を検証するほうがずっといい
  • このサイトが本当に好きだった
    • たまにはただ座って、こういう小さな作品をひとつずつ作り直してみたくなる