गेम से वेब तक विस्तारित Frosted Glass तकनीक

 (tyleo.com)
4 पॉइंट द्वारा GN⁺ 2024-11-25 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Forza Horizon 3 और Forza Motorsport 7 के frosted acrylic UI से शुरू होकर, वेब पर भी समान glass panel effect को HTML/CSS/JavaScript से फिर से बनाने की प्रक्रिया को संक्षेप में समझाया गया है
  • इस effect का केंद्र Gaussian blur है, और browser के बीच के अंतर को कम करने के लिए CSS backdrop-filter और iOS के लिए -webkit-backdrop-filter दोनों का साथ में उपयोग करना चाहिए
  • सिर्फ blur लगाने से सतह सपाट दिखती है, इसलिए box-shadow: inset से edge depth और subsurface scattering जोड़ा जाता है, और सामान्य shadow से इसे background के ऊपर तैरता हुआ महसूस कराया जाता है
  • surface reflection को light rays image की अलग layer बिछाकर बनाया जाता है, और background-attachment: fixed या JavaScript के जरिए glass की movement के अनुसार dynamic reflection की नकल की जाती है
  • अंतिम UI .glass, .light, .drag-me layers को मिलाकर बनता है, और rounded corners, clipping, तथा semi-transparent background color जोड़कर इसे एक copyable glass component के रूप में पूरा किया जाता है

गेम UI से लिया गया glass panel effect

  • Forza Horizon 3 और Forza Motorsport 7 के UI development अनुभव में देखे गए frosted acrylic design को HTML में फिर से बनाना इसका लक्ष्य है
  • अंतिम परिणाम एक drag करने योग्य glass panel है, जिसमें background blur, edge depth, light reflection, rounded corners, और semi-transparent color layer साथ शामिल हैं
  • शुरुआत में तुरंत copy-paste करके इस्तेमाल करने योग्य final recipe दी जाती है, और उसके बाद हर effect को चरण-दर-चरण जोड़ा जाता है

background blur बनाने वाला backdrop-filter

  • अच्छे frosted glass effect का मूल background को blur करके उसे semi-transparent screen जैसा दिखाना है, और यही Gaussian blur है
  • CSS में इसे backdrop-filter पर blur लागू करके बनाया जाता है
  • मूल glass element एक साधारण div और .glass class से शुरू होता है
    • backdrop-filter: blur(10px)
    • -webkit-backdrop-filter: blur(10px)
  • iOS में, जब तक गहरी अलग सेटिंग न बदली जाए, -webkit-backdrop-filter की आवश्यकता होती है
  • backdrop-filter को browser support हाल ही में मिला है, इसलिए Internet Explorer उपयोगकर्ता इस demo का अनुभव नहीं कर पाएंगे

edges और shadows से depth बनाना

  • केवल backdrop-filter: blur(10px) लगाने पर glass सपाट और एकरस दिख सकता है
  • किनारों को border: 1px solid की जगह box-shadow: inset से बनाया जाता है
    • border element के आकार और child elements की layout को प्रभावित करता है
    • box-shadow: inset इस्तेमाल करने पर child elements बिना negative margin जैसे समायोजन के glass के content area को स्वाभाविक रूप से भर सकते हैं
  • दो semi-transparent सफेद inset shadows से glass की edges दिखाई जाती हैं
    • पहला shadow बाहर से दिखने वाले glass corner को दर्शाता है, और उदाहरण में यह नीचे और बाएँ edge पर दिखाई देता है
    • दूसरा shadow glass के आर-पार दिखाई देने वाले edge को दर्शाता है, और उदाहरण में यह ऊपर और दाएँ edge पर दिखाई देता है
  • glass के आर-पार दिखाई देने वाले edges को रोशनी कम होने के कारण अधिक नरम और अधिक transparent रखा जाता है
  • सामान्य गहरा box-shadow जोड़ने से glass को background से भौतिक रूप से ऊपर तैरता हुआ एहसास दिया जा सकता है

