हाई-रेज़ोल्यूशन ग्लास इफेक्ट के लिए CSS जनरेटर

• glass3d generator एक ऐसा टूल है जिसमें सेटिंग्स बदलते हुए ग्लास टेक्सचर CSS को तुरंत preview और copy किया जा सकता है
• मुख्य adjustment values backdrop-filter के blur, brightness, saturation, साथ ही color और texture selection से बनी हैं
• colors को HSL और alpha values से handle किया जाता है, और example value hsl(189 80% 10% / 0.2) है
• texture में rice paper, egg shell, ink jet, coarse, topology में से चुना जा सकता है
• generated CSS .glass3d, ::before, ::after, और child elements के z-index को combine करके background filter, noise texture, inner shadow, और content layer को अलग-अलग करता है

---

glass3d generator में adjust की जा सकने वाली values

• settings बदलने पर result interface पर ही तुरंत apply हो जाता है
• तैयार CSS को copy करके इस्तेमाल किया जा सकता है
• मुख्य setting items ये हैं
  • backdrop-filter
  • blur
  • brightness
  • saturation
  • color
  • texture

generate होने वाली CSS structure

• .glass3d class CSS variables और layer reference define करती है
  • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
  • --color-glass3d: hsl(189 80% 10% / 0.2)
  • --noise-glass3d: transparenttextures.com का egg-shell.png
  • position: relative, z-index: 4, और कई levels के box-shadow का इस्तेमाल करती है
• .glass3d::before background filter और texture apply करता है
  • -webkit-backdrop-filter और backdrop-filter में var(--filter-glass3d) का इस्तेमाल करता है
  • background-color और background-image में क्रमशः color variable और noise variable लगते हैं
  • background-size: 100px, background-repeat: repeat set करता है
• .glass3d::after inner highlight shadow जोड़ता है
  • कई inset box-shadow values का इस्तेमाल करता है
• .glass3d > * content को ऊपर दिखाने के लिए position: relative और z-index: 6 apply करता है

[GN⁺]

Hacker News की राय

• इस तरीके में सतह के ठीक पीछे वाले pixels के आधार पर ही blur लागू होने की समस्या है, और इसे https://www.joshwcomeau.com/css/backdrop-filter/#the-issue पर अच्छी तरह दिखाया गया है
  https://news.ycombinator.com/item?id=42302907 की चर्चा के साथ पढ़ने लायक है। अगर background नीचे से move कर रहा हो, तो सिर्फ ठीक पीछे वाले pixels को blur करने की समस्या काफी अहम है; static background हो तो आम तौर पर ज्यादा मायने नहीं रखती

  • Josh का शानदार लेख पढ़कर tutorial भी implement किया, लेकिन SVG mask से border-radius handle करने वाले हिस्से में दिक्कत आई
    hardcoded element में तो ठीक चला, लेकिन ऐसी पूरी component library में इसे कैसे चलाया जाए, जहां user की branding और container queries के हिसाब से border-radius बदलता है, यह अभी सुलझाना बाकी है
  • Josh का समाधान भी intuitively गलत लगता है। लगता है जैसे वह पास के elements को light emitters मान रहा हो, लेकिन web के “materials” में by default ऐसी physical property होती है, ऐसा मानना मुश्किल है
    इसके बजाय default material को कागज के ज्यादा करीब मानना बेहतर लगता है
  • यह कहना मुश्किल है कि कौन सा तरीका ज्यादा सही है। default तरीका frosted glass के ठीक पीछे मौजूद object को approximate करता है, जबकि adjusted तरीका काफी दूर मौजूद object की नकल करता है
    मेरे लिए adjusted version depth cues से टकराता है, इसलिए वह कहीं ज्यादा distracting और ज्यादा गलत दिखता है

