Karya Seni CSS yang Dibuat dengan Satu Div

• A Single Div adalah eksperimen menggambar dengan CSS yang menunjukkan ekspresi visual apa saja yang bisa dibuat hanya dengan satu div
• Proyek ini ditandai sebagai karya Lynn Fisher, dengan periode 2014-2019
• Di halaman tersebut, item GitHub, #divtober, dan Buy me a coffee ditampilkan bersama
• Hanya dari teks yang diberikan, detail seperti kode implementasi, daftar karya, atau proses pembuatannya tidak dapat dipastikan
• Batasan utamanya adalah memusatkan ekspresi CSS pada satu elemen HTML, bukan menggunakan banyak elemen HTML

---

Karakter proyek

• A Single Div adalah eksperimen menggambar dengan CSS untuk melihat “apa yang mungkin dilakukan dengan satu div”
• Di halaman tersebut juga ditampilkan deskripsi a CSS drawing project by Lynn Fisher
• Periode pengerjaannya ditampilkan sebagai 2014-2019

Item yang terlihat di halaman

• Ada item GitHub
• Ada item #divtober
• Ada item Buy me a coffee
• Hanya dari teks yang diberikan, target tautan spesifik atau penjelasan tambahan untuk tiap item tidak dapat dipastikan

[GN⁺]

Komentar Hacker News

• Teringat demo yang pernah muncul dulu. Konten muncul di halaman, tapi seingat saya saat view source ukurannya 0 byte
  Mungkin menggunakan fitur yang memungkinkan CSS dirujuk lewat header HTTP, jadi tidak ada CSS di dalam HTML, lalu CSS menempelkan konten ke elemen-elemen wajib yang otomatis ditambahkan browser ke halaman
  • https://news.ycombinator.com/item?id=34464951
  • Bisa juga yang dimaksud demo dari pwnfunction
    "This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo
  • Eksperimen yang menarik; kalau menemukan tautannya, bagus kalau dibagikan. Saya ingin mengutak-atiknya langsung dan melihat persis apa yang terjadi di dalamnya
• Pada 2016 dan 2014 juga ada cukup banyak diskusi terkait, dan 16 hari lalu juga ada proyek serupa, 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
  • Situs a single div kadang menarik dan memberi inspirasi bagus, jadi saya membagikannya. Meninjau kembali proyek lama dari sudut pandang pengembangan web modern dan mendiskusikannya umumnya bermanfaat bagi komunitas
