एकल Div से बनाई गई CSS कला कृतियाँ

• A Single Div एक CSS drawing प्रयोग है, जो दिखाता है कि सिर्फ एक div से किस तरह की visual expression संभव है
• यह प्रोजेक्ट Lynn Fisher का काम बताया गया है, और इसकी अवधि 2014-2019 दी गई है
• पेज पर GitHub, #divtober, Buy me a coffee आइटम भी साथ में दिखाए गए हैं
• उपलब्ध टेक्स्ट से implementation code, कृतियों की सूची, या बनाने की प्रक्रिया जैसी विस्तृत जानकारी की पुष्टि नहीं होती
• इसकी मुख्य सीमा यह है कि कई HTML elements के बजाय एकल HTML element पर CSS expression को केंद्रित किया गया है

---

प्रोजेक्ट की प्रकृति

• A Single Div एक CSS drawing प्रयोग है, जो “एकल div से क्या संभव है” यह दिखाता है
• पेज पर a CSS drawing project by Lynn Fisher विवरण भी दिखता है
• काम की अवधि 2014-2019 के रूप में दी गई है

पेज पर दिखाई देने वाले आइटम

• GitHub आइटम मौजूद है
• #divtober आइटम मौजूद है
• Buy me a coffee आइटम मौजूद है
• उपलब्ध टेक्स्ट से प्रत्येक आइटम के सटीक लिंक लक्ष्य या अतिरिक्त विवरण की पुष्टि नहीं होती

[GN⁺]

Hacker News की रायें

• पहले आया एक demo याद आ गया। पेज पर content दिखता था, लेकिन View Source करने पर, याद है, वह 0 bytes था
  शायद HTTP headers के ज़रिए CSS reference करने की सुविधा का इस्तेमाल किया गया था, इसलिए HTML में CSS नहीं था, और browser पेज में अपने-आप जोड़ने वाले ज़रूरी elements पर CSS content चिपका रहा था
  • https://news.ycombinator.com/item?id=34464951
  • यह pwnfunction के demo की बात भी हो सकती है
    "This Site Has No Code, or Does It?" https://youtu.be/msdymgkhePo
  • दिलचस्प experiment है, link मिले तो share करें। खुद छूकर देखना चाहता हूं कि अंदर ठीक-ठीक क्या हो रहा है
