Tek Bir Div ile Yapılan CSS Sanat Eserleri

• A Single Div, yalnızca tek bir div ile hangi görsel ifadelerin mümkün olduğunu gösteren bir CSS çizim deneyidir
• Proje, Lynn Fisher'ın çalışması olarak belirtiliyor ve dönem 2014-2019 olarak gösteriliyor
• Sayfada GitHub, #divtober, Buy me a coffee öğeleri birlikte yer alıyor
• Verilen metinle, uygulama kodu, eser listesi veya yapım süreci gibi ayrıntılar doğrulanamıyor
• Temel kısıt, birden fazla HTML öğesi yerine CSS ifadesini tek bir HTML öğesi üzerinde yoğunlaştırmasıdır

---

Projenin niteliği

• A Single Div, “tek bir div ile neler yapılabileceğini” gösteren bir CSS çizim deneyidir
• Sayfada ayrıca a CSS drawing project by Lynn Fisher açıklaması yer alıyor
• Çalışma dönemi 2014-2019 olarak belirtilmiş

Sayfada görülen öğeler

• GitHub öğesi bulunuyor
• #divtober öğesi bulunuyor
• Buy me a coffee öğesi bulunuyor
• Verilen metinle, her bir öğenin tam bağlantı hedefi veya ek açıklamaları doğrulanamıyor

[GN⁺]

Hacker News yorumları

• Daha önce paylaşılmış bir demo aklıma geldi. Sayfada içerik görünüyordu ama kaynağı görüntüle yapınca 0 bayt olduğunu hatırlıyorum
  Muhtemelen HTTP header üzerinden CSS referanslama özelliğinden yararlanıyordu; yani HTML içinde CSS yoktu ve içerik, tarayıcının sayfaya otomatik eklediği zorunlu öğelere CSS ile ekleniyordu
  • https://news.ycombinator.com/item?id=34464951
  • pwnfunction demosundan da bahsediyor olabilir
    "This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo
  • İlginç bir deney; bağlantıyı bulursan paylaşırsan güzel olur. Biraz kurcalayıp içeride tam olarak ne olduğunu görmek isterim
