इस लेख में
ग्लासमॉर्फिज़्म क्या है और यह क्यों कारगर है
ग्लासमॉर्फिज़्म एक UI डिज़ाइन ट्रेंड है जो फ्रॉस्टेड-ग्लास सतहों के इर्द-गिर्द बना है जो अपने पीछे के बैकग्राउंड को धुँधला कर देती हैं। यह प्रभाव रंगीन बैकग्राउंड पर पारभासी पैनलों की परतें बिछाकर गहराई और पदानुक्रम का एहसास पैदा करता है, जिससे इंटरफ़ेस को एक आधुनिक और परिष्कृत लुक मिलता है। Apple ने macOS और iOS में इस सौंदर्य को लोकप्रिय बनाया, और तब से यह वेब पर डैशबोर्ड डिज़ाइन, कार्ड लेआउट और मोडल ओवरले में एक मुख्य तत्व बन गया है।
ग्लासमॉर्फिज़्म के पीछे का CSS एक अर्ध-पारदर्शी बैकग्राउंड रंग को backdrop-filter ब्लर और एक सूक्ष्म बॉर्डर के साथ जोड़ता है ताकि एक ग्लास किनारे का अनुकरण किया जा सके। पारदर्शिता, ब्लर त्रिज्या और बॉर्डर अपारदर्शिता के बीच सही संतुलन पाने में प्रयोग करना पड़ता है। एक विज़ुअल जनरेटर आपको इन प्रॉपर्टीज़ को रियल टाइम में समायोजित करने देता है और जब प्रभाव सही लगे तब सटीक CSS कॉपी करने देता है, जिससे मानों को हाथ से कोड करने की आज़माइश-और-गलती खत्म हो जाती है।
CSS ग्लासमॉर्फिज़्म जनरेटर का उपयोग कैसे करें
CheckTown का जनरेटर आपको हर ग्लास-प्रभाव प्रॉपर्टी के लिए इंटरैक्टिव नियंत्रण देता है ताकि आप एकदम सही पैनल दृश्य रूप से डिज़ाइन कर सकें।
- बैकग्राउंड कितना तीव्रता से धुँधला हो यह नियंत्रित करने के लिए ब्लर त्रिज्या स्लाइडर समायोजित करें -- अधिक मान एक अधिक फ्रॉस्टेड रूप बनाते हैं जबकि कम मान बैकग्राउंड को आंशिक रूप से दृश्यमान रखते हैं
- अपारदर्शिता स्लाइडर का उपयोग करके बैकग्राउंड पारदर्शिता सेट करें -- यह तय करता है कि ग्लास सतह के आर-पार बैकग्राउंड रंग कितना दिखाई देता है
- एक सूक्ष्म ग्लास किनारा जोड़ने के लिए बॉर्डर अपारदर्शिता और संतृप्ति को बारीकी से समायोजित करें जो प्रकाश को पकड़ता है और पैनल को बैकग्राउंड से अलग करता है
- जनरेट किए गए CSS को एक क्लिक में कॉपी करें और सीधे अपनी स्टाइलशीट में पेस्ट करें -- आउटपुट में अधिकतम ब्राउज़र संगतता के लिए वेंडर प्रीफ़िक्स के साथ backdrop-filter प्रॉपर्टी शामिल होती है
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
ग्लासमॉर्फिज़्म जनरेटर खोलें →ग्लास प्रभावों का उपयोग करने के लिए डिज़ाइन सुझाव
सोच-समझकर इस्तेमाल करने पर ग्लासमॉर्फिज़्म शानदार दिखता है, लेकिन कुछ दिशानिर्देश इसे पठनीयता या सुगम्यता को नुकसान पहुँचाने से रोकते हैं।
- टेक्स्ट और ग्लास सतह के बीच पर्याप्त कंट्रास्ट सुनिश्चित करें -- यदि पारदर्शिता बहुत अधिक हो तो धुँधला बैकग्राउंड हल्के टेक्स्ट को पढ़ना कठिन बना सकता है। WCAG कंट्रास्ट चेकर से परीक्षण करें।
- ग्लासमॉर्फिज़्म का संयम से उपयोग करें -- प्रति स्क्रीन एक या दो ग्लास पैनल एक सुरुचिपूर्ण केंद्रबिंदु बनाते हैं। हर एलिमेंट पर प्रभाव लगाने से इंटरफ़ेस अस्त-व्यस्त और धीमा महसूस होता है।
- उन ब्राउज़रों के लिए एक ठोस-रंग फ़ॉलबैक प्रदान करें जो backdrop-filter का समर्थन नहीं करते -- पुराने ब्राउज़र बिना ब्लर के एक पूरी तरह पारदर्शी पैनल दिखाएँगे, जो फ़ॉलबैक बैकग्राउंड के बिना कंटेंट को अपठनीय बना सकता है
अक्सर पूछे जाने वाले प्रश्न
कौन-से ब्राउज़र backdrop-filter का समर्थन करते हैं?
backdrop-filter Chrome, Firefox, Safari और Edge सहित सभी आधुनिक ब्राउज़रों में समर्थित है। जनरेट किया गया CSS Safari संगतता के लिए -webkit- प्रीफ़िक्स शामिल करता है। Internet Explorer इस प्रॉपर्टी का समर्थन नहीं करता, लेकिन इसकी वैश्विक उपयोग हिस्सेदारी नगण्य है।
क्या ग्लासमॉर्फिज़्म प्रदर्शन को प्रभावित करता है?
backdrop-filter प्रॉपर्टी GPU कंपोज़िटिंग को ट्रिगर करती है, जो कम-अंत वाले डिवाइस पर या कई एलिमेंट पर एक साथ लागू होने पर प्रदर्शन को प्रभावित कर सकती है। सर्वोत्तम परिणामों के लिए, हर कंपोनेंट पर लागू करने के बजाय ग्लास प्रभावों को कुछ मुख्य UI एलिमेंट जैसे नेविगेशन बार, मोडल या हीरो कार्ड तक सीमित रखें।
क्या मैं डार्क मोड के साथ ग्लासमॉर्फिज़्म का उपयोग कर सकता हूँ?
बिल्कुल। ग्लासमॉर्फिज़्म हल्की और गहरी दोनों थीम में अच्छा काम करता है। डार्क मोड के लिए, एक गहरा अर्ध-पारदर्शी बैकग्राउंड रंग उपयोग करें और फ्रॉस्टेड प्रभाव बनाए रखने के लिए ब्लर त्रिज्या थोड़ी बढ़ाएँ। जनरेटर आपको किसी भी बैकग्राउंड रंग के सामने परिणाम का पूर्वावलोकन देखने देता है ताकि आप दोनों थीम के लिए लुक को बारीकी से समायोजित कर सकें।