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

macOS Big Sur, iOS और Windows 11 Fluent Design से बड़े पैमाने पर उत्पन्न, ग्लासमॉर्फिज्म आधुनिक, प्रीमियम वेब अनुप्र—ोगों के लिए एक मानक बन गया है।

मुख्य दर्शन "Z-अक्ष" पर निर्भर करता है। शीर्ष परत को सेमी-ट्रांसपेरेंट बनाकर और उसके नीचे की जीवंत परतों को अत्य—िक धुंधला करके, डिज़ाइनर बिना किसी ठोस ड्रॉप शैडो के विज़ुअल पदानुक्रम स्थापित करते हैं। यह उपयोगकर्ता को वर्तमान सक्रिय विंडो के "पीछे" क्या हो —हा है, इसका संदर्भ देता है।

ग्लासमॉर्फिज्म प्रभाव प्राप्त करने के लिए, डेवलपर्स पूरी तरह से backdrop-filter CSS नयम पर निर्भर करते हैं। जब आप किसी तत्व को सेमी-ट्रांसपेरेंट बैकग्राउंड कलर (जैसे, background: rgba(255, 255, 255, 0.2);) देते हैं और backdrop-filter: blur(10px); लागू करते है, तो ब्राउज़र का रेंडरिंग इंजन तत्व के ठीक पीछे मौजूद पिक्सल को लेकर गणितीय रू से धुंधला करता है और उन्हें आपके तत्व के अंदर पेंट करता है।

चूंकि इके लिए उपयोगकर्ता के स्क्रॉल करने पर ब्राउज़र को पिक्सल की लगातार पनर्गणना करने की आवश्यकता होती है, यह एक हार्डवेयर-त्वरित प्रॉपर्टी है। Utiliome का जनरेटर तुरंत इन हार्डवेयर मेट्रिक्स की गणना करता है, जिससे आप वास्तविक समय में प्रदर्शन प्रभाव का पूर्वावलोकन कर सकते हैं।

ालांकि कस्टम CSS लिखना सीखने के लिए बहुत अच्छा है, आधुनिक डेवलपर्स अक्सर Tailwind जैसे यूटिलिटी फ्रेमवर्क पसंद करते हैं।

Tailwind में ग्लास कार्ड बनाने के लिए, आपको तीन आवश्यक परतों की आवश्यकता होती है:

• ब्लर: बैकग्राउंड को धुंधला करने के लिए backdrop-blur-md या backdrop-blur-lg का उपयोग करें।
• टिंट: ग्लास को उसकी भौतिक उपस्थिति देने के लए bg-white/20 (लाइट मोड के लिए) या bg-slate-900/40 (डार्क मोड के लिए) का उपयोग करें।
• किनारा: असली कांच अपने किनारों पर रोशनी पकड़ता है। border border-white/20 का उपयोग करके 1px बॉर्डर के साथ इसका अनुकरण करें।

Utiliome का जनरेटर मानक CSS या एक सटीक Tailwind क्लास स्ट्रिंग आउटपुट करने के लिए टगल प्रदान करता है।

ग्लासमॉर्फिज्म को लागू करने वाले नए डेवलपर्स के लिए एक बड़ी समस्या Apple हार्डवेयर को भूल जाना है। जबकि Chrome और Firefox मानक backdrop-filter प्रॉपर्टी का मूल रूप से समर्थन करते हैं, Safari (विशेष रूप से पुराने iOS संस्कर) में विक्रेता प्रिफिक्स की सख्त आवश्यकता होती है।

यदि आप -webkit-backdrop-filter: blur(10px); को शामिल करने में विफल रहते हैं, तो Apple उपयोगकर्ताओं को सिर्फ एक पारदर्शी div दिखाई देगा, जिससे आपका टेक्स्ट पूरी तरह से अपठनीय ो जाएगा।

Utiliome का CSS जनरेटर आपके आउटपुट कोड में आवश्यक WebKit प्रिफिक्स को ्वचालित रूप से इंजेक्ट करता है, जिससे आपका डिज़ाइन सभी प्रमुख ऑपरेटंग सिस्टम पर एक समान दिखता है।

ग्लासमॉर्फिज्म ट्रेंड की सबसे आम आलोचना खराब अकसेसिबिलिटी है। यदि एक रंगीन बैकग्राउंड इमेज आपके ग्लास कार्ड के पीछे गहरे नीले रंग से चमकीले पीले रंग में बदल जाती है, तो सफेद टेक्स्ट अचानक परी तरह से अदृश्य हो सकता है।

इसे ठीक करने के लिए, आपको एक मजूत बैकग्राउंड टेंट (ओपेसिटी) लागू करना होगा। उदाहरण के लिए, यदि आप सफेद टे्स्ट का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपका ग्लास बैकग्राउंड रंग rgba(0, 0, 0, 0.6) जैसा कुछ हो। यह गारंटी देता है कि टेक्स्ट हमेशा कानू द्वारा आवश्यक न्यूनतम 4.5:1 कंट्रास्ट अनुपात बनाए रखेगा।

गहराई को समझने के लिए मान मस्तिष्क को प्रकाश के संकेतों की आवश्यकता होती है। यदि आप केवल बैकग्राउंड को धुंधला करते हैं, तो UI 'सपाट' दिख सकता है।

ग्लास को उभारन के लिए, आपको इसे Z-अक्ष पर ऊपर उठाना होगा। Utiliome का जनरेटर आपको एक सक्ष्म box-shadow को ट्विक करने की अनुमति देता है। शैडो ओपेसिटी को बहुत कम (लगभग 10%) रखकर लेकिन ब्लर रेडियस को बहुत अधिक (32px) बढ़ाकर, आप एक नरम एमबिएंट प्रभाव बनाते हैं जो ग्लास को बैकग्राउंड से सुंदर रूप से अलग करा है।