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

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

पृष्ठभूमि एक वास्तविक सीएसएस एनीमेशन है: तत्व के आकार के 400% पर चित्रित एक बड़ा रैखिक-ढाल, जिसमें @keyframes एक लूप पर अपनी पृष्ठभूमि-स्थिति को आगे और पीछे स्थानांतरित करता है - कोई जावास्क्रिप्ट एनीमेशन लूप नहीं, कोई कैनवास नहीं, उत्पादन नायक अनुभागों में उपयोग की जाने वाली वही निरंतर पृष्ठभूमि-स्थिति तकनीक। धुंधलापन, टिंट रंग और अपारदर्शिता, बॉर्डर हाइलाइट रंग/अस्पष्टता/चौड़ाई, कोने की त्रिज्या और छाया कोमलता सभी फ़्लोटिंग कार्ड की लाइव शैलियों को संचालित करते हैं, और कॉपी करने योग्य सीएसएस बॉक्स बिल्कुल समान मानों को प्रतिबिंबित करता है।

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

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