CSS গ্লাসমরফিজম জেনারেটর

CSS গ্লাসমরফিজম জেনারেটর কী?

CSS গ্লাসমরফিজম জেনারেটর হলো ফ্রস্টেড-গ্লাস (গ্লাসমরফিজম) UI স্টাইলের জন্য একটি বিনামূল্যের ভিজ্যুয়াল এডিটর, যা ফ্রন্ট-এন্ড ডেভেলপার ও প্রোডাক্ট ডিজাইনারদের জন্য তৈরি। সংখ্যা ইনপুট ও রেঞ্জ স্লাইডার দিয়ে ব্লারের পরিমাণ, পৃষ্ঠের স্বচ্ছতা, রঙের স্যাচুরেশন, বর্ডারের পুরুত্ব, কোণার ব্যাসার্ধ ও শ্যাডোর তীব্রতা সমন্বয় করুন, তারপর সোয়াচ দিয়ে একটি টিন্ট রঙ বেছে নিন। একটি লাইভ প্রিভিউ প্যানেল বাস্তব সময়ে একটি উজ্জ্বল গ্রেডিয়েন্ট ব্যাকড্রপের উপর গ্লাস প্যানেল দেখায়, এবং সম্পূর্ণ CSS — backdrop-filter, একটি অর্ধ-স্বচ্ছ পটভূমি, একটি সূক্ষ্ম বর্ডার ও একটি box-shadow ব্যবহার করে — আপনার কপি করার জন্য তৈরি হয়। rgba আলফা হাতে সমন্বয় না করে বা -webkit-backdrop-filter প্রিফিক্স মনে না রেখেই গ্লাসি কার্ড, নেভিগেশন বার, মোডাল ও ওভারলে তৈরি করতে এটি ব্যবহার করুন।

CSS গ্লাসমরফিজম জেনারেটর কীভাবে ব্যবহার করবেন

1. প্যানেলের পেছনের এলাকা কতটা ফ্রস্টেড হবে তা নিয়ন্ত্রণ করতে ব্লার (px-এ) সেট করুন।
2. গ্লাসকে আরও স্বচ্ছ করতে স্বচ্ছতা কমান, বা আরও নিরেট পৃষ্ঠের জন্য বাড়ান।
3. ব্যাকড্রপের রঙগুলো গ্লাসের ভেতর দিয়ে ফুটিয়ে তুলতে স্যাচুরেশন 100%-এর উপরে বাড়ান।
4. সোয়াচ দিয়ে একটি টিন্ট রঙ বেছে নিন এবং লুক সম্পূর্ণ করতে বর্ডারের প্রস্থ, ব্যাসার্ধ ও শ্যাডো সমন্বয় করুন।
5. প্রতিটি মান পরিবর্তনের সময় ব্যাকড্রপের উপর প্রিভিউ বাস্তব সময়ে আপডেট হতে দেখুন।
6. তৈরি হওয়া CSS আপনার স্টাইলশিটে কপি করুন — এতে ইতিমধ্যেই -webkit-backdrop-filter ফলব্যাক অন্তর্ভুক্ত আছে।

উদাহরণ

ব্লার 12, স্বচ্ছতা 25%, স্যাচুরেশন 120%, ব্যাসার্ধ 16, বর্ডার 1, শ্যাডো 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

ব্লার 8, স্বচ্ছতা 60%, স্যাচুরেশন 100%, ব্যাসার্ধ 0, বর্ডার 1, শ্যাডো 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

টিন্ট #0f172a, ব্লার 20, স্বচ্ছতা 30%, স্যাচুরেশন 140%, ব্যাসার্ধ 24, শ্যাডো 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

সচরাচর জিজ্ঞাসিত প্রশ্ন

backdrop-filter কী করে?

backdrop-filter এলিমেন্টের পেছনে যা কিছু থাকে তার উপর গ্রাফিক্যাল ইফেক্ট — এখানে ব্লার ও স্যাচুরেশন — প্রয়োগ করে, আর এটিই ফ্রস্টেড-গ্লাস লুক তৈরি করে। জেনারেটর backdrop-filter ও -webkit-backdrop-filter প্রিফিক্স দুটোই আউটপুট করে যাতে এটি বিভিন্ন ব্রাউজারে কাজ করে, সঙ্গে একটি অর্ধ-স্বচ্ছ পটভূমি, বর্ডার ও শ্যাডোও দেয়।

স্বচ্ছতা নিয়ন্ত্রণ কেন আছে?

গ্লাস ইফেক্টের জন্য আংশিকভাবে স্বচ্ছ একটি পটভূমি দরকার যাতে ব্লার করা ব্যাকড্রপ ভেতর দিয়ে দেখা যায়। স্বচ্ছতা স্লাইডার প্যানেলের পটভূমির রঙের (rgba) আলফা সেট করে: কম মান বেশি স্বচ্ছ, বেশি মান বেশি অস্বচ্ছ ও নিরেট।

আমি কি রঙিন বা ডার্ক গ্লাস ব্যবহার করতে পারি?

হ্যাঁ। সোয়াচ দিয়ে যেকোনো টিন্ট রঙ বেছে নিন — টুলটি এটিকে rgba পটভূমিতে মিশিয়ে দেয়, তাই আপনি উষ্ণ, শীতল বা ডার্ক গ্লাস তৈরি করতে পারেন। মুডি ওভারলের জন্য একটি ডার্ক টিন্টকে বেশি স্বচ্ছতার সঙ্গে মেলান, বা ক্লাসিক ফ্রস্টেড প্যানেলের জন্য সাদা রাখুন।

এটি কি প্রতিটি ব্রাউজারে কাজ করবে?

বেশিরভাগ আধুনিক ব্রাউজার backdrop-filter সমর্থন করে। তৈরি হওয়া CSS-এ Safari ও পুরোনো Chromium-এর জন্য -webkit-backdrop-filter প্রিফিক্স অন্তর্ভুক্ত, তবে খুব পুরোনো ব্রাউজার এটি উপেক্ষা করে এবং ব্লার ছাড়াই কেবল অর্ধ-স্বচ্ছ পটভূমি দেখায়।

আমার ডেটা কি কোথাও আপলোড হয়?

না। জেনারেটরটি সম্পূর্ণভাবে আপনার ব্রাউজারে JavaScript দিয়ে চলে — আপনার রঙ ও মান কখনও কোনো সার্ভারে পাঠানো হয় না, তাই এটি ব্যক্তিগতভাবে কাজ করে এবং পেজ একবার লোড হলে অফলাইনেও।