ग्लासमॉर्फिज़्म जनरेटर

backdrop-filter: blur() CSS प्रॉपर्टी है जो फ्रॉस्टेड-ग्लास लुक देती है — एक पारभासी पैनल जो अपने पीछे चल रही किसी भी चीज़ को धुंधला कर देता है, न कि सिर्फ एक सपाट रंग फीका करता है। समस्या यह है कि ब्लर की गुणवत्ता का अंदाजा किसी स्थिर नमूने से लगाना लगभग असंभव है; यह तभी विश्वसनीय लगता है जब इसके पीछे वास्तव में कुछ चल रहा हो — ठीक वैसे ही जैसे किसी असली पेज पर कंटेंट, वीडियो या एनिमेटेड हीरो होता है। यह जनरेटर प्रीव्यू कार्ड को स्थिर बैकग्राउंड के बजाय एक वास्तविक रूप से एनिमेटेड बैकग्राउंड पर दिखाता है, ताकि आप स्लाइडर खींचते समय जो देखते हैं, वही अनुभव विज़िटर को मिले।

बैकग्राउंड एक वास्तविक CSS एनिमेशन है: एक बड़ा linear-gradient जो एलिमेंट के आकार का 400% होता है, जिसमें @keyframes उसकी background-position को बार-बार आगे-पीछे करता रहता है — कोई JavaScript एनिमेशन लूप नहीं, कोई canvas नहीं, बस वही निरंतर background-position तकनीक जो उत्पादन के हीरो सेक्शन में इस्तेमाल होती है। ब्लर, टिंट का रंग और अपारदर्शिता, बॉर्डर हाइलाइट का रंग/अपारदर्शिता/चौड़ाई, कॉर्नर रेडियस और शैडो की कोमलता — ये सभी तैरते कार्ड की लाइव शैलियों को नियंत्रित करते हैं, और कॉपी करने योग्य CSS बॉक्स बिल्कुल वही मान दिखाता है।

हर ब्राउज़र backdrop-filter को सपोर्ट नहीं करता, इसलिए जनरेटर एक असली @supports not (backdrop-filter: blur(1px)) ब्लॉक भी बनाता है — यह महज़ दिखावा नहीं, बल्कि एक फॉलबैक नियम है जिसका खुद का बैकग्राउंड रंग आपकी वास्तविक टिंट अपारदर्शिता से निकाला जाता है। क्योंकि बिना ब्लर के पारभासीपन ज़्यादा खराब दिखता है (पीछे की चीज़ बिना धुंधले दिख जाती है), इसलिए फॉलबैक आपकी चुनी हुई टिंट अपारदर्शिता से ज़्यादा अल्फा चैनल अपने आप सेट कर देता है, और जनरेट की गई CSS में एक टिप्पणी बताती है कि ऐसा क्यों और कितना किया गया।

सब कुछ आपके अपने ब्राउज़र में कंप्यूट और रेंडर होता है: कोई अपलोड नहीं, कोई अकाउंट नहीं, कोई सर्वर का चक्कर नहीं। जब कार्ड ठीक लगे तब CSS कॉपी करें, इसे किसी भी एलिमेंट पर लगाएँ जिसे आप किसी फोटो, वीडियो या ग्रेडिएंट के ऊपर रखना चाहते हैं, और @supports ब्लॉक रखें ताकि पुराने ब्राउज़र को बमुश्किल दिखने वाले कार्ड की बजाय एक पढ़ने लायक, ज़्यादा अपारदर्शी कार्ड मिले।