গ্লাসমরফিজম জেনারেটর
ব্যাকড্রপ ব্লার, স্বচ্ছতা ও বর্ডার সহ ফ্রস্টেড-গ্লাস 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- প্রিফিক্সযুক্ত প্রপার্টি রয়েছে।