light scattering और surface reflection

  • glass के अंदर रोशनी फैलने का एहसास subsurface scattering को सरल बनाकर व्यक्त किया जाता है
  • इसके लिए फिर से box-shadow: inset का उपयोग किया जाता है
    • छोटा scattering effect: inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025)
    • गहरा scattering effect: inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025)
  • यह effect तब अधिक साफ दिखता है जब glass को dark background पर drag किया जाता है
  • background के blur होकर refract होने वाले एहसास के साथ, glass surface पर रोशनी की reflection विशेषता भी जोड़ी जाती है
  • light reflection को light rays image को background में मिलाकर बनाया जाता है
    • ऐसी image खुद बनानी हो तो YouTube tutorial और text explanation देखे जा सकते हैं
    • image को सीधे .glass element के background-image में रखने पर backdrop-filter image को भी blur कर देता है, इसलिए ::before जैसी अलग layer का उपयोग किया जाता है

static reflection को dynamic बनाना

  • केवल light rays image जोड़ने से reflection तो बनती है, लेकिन glass को हिलाने पर भी रोशनी glass surface पर स्थिर दिख सकती है
  • शुद्ध CSS तरीका ::before में background-attachment: fixed जोड़ता है
    • इसे लागू करना आसान है, लेकिन यह हर platform पर काम नहीं कर सकता
  • अगर इसे सभी platforms पर काम करवाना हो, तो JavaScript से background-attachment: fixed की नकल की जाती है
    • JavaScript में ::before को सीधे संभालना अप्रभावी है, इसलिए अलग div.light element का उपयोग होता है
    • target element पर data-js-background-attachment-fixed attribute लगाया जाता है
  • JavaScript हर animation frame पर target element का getBoundingClientRect() मान पढ़ता है और viewport में उसकी स्थिति के उलटी दिशा में background-position अपडेट करता है
    • backgroundPositionX = -clientRect.x
    • backgroundPositionY = -clientRect.y
  • दोहराव वाला loop requestAnimationFrame से चलता है

अंतिम HTML/CSS संरचना

  • JavaScript version के अंतिम HTML में .glass के अंदर light reflection के लिए .light और text/color layer के लिए .drag-me रखा जाता है

  Drag Me
  • .glass glass panel के मूल रूप और visual effects संभालता है
    • backdrop-filter और -webkit-backdrop-filter से background blur लागू होता है
    • कई box-shadow से edges, shadow, और scattering effect लागू होते हैं
    • position: relative child layers को parent area भरने देता है
    • border-radius: 5px से rounded corners लागू होते हैं
    • overflow: hidden child elements को rounded corners के बाहर निकलने से रोकने के लिए clip करता है
  • .light light rays image को repeating background की तरह उपयोग करता है
    • background-image: url(path/to/light.png)
    • background-repeat: repeat
    • background-size: 750px
    • opacity: 0.075
    • position: absolute और चारों दिशाओं में offset 0 के साथ parent को पूरा भरता है
    • z-index: -1 से यह दूसरे children के पीछे render होता है
  • .drag-me content को center में align करता है और रंग वाली semi-transparent glass layer बनाता है
    • display: flex
    • align-items: center
    • justify-content: center
    • height: 30px
    • background-color: rgba(12, 13, 14, 0.75)

JavaScript के बिना version का अंतर

  • बिना JavaScript वाले version में अलग .light element की जगह .glass::before का उपयोग होता है
  • ::before पर light rays image लगाकर background-attachment: fixed से screen पर स्थिर reflection बनाई जाती है
  • यह तरीका हर platform पर काम नहीं करता, और JavaScript version इसे बेहतर बनाने के लिए background-position को सीधे अपडेट करता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-11-25