• Orang-orang yang membuat CSS art selalu mengagumkan. Belakangan ini di dunia grafis 3D, semuanya ramai memakai three.js, tetapi jelas ada tempat untuk CSS art, dan sepertinya banyak orang melupakannya atau tidak mendalaminya karena terlalu sulit
  three.js hebat untuk membuat adegan besar, tetapi adegan kecil dengan satu karakter untuk situs pribadi pun bisa dibuat dengan CSS. Sering kali saya mencoba meniru CodePen keren dan menghabiskan seluruh akhir pekan, tapi hasilnya tetap belum sempurna
  Internet mungkin sudah siap, tetapi sulit mengatakan bahwa sebagian besar perangkat yang terhubung ke internet mendukung WebGL dengan baik. Tergantung target penggunanya, tetapi lebih baik membuat situs web yang dapat diakses semua orang, bukan situs hanya untuk lingkungan sendiri
  • Ada kebaruan dalam CSS art, tetapi tampaknya developer biasanya tidak menyukainya karena harus menyelami detail CSS yang sangat rinci. Sebaliknya, three.js sedang naik menjadi arus utama dari komunitas 3D artist/coder yang nis, dan itu sendiri bisa jadi hal yang baik
    Tetap saja, three.js bukan solusi sempurna untuk semuanya, dan sebaiknya dipakai dengan mempertimbangkan plus-minusnya agar tidak membuat situs web yang membengkak tanpa perlu
  • Saya pernah membuat tool untuk menghasilkan tombol efek partikel dengan teknik CSS ini [0]
    Saya selalu berpikir akan menarik kalau ada tool yang memungkinkan kita mengedit “gambar” kecil dari bentuk dasar lalu otomatis mengekspor kode CSS; penasaran apakah ada yang tahu tool semacam itu
    [0] https://bewelge.github.io/CSS-Button-Particles/ Di mobile UI-nya terlihat buruk sekali, tetapi efek tombolnya sendiri semestinya bekerja dengan baik
  • Bisa juga melihat api unggun yang dibuat hanya dengan CSS (:
    https://megaemce.github.io/Bonfire
• Saya tidak mengerti apa arti single div di sini. Saya melihat source lalu menyerah menghitung jumlah div, jadi sepertinya bukan berarti secara harfiah “halaman ini hanya punya satu div”; kalau begitu maksudnya apa?
  • Setiap coretan kecil dibuat dari satu div. Lebih tepatnya, ada div container yang tidak dihitung, div utama yang dihitung, serta ::before dan ::after yang tidak dihitung untuk memasukkan konten
    Sebagai latihan kreatif memang menarik, tetapi menurut saya menyalahgunakan ::before dan ::after selalu praktik yang buruk. Obsesi menginginkan HTML yang “bersih” itu konyol, dan HTML yang jelas lebih mudah dipelihara
  • Setiap “gambar” dalam daftar dirender dengan aturan CSS yang didefinisikan pada satu div
    Biasanya banyak trik yang memakai banyak sekali box-shadow
• Saya mengeklik tautan desainer Lynn Fisher di bagian atas dan masuk ke https://lynnandtonic.com/, lalu tanpa sengaja menemukan sesuatu
  Saya sedang mengubah ukuran jendela Chrome dengan developer tools terbuka, dan melihat orang di dalam logo naik-turun jalan tergantung arah perubahan ukurannya. Benar-benar keren
  • Saya tidak tahu soal ini. Jadi ingin mencobanya sendiri dalam lingkungan yang lebih sederhana akhir pekan ini. Sepertinya bisa dibuat seperti bola yang menggelinding di jalan atau pesawat luar angkasa yang terbang di atas Bumi
  • Sepertinya hanya bekerja di Chrome, dan hanya saat mengubah ukuran horizontal
  • Ada juga referensi terkait Daria di latar belakang
• Ada yang ingat Simpsons yang dibuat dengan CSS? Itu juga keren
  https://pattle.github.io/simpsons-in-css/
  • Yang ini juga menyenangkan. Kalau posisi mouse dijadikan pemicu event untuk gerakan mata, sepertinya akan menjadi versi Simpsons yang lumayan meyakinkan sekaligus menyeramkan
• Saya melihatnya di mobile; maksudnya tiap grafik dibuat dengan satu div? Menakjubkan
  Selera desain grafisnya juga bagus
  • Benar, semuanya satu div. Secara teknis bentuknya satu div ditambah pseudo-element ::before dan ::after, tetapi tetap semuanya CSS
• Senang melihat ini naik lagi. Saya ingat samar-samar, tetapi sudah lama tidak melihatnya, dan tetap sangat mengesankan
  • Saya ingin melihat situs ini lagi, tetapi tidak ingat namanya, jadi baru bisa menemukannya setelah menggali lebih jauh folder “dump link” saya
• Memang keren, tetapi saya berharap penulisnya memformat HTML agar sedikit lebih enak dilihat. Di inspector memang baik-baik saja, tetapi hal seperti ini secara naluriah membuat kita menekan view source, dan karena whitespace-nya dihapus, praktis tidak bisa dibaca
  • HTML-nya hanya punya satu div per “karya”, dan bagian yang menarik hanya CSS. Untuk melihat sihir di balik tiap karya, jauh lebih baik cukup klik kanan lalu inspect element
• Saya sangat menyukai situs ini
  • Kadang saya hanya ingin duduk dan mencoba membuat ulang potongan-potongan kecil ini satu per satu