• काफी अच्छा दिखता है, लेकिन glass की refractive nature न हो तो Liquid Glass का सबसे बड़ा योगदान मानी जाने वाली मजबूत layer separation की feeling खत्म हो जाती है
  Material में designers के लिए बेहतरीन resources हैं, जो side-view 3D में दिखाते हैं कि app को consistent moving layers से बना होना चाहिए। लेकिन जब इसे 2D में मिला दिया जाता है, तो यह ढूंढना बहुत मुश्किल हो जाता है कि कौन सा feature कहां है। कोने में मौजूद action button को लोग सचमुच अक्सर देख ही नहीं पाते
  motion, chrome और content को अलग करने में थोड़ा मदद करता है, लेकिन visually define करने वाले elements बहुत कम हैं। Liquid Glass की सबसे बड़ी खूबी मुझे edge distortion लगती है। content move होने पर non-linear motion बनता है, और human vision उसे तुरंत पकड़ लेती है
  static screenshot हमेशा अच्छे नहीं दिखते, लेकिन motion में elements की separation अब तक देखी चीजों से कहीं बेहतर होती है। human motion detection का खूब फायदा उठाने वाला मुख्य refraction element यहां गायब है
  पहले एक और शानदार web demo देखा था, लेकिन अब ढूंढना मुश्किल है; उसकी जगह यह demo mobile पर performance में खराब और visually भी कम अच्छा है, लेकिन काम कितना जटिल है, यह step-by-step अच्छी तरह दिखाता है। सिर्फ SVG filters से edge distortion implement करना काफी कठिन रास्ता है: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
  Liquid Glass attempts का एक collection (CodePen Spark) भी मिला, और दूसरा link मुझे एक बहुत specifically pre-defined hardcoded SVG से बनाया गया काफी अच्छा example लगता है: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

  • लगता है Apple ने Liquid Glass के जरिए एक चतुर moat बनाया है। खराब versions आसानी से बनाए जा सकते हैं, लेकिन उन्होंने ऐसा effect चुना है जिसे सच में सही तरीके से बनाना बहुत मुश्किल है
    लोग रोज असली glass देखते हैं, इसलिए क्या real और सही लगता है, इसकी intuition उनके पास होती है। इसलिए copycats साफ तौर पर ज्यादा खराब दिखते हैं, और Apple अपना “premium दिखने वाला” product image बनाए रख सकता है
  • मैं सहमत हूं कि Liquid Glass का edge distortion शानदार दिखता है, और बाद में इसे खुद recreate करने की सोच रहा हूं
    मौजूदा project में लक्ष्य ऐसा material बनाना था जो polished महसूस हो, browsers में consistently काम करे, और real 3D का उपयोग न करे। यह बात भी सही है कि fixed background पर move करते समय effect ज्यादा अच्छा दिखता है। जिस library demo site पर काम कर रहा हूं, वहां ऐसा कर रहा हूं, लेकिन वह अभी ready नहीं है
  • refraction effect का न होना मेरे हिसाब से अच्छा ही है। frosted glass भी मुझे पहले से थोड़ा ambiguous लगता है, और refraction effect तो सच में नापसंद है। बहुत ज्यादा distracting है और कुछ situations में हमेशा बदसूरत दिखना तय है
    मुझे पता है कि असली glass ऐसा behave करता है, लेकिन मैं इसकी परवाह नहीं करना चाहता। लगता है जैसे skeuomorphism के सबसे खराब हिस्से को चुनकर दोगुना जोर दिया गया हो, और iOS 7 से पहले वाला design ज्यादा पसंद करने के बावजूद मुझे ऐसा ही लगता है

• effect अच्छा है, लेकिन मुझे यह असली glass जैसा महसूस नहीं होता
  सबसे immediate फर्क यह है कि light bevel के साथ interact नहीं करती। मैं उम्मीद करता हूं कि light glass के अंदर वापस जाए और lighting और color को भी प्रभावित करे। सिर्फ blur डालना काफी नहीं है
  साथ ही glass की अपनी shadow और दिलचस्प caustic patterns हो सकते हैं। यहां shadow दिखती है, लेकिन simple drop shadow जैसी लगती है, इसलिए यह किसी नए flow का हिस्सा बने 3D physical object के बजाय flat card जैसा दिखता है
  खैर, सिर्फ CSS से इसकी नकल करना आसान नहीं है, और GPU पर चलने वाला shader ज्यादा उपयुक्त लगता है

  • अगर CSS से नहीं हो सकता, तो क्या करना चाहिए, समझ नहीं आता। किसी सामान्य div पर GPU shader effect कैसे apply किया जा सकता है? अगर basic HTML पर GPU effects apply नहीं कर सकते और किसी arbitrary Canvas combination जैसे custom element पर करना पड़े, तो शायद GPU effects apply कर सकने वाला पूरी तरह नया rendering engine फिर से बनाना बेहतर होगा
    HTML मुझे dead लगता है। text deliver करने के लिए कुछ tags काफी हैं, और बाकी ज्यादातर web pages को ad bomb बनाने में इस्तेमाल होता है। इसलिए <text> tag और बेहतर GPU integration के साथ फिर से शुरुआत करना और बाकी सब हटाना बेहतर होगा

• मैंने एक JavaScript version बनाया है जो page के elements को सच में refract करता है: https://real-glass.vercel.app/

  • Safari में frosted effect काम नहीं करता

