গ্লাসমরফিজম জেনারেটর
ব্যাকড্রপ ব্লার, স্বচ্ছতা ও বর্ডার সহ ফ্রস্টেড-গ্লাস UI কার্ড তৈরি করুন, তারপর CSS কপি করুন।
গ্লাস কার্ড
উজ্জ্বল ব্যাকড্রপের উপর ভাসমান ফ্রস্টেড গ্লাস।
—
backdrop-filter এবং -webkit-backdrop-filter দুটোই আউটপুট করে। লক্ষ্য করুন: পুরোনো ব্রাউজারে (যেমন Firefox ১০৩-এর নিচে) backdrop-filter সমর্থিত নয়; সেগুলোর জন্য একটি সলিড ফলব্যাক ব্যাকগ্রাউন্ড যোগ করুন।
গ্লাসমরফিজম জেনারেটর সম্পর্কে
Glassmorphism Generator তৈরি করে ফ্রস্টেড-গ্লাস কার্ড ইফেক্ট: এমন একটি স্বচ্ছ প্যানেল যা তার পেছনে যা কিছু আছে তা ব্লার করে দেয়। স্লাইডারগুলো backdrop-filter ব্লার ও স্যাচুরেশন, গ্লাস টিন্ট রঙ ও তার স্বচ্ছতা, বর্ডার রঙ ও অপাসিটি, কর্নার রেডিয়াস এবং একটি বাইরের শ্যাডো নিয়ন্ত্রণ করে — প্রতিটি পরিবর্তন একটি প্রাণবন্ত পটভূমির ওপর লাইভ রেন্ডার হয়, যাতে আপনি ইফেক্টটি বাস্তবসম্মতভাবে বিচার করতে পারেন।
চারটি কোয়ালিটি প্রিসেট — subtle, frosted, vivid এবং dark glass — শুরু করার জন্য প্রমাণিত সমন্বয় দেয়। dark প্রিসেট দেখায় কীভাবে একই রেসিপি ডার্ক UI-তে খাপ খায়, যেখানে একটি ম্লান হালকা বর্ডার গ্লাসকে পটভূমি থেকে আলাদা করার বেশিরভাগ কাজ করে।
তৈরি হওয়া CSS-এ backdrop-filter এবং -webkit-backdrop-filter প্রিফিক্স উভয়ই থাকে, যা Safari-র প্রয়োজন। কম্প্যাটিবিলিটি সতর্কতা মনে রাখুন: পুরনো ব্রাউজার (যেমন ভার্সন 103-এর আগের Firefox) backdrop-filter সমর্থন করে না, তাই তাদের জন্য একটি সলিড ফলব্যাক পটভূমি রাখুন।
গ্লাসমরফিজম জেনারেটর কীভাবে ব্যবহার করবেন
- একটি প্রিসেট দিয়ে শুরু করুন — subtle, frosted, vivid বা dark glass — অথবা ডিফল্ট থেকে।
- backdrop filter-এর ব্লার ও স্যাচুরেশন ঠিক করুন।
- গ্লাস টিন্ট রঙ এবং তার স্বচ্ছতা সেট করুন।
- বর্ডার রঙ, বর্ডার অপাসিটি, কর্নার রেডিয়াস এবং আউটলাইন শ্যাডো ঠিক করুন।
- CSS কপি করুন — এতে ইতিমধ্যে Safari-র জন্য -webkit- প্রিফিক্সযুক্ত প্রপার্টি রয়েছে।