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

 (tyleo.com)
4 पॉइंट द्वारा GN⁺ 2024-11-25 | 1 टिप्पणियां | WhatsApp पर शेयर करें

गेम से वेब तक का फ्रॉस्टेड ग्लास

  • परिचय

    • Forza Horizon 3 और Forza Motorsport 7 में UI डेवलपर के रूप में काम करते हुए सुंदर फ्रॉस्टेड acrylic डिज़ाइन एलिमेंट्स का अनुभव हुआ।
    • HTML का उपयोग करके इसी तरह का प्रभाव लागू करना चाहा, और इस पेज पर उसी प्रयास को साझा किया गया है।

  • backdrop-filter की भूमिका

    • फ्रॉस्टेड ग्लास प्रभाव का मूल Gaussian blur का उपयोग करके बैकग्राउंड को धुंधला करना है।
    • CSS में backdrop-filter और blur फ़ंक्शन का उपयोग करके Gaussian blur लागू किया जा सकता है।
    • Internet Explorer इस फीचर को सपोर्ट नहीं करता।

  • गहराई जोड़ना

    • backdrop-filter: blur(10px) का उपयोग करके बेसिक ग्लास बनाया गया, लेकिन अधिक गहराई वाले प्रभाव के लिए box-shadow: inset का उपयोग करके किनारों पर गहराई जोड़ी गई।

  • वास्तविक छाया

    • 3D ऑब्जेक्ट के 2D स्पेस में फँसे होने जैसा एहसास हटाने के लिए गहरा box-shadow जोड़ा गया, ताकि ग्लास बैकग्राउंड से भौतिक रूप से उठा हुआ लगे।

  • रोशनी के साथ इंटरैक्शन

    • ग्लास और रोशनी के इंटरैक्शन को बेहतर बनाने के लिए सरल subsurface scattering जोड़ा गया।
    • box-shadow: inset का उपयोग करके उस प्रभाव का सिमुलेशन किया गया जिसमें रोशनी ग्लास के किनारों पर हल्का फैलती है।

  • और रोचक रोशनी

    • ग्लास की reflective विशेषताओं को उभारने के लिए रोशनी की किरणों को बैकग्राउंड इमेज के रूप में इस्तेमाल किया गया।
    • ::before का उपयोग करके बैकग्राउंड इमेज को ग्लास एलिमेंट पर लागू किया गया।

  • डायनेमिक रोशनी

    • CSS और JavaScript का उपयोग करके सभी प्लेटफ़ॉर्म पर डायनेमिक reflection प्रभाव लागू किया गया।
    • JavaScript का उपयोग करके background-position को डायनेमिक रूप से समायोजित किया गया, ताकि background-attachment: fixed प्रभाव का सिमुलेशन किया जा सके।

  • समापन

    • ग्लास प्रभाव को पूरा करने के लिए गोल कोने, रंग और टेक्स्ट जोड़े गए।
    • border-radius का उपयोग करके कोनों को गोल किया गया, और overflow: hidden का उपयोग करके child elements को ग्लास सतह से बाहर जाने से रोका गया।

  • निष्कर्ष

    • फ्रॉस्टेड ग्लास प्रभाव बनाने की प्रक्रिया के साथ बने रहने के लिए धन्यवाद।
    • सभी assets और code को जल्दी कॉपी करने के लिए दस्तावेज़ की शुरुआत में मौजूद "Final Recipe Lookahead" सेक्शन देखें।

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

1 टिप्पणियां

 
GN⁺ 2024-11-25
Hacker News राय

  • एक उपयोगकर्ता ने कहा कि उसे इसका सौंदर्य पक्ष पसंद है, लेकिन उसे लगता है कि क्लाइंट द्वारा बार-बार महंगे blur filter की गणना करना फिजूलखर्ची है, और वेब डेवलपमेंट का सामान्य रुझान सिस्टम पर बहुत अधिक लोड डालता हुआ लगता है

    • उनका मानना है कि GPU का उपयोग करके इसे optimize किया गया है, लेकिन व्यवहार में इससे बहुत बड़ा अंतर नहीं पड़ेगा

  • एक अन्य उपयोगकर्ता ने बताया कि उसने Windows 7 की "light rays" texture को extract करके Android पर इसी तरह का effect लागू करने की कोशिश की थी, और blur background की saturation को थोड़ा बढ़ाया था

  • एक और उपयोगकर्ता ने कहा कि interactive demo शानदार है, लेकिन उसे user interface design में frosted glass का उपयोग पसंद नहीं है, और Mac OS में इसका जोड़ा जाना उसे एक पीछे की ओर कदम लगता है

    • खासकर जब panel के पीछे का content dynamic हो या user-generated हो, तब यह आदर्श नहीं लगता

  • एक उपयोगकर्ता ने बताया कि 2008 में उसने CSS प्रयोग के जरिए fixed position वाली पहले से blur की गई background image का उपयोग करके ऐसा ही effect बनाया था

    • उसने उल्लेख किया कि यह real-time Gaussian blur से बेहतर performance देता है, लेकिन इसकी कमी यह है कि यह dynamic background image की अनुमति नहीं देता

  • एक अन्य उपयोगकर्ता ने कहा कि इसमें 10 effect एक-दूसरे पर चढ़े हुए हैं, और सबसे जरूरी सौंदर्य तत्व को छोड़कर लगभग 7 effect बहुत ज़्यादा हैं

    • उसने सुझाव दिया कि सिर्फ background color, blur, box shadow या border का उपयोग करना बेहतर होगा

  • एक उपयोगकर्ता ने बताया कि उसे noise texture जोड़कर अधिक खुरदरा result पाना पसंद है

  • एक अन्य उपयोगकर्ता ने कहा कि तकनीकी उपलब्धि प्रभावशाली है, लेकिन UX खराब है

    • उसने समझाया कि semi-transparent panel के भीतर के content को पढ़ना या समझना अधिक कठिन हो जाता है, क्योंकि background के साथ contrast कम और असंगत होता है

  • एक उपयोगकर्ता ने उल्लेख किया कि मूल CSS demos में से एक frosted glass effect के लिए था, और उसे यह दिलचस्प लगा

  • एक अन्य उपयोगकर्ता ने कहा कि CSS का रचनात्मक और शक्तिशाली पक्ष देखना हमेशा प्रभावशाली होता है, लेकिन उसे लगता है कि HTML/CSS की समझ के कुछ स्तर ऐसे हैं जिन्हें वह शायद कभी पूरी तरह नहीं समझ पाएगा

  • अंत में, एक उपयोगकर्ता ने कहा कि interactive examples अच्छे हैं, लेकिन अगर पुराने version पर स्विच करने के लिए कोई comparison या toggle feature होता तो और बेहतर होता

    • उसने बताया कि अधिकांश मामलों में हर iteration का improvement इतना subtle था कि अंतर समझ में नहीं आया