Glassmorphism CSS जनरेटर

 (ui.glass)
7 पॉइंट द्वारा xguru 2021-08-29 | 2 टिप्पणियां | WhatsApp पर शेयर करें

  • macOS BigSur / Windows 11 में इस्तेमाल होने वाला UI design trend

  • ऊपरी element की background को नीचे मौजूद image/color/pattern के blur किए गए रूप में दिखाता है

→ backdrop-filter: blur() का उपयोग

  • background image/color/Gradient सेट कर सकते हैं, और Blur value, transparency, Saturation को समायोजित कर सकते हैं

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

2 टिप्पणियां

 
galadbran 2021-08-29

मुझे अजीब लगा कि blur और saturation की वैल्यू कितनी भी बदलूं, कोई फर्क नहीं दिख रहा था, लेकिन edge में यह ठीक से काम करता है और firefox में नहीं.. हाहा
 
joyfui 2021-08-29

मैं भी Firefox इस्तेमाल करता हूँ, इसलिए सोच रहा था कि इसमें क्या फ़र्क है, लेकिन पता चला कि Firefox में अभी यह डिफ़ॉल्ट रूप से सपोर्ट नहीं था..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

लगता है about:config सेटिंग बदलने पर यह काम करता है.