Hacker News की टिप्पणियाँ

  • सौंदर्य की दृष्टि से यह मुझे वाकई बहुत पसंद है, लेकिन किनारों पर कुछ हिस्से भौतिक रूप से सही नहीं लगते
    एक embedded developer के नज़रिए से यह थोड़ा फ़िजूलखर्ची जैसा लगता है। क्या हर client को हर बार background image के धुंधले version के साथ मिलाने के लिए वह “महँगा” blur filter compute नहीं करना पड़ता?
    GPU का उपयोग होता है और optimization भी है, इसलिए शायद आख़िरकार इसकी लागत बहुत बड़ी न हो, लेकिन आजकल web development कुल मिलाकर बहुत फूला हुआ लगता है। साधारण sites भी 5 सेकंड तक load होती हैं, और भारी processing client पर डाल दी जाती है, हालाँकि यह इस लेख के लेखक की गलती नहीं है

    • क्या चीज़ फ़िजूलखर्ची है, इसे लेकर हर किसी की अपनी पूर्वधारणा होती है
      मैं 14.4k modem के दौर में बड़ा हुआ हूँ, इसलिए मुझे यह सोचने की आदत है कि network bandwidth, CPU time से कहीं अधिक दुर्लभ और महँगी चीज़ है
      अगर client पर इसे आसानी से compute किया जा सकता है, तो पूरी image को internet से डाउनलोड करना ज़्यादा फ़िजूल लगता है। उस image को लाने के लिए routers, servers, और दूर के disks तक को चलाना पड़ता है, जबकि client RAM में पहले से मौजूद data पर एक बार processing करने से बचने के लिए इतना सब करना ज़्यादा महँगा सौदा लगता है
    • तकनीकी रूप से कुछ “फ़िजूलखर्च” websites भी, उनके वास्तविक उपयोग को देखें तो बड़े पैमाने पर ज़्यादातर शुद्ध मनोरंजन के लिए ही होती हैं
      इसलिए या तो मनोरंजन खुद फ़िजूल है, या फिर अगर वह फ़िजूल नहीं है, तो मनोरंजन को बेहतर बनाने के लिए थोड़ा extra compute खर्च करना भी ठीक है
    • इंसानी नज़र से यह “render हुई graphics को फिर से बड़े पैमाने पर compute करना” जैसा दिखता है, इसलिए फ़िजूल लग सकता है, लेकिन तकनीकी रूप से ज़रूरी नहीं कि ऐसा ही हो
      UI में जो बदलता है उसे फिर से draw करने के लिए वैसे भी GPU compute चाहिए, और साधारण blur को काफ़ी efficiently extra जोड़ा जा सकता है। इसकी लागत शायद उन DOM object animations से भी कम हो जो GPU layers के लिए optimize नहीं किए गए हैं
      आजकल सबसे साधारण sites भी 1MB से ज़्यादा JavaScript और ढेर सारे trackers load करके CPU खाती हैं, तो aesthetic blur मुझे फ़िजूलखर्ची की सूची में काफ़ी नीचे लगता है
    • blurred image और original image, दोनों को network पर भेजना क्या पिछले 20 साल से web development का सामान्य तरीका नहीं रहा है?
      अगर high-resolution images बहुत हैं, तो वास्तविक network bandwidth सीमित होती है, और खासकर कमज़ोर wireless coverage वाले mobile environments में यह local compute की तुलना में साफ़ तौर पर बदतर performance देता है। आज CSS/WebGL से जो कुछ संभव है वह हैरान करने वाला है; पहले ऐसे effects के लिए बहुत hacks और workarounds चाहिए होते थे
    • मुझे लगता है अब समय आ गया है कि हम गंभीरता से मान लें कि “ओह, यह अच्छा दिखता है, इसलिए यह मुझे/हमें ज़रूर चाहिए” जैसी बहुत-सी technologies के लिए इस दुनिया में कोई जगह नहीं है
      यह बहस अलग है कि यह काम खुद फ़िजूल है या नहीं, लेकिन ऐसी सोच अपने आप में समाज की बड़ी समस्या दिखाती है। इसकी ज़रूरत क्यों है, और इसके न होने को बुरा क्यों माना जाए?
      आज की सामाजिक समस्याओं के पैमाने को देखते हुए, UI panel धुंधला है या नहीं, इससे किसे फ़र्क पड़ता है?

  • Android पर नए shader API से क्या किया जा सकता है, यह देखने के लिए मैंने Windows 7 Aero Glass effect को दोबारा बनाने की कोशिश की थी, और उस दौरान इसी तरह की “light streak” texture निकाली थी
    नतीजा काफ़ी हद तक इस लेख जैसा ही बना, बस मैंने inner shadow नहीं डाली और blurred background की saturation थोड़ी बढ़ाई
    https://mastodon.social/@grishka/110524476584503201

    • बहुत बढ़िया। light streak texture इस effect में सचमुच काफ़ी अहम भूमिका निभा सकती है
      सच कहूँ तो tutorial के लिए जो बनाया गया था, वह इतना शानदार भी नहीं है। मुझे Windows 7 वाली ज़्यादा crisp lines पसंद हैं
      saturation adjustment के बारे में भी सोचा था और उसे दूसरे examples में देखा भी था, लेकिन लेख में इस्तेमाल नहीं करने का फ़ैसला किया। इस्तेमाल की गई moon image में वैसे भी ज़्यादा रंग नहीं थे, इसलिए शायद बड़ा फ़र्क नहीं पड़ता। जो लोग खुद glass effect बना रहे हैं, वे saturation के साथ भी प्रयोग कर सकते हैं

  • काम अपने आप में शानदार है, और इसे interactive demo के रूप में दिखाने का तरीका भी अच्छा है। window को चाँद के ऊपर खींचकर देखना मज़ेदार है
    लेकिन user interface design में frosted glass effect का इस्तेमाल मुझे पसंद नहीं, और जब यह Mac OS में जोड़ा गया था तब यह मुझे एक तरह की गिरावट लगा। designers इस effect से बहुत आसानी से मोहित हो जाते हैं, लेकिन व्यवहार में यह कभी आदर्श नहीं होता। खासकर तब, जब panel के पीछे का content dynamic हो या user-generated हो
    यह 2010s के brushed metal जैसा ही कुछ है, और यह हैरानी की बात है कि Windows Vista से निकलकर यह हर जगह फैल गया

    • मुझे समझ नहीं आता कि यह “आदर्श” क्यों नहीं है। visual design में practical purpose से ज़्यादा हिस्सा इस बात का होता है कि किसे क्या अच्छा लगता है
      बेशक design functionality को भी प्रभावित करता है, लेकिन उसका मुख्य उद्देश्य user experience को अधिक आनंददायक बनाना है
      मेरे हिसाब से skeuomorphism ने पिछले 10+ वर्षों से चले आ रहे हर चीज़ को flat बना देने वाले minimal trend की तुलना में interfaces को ज़्यादा आनंददायक बनाया। वास्तविक दुनिया की सतहों और materials की नकल करने वाली visual सजावट परिचय और accessibility दोनों बढ़ाती है। practical रूप से भी flat design अक्सर elements और states के बीच फ़र्क करना मुश्किल बना देता है, जबकि 3D buttons, brushed metal, और frosted glass के दौर में चीज़ें कहीं ज़्यादा स्पष्ट थीं
      मुझे लगता है pendulum अब फिर वापस जा रहा है। ज़्यादा designers flat look से बच रहे हैं, इसलिए उम्मीद है कि ज़्यादा human-friendly UI फिर लौटेगा
    • मैं UI designer नहीं हूँ, इसलिए गंभीरता से पूछ रहा हूँ: समस्या frosted glass या brushed metal जैसे aesthetic effects का UI design में इस्तेमाल करना है, या फिर ऐसे interfaces बनाते समय कुछ designers का controls की जगह और भूमिका बताने वाले visual संकेत खो देना?
    • मैं कई सालों से terminal window में थोड़ी transparency रखता आया हूँ, अब इस पर दोबारा सोचने का मन हो रहा है
    • brushed metal information context को प्रभावित नहीं करता। blur समायोज्य context देता है
      blur आम तौर पर सही जवाब नहीं होता, लेकिन कभी-कभी यह सही चुनाव होता है
    • विडंबना यह है कि पुराने macOS versions भी brushed metal का काफ़ी इस्तेमाल करते थे

  • 2008 में CSS द्वारा backdrop-blur को सपोर्ट किए जाने से पहले, इसी तरह का प्रभाव देने वाला एक CSS प्रयोग किया था: https://webdev.andersriggelsen.dk/aero/
    इसमें fixed position वाली पहले से blur की गई background image पर glass effect लगाया गया था: https://webdev.andersriggelsen.dk/aero/bgl.jpg
    यह real-time Gaussian blur की तुलना में काफी बेहतर performance देता है, लेकिन dynamic background image को अनुमति न दे पाने की कमी बनी रहती है

    • इससे भी पहले Flash file को background के रूप में इस्तेमाल करके एक कदम आगे बढ़े थे
      इससे dynamically moving frame के अंदर भी glass effect दिया जा सकता था। iframe इस्तेमाल किया था या नहीं, यह याद नहीं है, इसलिए code ढूँढना पड़ेगा, लेकिन उस समय को देखते हुए शायद किया ही होगा
    • floating window शुरुआती position के बाद update नहीं होती
      Windows 10 19045.5131 है, और Chrome नवीनतम Version 131.0.6778.86 (Official Build) (64-bit) है

  • तकनीकी उपलब्धि शानदार है, लेकिन इसे मैं खराब UX मानता हूँ
    translucent panel के अंदर का content, एक समान solid-color background की तुलना में पढ़ने या समझने में अधिक कठिन होता है, क्योंकि background के साथ contrast कम और असमान होता है। ऊपर से नीचे कुछ हिलता-डुलता रहे तो वह distracting हो सकता है और दिशाबोध भी बिगाड़ सकता है

    • सिर्फ एक visual effect को देखकर इसे “खराब UX” कहना बहुत सामान्यीकरण होगा। यह काफी हद तक इस बात पर निर्भर करता है कि इसे integrate कैसे किया गया है
      अच्छी integration में effect की intensity को इस तरह नियंत्रित किया जाना चाहिए कि UI जरूरत से ज्यादा न लगे, blur सपोर्ट न होने पर अतिरिक्त सजावट से बचने के लिए feature support की जाँच हो, और जिन devices में GPU पर्याप्त न हो सकता हो उनमें render न करने के लिए display और video capabilities की जाँच की जाए
      साथ ही user preference देखकर, जिन users को complex background से दिक्कत हो उन्हें अच्छा contrast देने वाला solid color देना चाहिए, उपलब्ध जगह के अनुसार effect और shadow की सीमा तय करनी चाहिए, और blurred area के नीचे background की complexity और contrast को देखते हुए blur और opacity समायोजित करनी चाहिए
      यह सुनिश्चित करना भी जरूरी है कि typography के अनुसार blur और shadow adaptive तरीके से scale हों। UX मूल रूप से इस बात की design है कि user पूरे app के साथ interaction को कैसे अनुभव करता है; यह किसी एक style choice से बनता या बिगड़ता नहीं है
    • Windows Vista ने इस समस्या को frosted glass पर काले text के लिए सफेद shadow जैसी outline देकर हल किया था
      इससे background पूरी तरह काला होने जैसी चरम स्थिति में भी text readability बनी रहती थी। CSS में इसे text-shadow property से दोहराया जा सकता है
    • इसलिए मैं इस effect का इस्तेमाल अपनी पूरी site में नहीं करता। अच्छा UX बनाना इससे ज्यादा कठिन हो जाता है
      लेकिन games में इसके लिए ज्यादा जगह है। खासकर HUD में, जहाँ आप background को ढकना नहीं चाहते, क्योंकि वही मुख्य क्षेत्र होता है जिससे user interact करता है
    • अगर कम contrast समस्या है, तो background या glass tint को और गहरा किया जा सकता है और foreground content को और उजला, या इसका उलटा
      अच्छा contrast, चाहे solid color हो या glass effect, किसी भी design element में एक चुनौती है
      यह कहना कि background में होने वाली चीजें distracting हैं और दिशाबोध बिगाड़ती हैं, बहुत हद तक subjective है। जैसे solid color की opacity कम की जा सकती है, वैसे ही glass की translucency भी कम की जा सकती है
      इस आलोचना को वस्तुनिष्ठ रूप से सही कहना मुश्किल है, और इस design element को ऐसे integrate करने के तरीके मौजूद हैं जिनमें ऐसी समस्याओं से बचा जा सके। Forza screenshot ठीक लग रहा था, और असल में देखने पर भी background distracting नहीं था। इसके बदले solid-color background से ज्यादा रोचक और visually pleasing UI मिलता है। यह video games में ज्यादा महत्वपूर्ण हो सकता है, लेकिन OS और web design में भी इसे सलीके से इस्तेमाल किया जा सकता है
    • blur, information छिपाने का एक तरीका है जिसमें context को जितना चाहें उतना बनाए रखा जा सकता है
      अगर बहुत ज्यादा context चाहिए, तो blur अच्छा विकल्प नहीं है, और अगर context बिल्कुल भी नहीं चाहिए तब भी यह अच्छा विकल्प नहीं है
      लेकिन कुछ स्थितियों में यह बेहतरीन विकल्प बन जाता है

  • interactive example अच्छा है, लेकिन अगर पिछले चरण के साथ side-by-side तुलना करने या switch करने के लिए toggle होता, तो और बेहतर होता
    ज़्यादातर चरणों में सुधार इतने subtle थे कि अंतर समझना मुश्किल था

    • सहमत। मोबाइल पर दूसरे चरण के बाद तो अंतर लगभग दिखता ही नहीं, या बिल्कुल समझ नहीं आता

  • इसमें लगभग 10 effect एक-दूसरे के ऊपर चढ़े हुए हैं, और जब तक लक्ष्य बेहद परिष्कृत aesthetics न हो, लगभग 7 तो ज़्यादा हैं
    background color, blur, और shadow या border तक ही रखना काफी है

    • जो लोग हल्का glass effect चाहते हैं, वे tutorial में से अपनी पसंद चुन सकते हैं
      तीसरे चरण तक पहुँचते-पहुँचते सिर्फ blur और shadow से ही काफी अच्छा glass shard बन जाता है। व्यक्तिगत रूप से मैं उसमें एक static light streak image मिलाने की सलाह दूँगा। ज़्यादातर applications को पूरा JavaScript effect शायद नहीं चाहिए होगा। मजेदार है, लेकिन distracting हो सकता है
      सिर्फ blur, shadow, और light streak से भी ऊपर वाली Forza image के काफी करीब पहुँचा जा सकता है
    • यह दिलचस्प है कि ऊपर के ज़्यादातर comments बर्बादी की बात कर रहे हैं
      मुझे लगता है कि सबके flat design की ओर जाने का एक कारण यही था। Windows Vista और glass effect शानदार थे, लेकिन उनका computational cost बड़ा था
      flat design सौंदर्य की दृष्टि से विवादास्पद है, और खासकर अधिक उम्र के users के लिए skeuomorphic design की तुलना में इस्तेमाल करना अधिक कठिन हो सकता है [0][1]
      अगर यथार्थपरकता usability में मदद कर सकती है, तो मुझे लगता है कि web पर ऐसे effect का इस्तेमाल पूरी तरह उचित है
      [0]: https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.18...
      [1]: https://www.sciencedirect.com/science/article/abs/pii/S01419...
    • मैं जानना चाहता हूँ कि stacked effects की सीमा n <= 3 मानने की वजह क्या है
      पता नहीं यह accessibility की समस्या है, performance की, maintenance की, या कोई और वजह है
      development skills में CSS मेरी सबसे कमजोर चीज़ है, इसलिए best practices और bad practices के बारे में मुझे बिल्कुल जानकारी नहीं है
    • क्या आपने वह हिस्सा नहीं छोड़ा जिसमें लेखक ने समझाया था कि वह सबसे परिष्कृत aesthetics को लक्ष्य बना रहा है?

  • यह दिलचस्प है कि मामला पूरा घूमकर फिर वहीं आ गया
    शुरुआती CSS demos में से एक, CSS 1 के लिए demo, frosted glass effect ही था: https://meyerweb.com/eric/css/edge/complexspiral/glassy.html

  • सच कहूँ तो काफ़ी प्रभावशाली है। CSS कितना रचनात्मक और शक्तिशाली हो सकता है, यह देखना हमेशा अच्छा लगता है
    बस HTML/CSS में हमेशा कोई न कोई ऐसा स्तर लगता है जिसे मैं कभी समझ नहीं पाऊँगा। यह डेमो बिल्कुल वैसा ही है, और यह व्यक्ति जमी हुई खिड़की बना रहा है जबकि मैं अभी भी एक div को बीच में align नहीं कर पाता

    • जब मैं यह सीख रहा था कि web development कैसे काम करता है, तब मैंने मुश्किल से सीखा कि एक div और जोड़ना अक्सर अच्छा विचार होता है
      ज़्यादातर आधुनिक websites को देखें तो div का एक विशाल ढेर लगा होता है। अगर आपको बीच में aligned div चाहिए, तो उसके अंदर एक और div बना दें जो उस पूरे space को घेरे जिसमें centering चाहिए, इससे काम काफ़ी आसान हो जाता है
      बहुत-सी visual tricks भी इसी तरह काम करती हैं, लेकिन यह उदाहरण बहुत साफ़-सुथरा है, इसलिए और भी प्रभावशाली लगता है

  • यह बिल्कुल frostted glass नहीं है, लेकिन मैंने https://www.gyan.dev/ffmpeg/builds/ के sidebar में glass effect लगाने की कोशिश की थी

    • PC पर देखें तो साइट काफ़ी आरामदायक और सुंदर लगती है