• 2016 और 2014 में भी इस पर काफी चर्चाएं हुई थीं, और 16 दिन पहले भी Only s नाम का मिलता-जुलता project था
  [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 site कभी-कभी दिलचस्प और अच्छी inspiration देता है, इसलिए share किया। पुराने projects को modern web development के नज़रिए से दोबारा देखना और उन पर चर्चा करना आम तौर पर community के लिए मददगार लगता है
• CSS art करने वाले लोग हमेशा हैरान कर देते हैं। आजकल 3D graphics की तरफ सब कुछ three.js से भरा पड़ा है, लेकिन CSS art की अपनी जगह साफ़ तौर पर है, और लगता है कई लोग उसे भूल जाते हैं या बहुत मुश्किल समझकर गहराई में नहीं जाते
  three.js बड़े scenes बनाने में शानदार है, लेकिन personal website में आने वाला छोटा single-character scene CSS से भी बनाया जा सकता है। कई बार शानदार CodePen देखकर वैसा बनाने की कोशिश में पूरा weekend निकल गया, फिर भी perfect नहीं हुआ
  Internet भले तैयार हो, लेकिन यह कहना मुश्किल है कि Internet से जुड़े ज़्यादातर devices WebGL को सही से support करते हैं। target users पर निर्भर करेगा, लेकिन अपने छोटे घेरे के लिए site बनाने के बजाय ऐसी website बनाना बेहतर है जिसे हर कोई access कर सके
  • CSS art में नयापन है, लेकिन CSS की बहुत बारीक details तक गहराई में जाना पड़ता है, इसलिए developers आम तौर पर इसे prefer नहीं करते लगते। वहीं three.js niche 3D artist/coder community से ऊपर उठकर mainstream में आ रहा है, और यह अपने-आप में अच्छी बात हो सकती है
    फिर भी three.js हर चीज़ का perfect solution नहीं है, और अनावश्यक रूप से फूली हुई websites न बनें, इसके लिए फायदे-नुकसान देखकर इस्तेमाल करना चाहिए
  • इस CSS technique से particle effect buttons generate करने वाला tool कभी बनाया था [0]
    basic shapes से छोटी “image” edit करने पर अपने-आप CSS code export करने वाला tool बनाना हमेशा मज़ेदार idea लगा है; जानना चाहूंगा कि क्या किसी को ऐसा tool पता है
    [0] https://bewelge.github.io/CSS-Button-Particles/ mobile पर UI भयानक दिखता है, लेकिन button effect खुद ठीक काम करेगा
  • सिर्फ CSS से बना bonfire भी एक बार देख सकते हैं (:
    https://megaemce.github.io/Bonfire
• यहां single div का मतलब क्या है, समझ नहीं आ रहा। source देखते हुए div की गिनती छोड़ दी, इसलिए लगता नहीं कि इसका literal मतलब “इस page में सिर्फ एक div है” है; तो फिर मतलब क्या है?
  • हर छोटी doodle एक div से बनी है। और सही कहें तो एक container div है जिसे count नहीं करते, एक main div है जिसे count करते हैं, और content डालने के लिए count न किए जाने वाले ::before और ::after हैं
    creative exercise के तौर पर दिलचस्प है, लेकिन ::before और ::after का दुरुपयोग हमेशा खराब practice लगता है। “clean” HTML चाहने का जुनून बेवकूफी है, और स्पष्ट HTML maintain करना आसान होता है
  • list की हर “picture” single div पर defined CSS rules से render होती है
    आम तौर पर बहुत सारे box-shadow इस्तेमाल करने वाली tricks होती हैं
• ऊपर designer Lynn Fisher के link पर क्लिक करके https://lynnandtonic.com/ गया और संयोग से कुछ खोज लिया
  Chrome window में developer tools खुले रखकर size बदल रहा था, तभी देखा कि resize की direction के हिसाब से logo के अंदर का इंसान रास्ते पर ऊपर-नीचे जा रहा है। सच में कमाल
  • यह नहीं पता था। weekend पर और simple setup में इसे reproduce करके देखना चाहता हूं। जैसे सड़क पर लुढ़कती ball या धरती के ऊपर उड़ता spaceship बनाया जा सकता है
  • लगता है सिर्फ Chrome में, और सिर्फ horizontal resize पर काम करता है
  • background में Daria से जुड़ा reference भी है
• CSS से बने Simpsons याद हैं किसी को? वह भी शानदार था
  https://pattle.github.io/simpsons-in-css/
  • ये भी मज़ेदार थे। अगर यहां mouse position को आंखों की movement के event trigger के तौर पर जोड़ दें, तो Simpsons का काफी credible creepy version बन जाएगा
• mobile पर देख रहा हूं; क्या मतलब है कि हर graphic single div से बनी है? हैरान करने वाला है
  graphic design sense भी अच्छा है
  • हां, सब एक div हैं। technically एक div में ::before और ::after pseudo-elements जुड़े हैं, लेकिन फिर भी सब CSS ही है
• फिर से ऊपर आया देखकर अच्छा लगा। धुंधली-सी याद है, लेकिन काफी समय से नहीं देखा था, और अब भी बेहद impressive है
  • इस site को दोबारा देखना चाहता था लेकिन नाम याद नहीं आ रहा था; अपनी “dump link” folder को और खंगालने के बाद ही मिल पाया
• बढ़िया है, लेकिन अच्छा होता अगर author HTML को थोड़ा बेहतर format कर देता। inspector में ठीक है, पर ऐसी चीज़ें instinctively View Source दबवाती हैं, और whitespace हटाया हुआ है इसलिए practically पढ़ने लायक नहीं है
  • HTML में हर “piece” के लिए सिर्फ एक div है, और दिलचस्प हिस्सा सिर्फ CSS है। हर piece के पीछे का जादू देखने के लिए बस right-click करके Inspect Element करना कहीं बेहतर है
• मुझे यह site सच में बहुत पसंद थी
  • कभी-कभी बस बैठकर इन छोटे pieces को एक-एक करके फिर से बनाने का मन करता है