বর্তমান ওয়েব ডিজাইনে গ্লাসমরফিজম (Glassmorphism) একটি অত্যন্ত জনপ্রিয় স্টাইল। ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড এবং ব্লার ইফেক্ট ব্যবহার করে একটি মডার্ন এবং প্রিমিয়াম লুক তৈরি করা যায়।
প্রয়োজনীয় টুল:
https://ui.glass/generatorগ্লাসমরফিজম কী?
Background Blurএলিমেন্টের পেছনের অংশ ঝাপসা দেখায়।
Semi-transparentঅর্ধ-স্বচ্ছ লেয়ার এবং হালকা বর্ডার।
Soft Shadowমার্জিত শ্যাডো এবং লাইট রিফ্লেকশন।
কিভাবে ব্যবহার করবেন?
UI Glass জেনারেটরে গিয়ে Blur এবং Opacity অ্যাডজাস্ট করুন।
লাইভ প্রিভিউ দেখে আপনার পছন্দমতো ডিজাইনটি তৈরি করুন।
“Copy CSS” বাটনে ক্লিক করে কোডটি সংগ্রহ করুন।
Example CSS Code
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
কোথায় ব্যবহার করবেন?
হিরো সেকশন কার্ড, লগইন ফর্ম, প্রাইসিং টেবিল এবং ড্যাশবোর্ড ইউআই ডিজাইনে এই ইফেক্টটি সবচেয়ে বেশি ব্যবহৃত হয়। এলিমেন্টরে এটি ব্যবহার করতে হলে কন্টেইনার সেকশনে কাস্টম সিএসএস পেস্ট করে দিতে হবে।
সীমাবদ্ধতা ও টিপস
পুরানো ব্রাউজারে ব্লার ইফেক্ট কাজ নাও করতে পারে। এছাড়া অতিরিক্ত ব্যবহারের ফলে রিডিবিলিটি কমে যাওয়ার সম্ভাবনা থাকে। তাই সবসময় ব্যাকগ্রাউন্ড ইমেজের সাথে সামঞ্জস্য রেখে এই ইফেক্টটি ব্যবহার করুন।