• ऐसी चीज़ें इकट्ठा कर रहा/रही हूँ: https://github.com/swyxio/spark-joy
  दूसरे resources में glassmorphism design spec पर आधारित मुफ्त CSS generator https://ui.glass/generator/, frosted glass fixed header https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen और in context हैं

  .blur-and-rotate {  
  border-radius: 20px;  
  backdrop-filter: blur(20px) hue-rotate(120deg);  
  -webkit-backdrop-filter: hue-rotate(120deg);  
  }  
  

  • ASCII font generator ढूँढा था, लेकिन दिख नहीं रहा, इसलिए अपना इस्तेमाल किया जाने वाला एक tool छोड़ रहा/रही हूँ: https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=He...

• वाकई बहुत बढ़िया बनाया है। यह देखकर हमेशा हैरानी होती है कि computer graphics कोई “एक अजीब-सी तरकीब” नहीं, बल्कि एक के ऊपर एक रखी 5 तरकीबों जैसा है
  browser compatibility तक मिलाना एक अतिरिक्त मुश्किल है। उत्सुक हूँ कि किस हिस्से में सबसे ज्यादा resources लगते हैं, इसका कोई अंदाज़ा है क्या। सीधे सोचें तो backdrop-filter ही लगता है

  • सही है, implementation में इतनी सारी tricks लगेंगी यह नहीं सोचा था
    आपका intuition सही है, और सबसे resource-heavy हिस्सा backdrop-filter का blur processing है। blur value जितनी बड़ी होती है, rendering से पहले उतने ही ज्यादा neighboring pixels को “reference” करना पड़ता है
    एक और महँगा factor यह है कि scroll करने पर या video background से glass का look बदलने पर इसे लगातार फिर से draw करना पड़ता है
  • कभी-कभी किसी चीज़ को “center align” करने के लिए भी 5 layers वाली trick चाहिए होती है

• लगता है यह मेरी glass implementation जैसी technique इस्तेमाल करता है: https://news.ycombinator.com/item?id=42225481
  खासकर box-shadow का जरूरत से ज्यादा इस्तेमाल करने वाला हिस्सा मिलता-जुलता है

  • project अच्छा दिखता है। यह देखकर अच्छा लगा कि shadows की 5 से ज्यादा layers में उतरने वाला मैं अकेला नहीं हूँ। खास तौर पर Light Rays जोड़ना प्रभावशाली है

• छोटी समस्या: ऊपर वाले हिस्से और toggle/code वाले scroll area के बीच की shadow नीचे scroll करने पर गायब हो जाती है। शायद शुरू में छिपी होनी चाहिए और फिर दिखनी चाहिए

  • अच्छी पकड़। यह fade-in issue नहीं है, shadow बस screen के बाहर scroll होकर निकल जाती है
    वे “overhang” box-shadow इस तरह design किए गए थे कि वे किसी element से नीचे की ओर cast न हों, बल्कि element के अंदर ही apply हों; इस case में मुझे एहसास हुआ कि दूसरी तरह वाली shadow apply करनी चाहिए

• मेरे phone पर content scroll काफी धीमा है। सोच रहा/रही हूँ कि क्या कोई और scroll effect है जो जानबूझकर इसे धीमा बना रहा है, या यह glass effect का side effect है

  • दिलचस्प है, लेकिन page पर कहीं भी scroll effect नहीं है। क्या आप बता सकते हैं कि कौन-सा device, browser और internet connection level इस्तेमाल कर रहे हैं?
  • M4 और 128GB RAM पर ठीक चलता है

• शायद मैंने miss किया हो, लेकिन mobile पर box को hide या collapse किया जा सके तो यह कहीं ज्यादा useful होगा
  अभी यह पूरी screen घेर लेता है, इसलिए पीछे का effect लगभग दिखता ही नहीं। फिर भी रुचि है, इसलिए बाद में किसी बड़े screen पर फिर try करूँगा/करूँगी, लेकिन box hide करने का option हो तो काफी बेहतर लगेगा

  • क्या आप code preview area की बात कर रहे हैं?
    पहले implementation में generator UI के ऊपर एक छोटा demo rectangle रखा था, लेकिन छोटा होने पर भी वह बहुत ज्यादा जगह लेता था और UI इस्तेमाल करना मुश्किल हो गया। पूरी page को scroll करने लायक बनाने पर लोगों को यह स्पष्ट नहीं था कि edit किए जा रहे rectangle को देखने के लिए scroll के बिल्कुल ऊपर होना पड़ेगा, जिससे वे frustrate हुए
    यह tool मुख्य रूप से coding के लिए है, इसलिए desktop experience को प्राथमिकता दी जा रही है, और mobile को quick preview और यह साबित करने तक रखा गया है कि यह mobile पर भी काम करता है। फिर भी अगर आपको कोई ऐसा similar UI पता हो जो mobile पर सचमुच अच्छा काम करता है, तो link देखना चाहूँगा/चाहूँगी