• 2016 ve 2014'te de bununla ilgili epey tartışma olmuştu; 16 gün önce de Only s diye benzer bir proje vardı
  [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 sitesini zaman zaman ilginç ve ilham verici bulup paylaşmıştım. Eski projelere modern web geliştirme açısından yeniden bakıp tartışmanın genelde topluluğa faydası olduğunu düşünüyorum
• CSS art yapanlar bana hep hayranlık veriyor. Bugünlerde 3D grafik tarafında her yer three.js dolu ama CSS art'ın da kesinlikle yeri var; bence birçok kişi bunu ya unutuyor ya da fazla zor bulduğu için derine inmiyor
  three.js büyük sahneler kurmak için harika ama kişisel bir sitedeki küçük tek karakterlik bir sahne CSS ile de yapılabilir. Güzel CodePen'leri taklit etmeye çalışıp bütün hafta sonunu harcadığım ama yine de tam mükemmel yapamadığım çok oldu
  İnternet hazır olabilir ama internete bağlı cihazların çoğunun WebGL'i düzgün desteklediğini söylemek zor. Hedef kullanıcıya göre değişir elbette ama sadece kendi çevrene değil, herkesin erişebileceği web siteleri yapmak daha iyi
  • CSS art'ın bir yenilik hissi var ama CSS'in çok ince ayrıntılarına kadar inmeyi gerektirdiği için geliştiricilerin genelde tercih etmediğini düşünüyorum. Buna karşılık three.js, niş bir 3D sanatçı/kodlayıcı topluluğundan çıkıp daha ana akıma yaklaşıyor; bu da kendi içinde iyi bir şey olabilir
    Yine de three.js her şey için kusursuz çözüm değil; artılarını ve eksilerini tartıp gereksiz yere şişirilmiş siteler üretmemeye dikkat etmek lazım
  • Bu CSS tekniğiyle parçacık efektli butonlar üreten bir araç yapmıştım [0]
    Basit şekillerle küçük “görseller” düzenleyip otomatik CSS kodu çıkaran bir aracın eğlenceli olacağını hep düşünmüşümdür; böyle bir araç bilen var mı merak ediyorum
    [0] https://bewelge.github.io/CSS-Button-Particles/ Mobilde arayüz korkunç görünüyor ama buton efekti gayet iyi çalışacaktır
  • Sadece CSS ile yapılmış bir kamp ateşine de bakabilirsiniz (:
    https://megaemce.github.io/Bonfire
• Burada single div ile ne kastedildiğini anlamadım. Kaynağa bakarken div saymayı bıraktım; yani kelimenin tam anlamıyla “bu sayfada yalnızca bir div var” demek değil gibi. O halde anlamı ne?
  • Her küçük çizim tek bir div ile yapılıyor. Daha doğrusu sayılmayan bir container div var, sayılan ana div var ve içeriği ekleyen ama sayılmayan ::before ve ::after yapısı var
    Yaratıcı bir alıştırma olarak ilginç ama ::before ve ::after öğelerini aşırı kullanmanın her zaman kötü bir pratik olduğunu düşünüyorum. “Temiz” HTML takıntısı anlamsız; açık ve anlaşılır HTML bakım açısından daha kolay
  • Listedeki her bir “resim”, tek bir div üzerinde tanımlanmış CSS kurallarıyla render ediliyor
    Genelde bolca box-shadow numarası dönüyor
• Üstteki tasarımcı Lynn Fisher bağlantısına tıklayıp https://lynnandtonic.com/ sitesine girince tesadüfen bir şey fark ettim
  Chrome penceresinde geliştirici araçları açıkken boyutu değiştiriyordum; yeniden boyutlandırma yönüne göre logodaki kişinin yolda yukarı ya da aşağı gittiğini gördüm. Gerçekten çok iyi
  • Bunu bilmiyordum. Hafta sonu bunu daha basit bir ortamda taklit etmeyi denemek istiyorum. Yolda yuvarlanan bir top ya da dünyanın üstünde uçan bir uzay gemisi gibi şeyler yapılabilir
  • Sanırım sadece Chrome'da ve yalnızca yatay yeniden boyutlandırmada çalışıyor
  • Arka planda bir Daria referansı da var
• CSS ile yapılmış Simpsons'ı hatırlayan var mı? O da harikaydı
  https://pattle.github.io/simpsons-in-css/
  • Bunlar da eğlenceliydi. Buna fare konumunu göz hareketi için event tetikleyicisi olarak bağlasan, oldukça ikna edici derecede ürkütücü bir Simpsons versiyonu olurdu
• Mobilde bakıyorum; her grafik gerçekten tek bir div ile mi yapılmış? İnanılmaz
  Grafik tasarım gözü de çok iyi
  • Evet, hepsi tek div. Teknik olarak bir div'e ::before ve ::after pseudo-element eklenmiş hali ama sonuçta tamamen CSS
• Yeniden gündeme gelmesine sevindim. Belirsiz şekilde hatırlıyordum ama uzun zamandır görmemiştim; hâlâ çok etkileyici
  • Bu siteyi tekrar görmek istiyordum ama adını hatırlamıyordum; ancak “dump link” klasörümde biraz daha geriye gidince bulabildim
• Güzel ama keşke yazar HTML'i biraz daha okunur biçimde formatlasaymış. Denetleyicide sorun yok ama insan böyle bir şeyde içgüdüsel olarak kaynağı görüntüle'ye basıyor; boşluklar kaldırıldığı için pratikte okunmuyor
  • HTML'de her “eser” için yalnızca bir div var; ilginç olan kısım tamamen CSS. Her eserin arkasındaki sihri görmek istiyorsan sağ tıklayıp öğeyi incele demek çok daha iyi
• Bu siteyi gerçekten çok seviyordum
  • Bazen sadece oturup bu küçük parçaları tek tek yeniden yapasım geliyor