CSS বক্স-শ্যাডো জেনারেটর

CSS বক্স-শ্যাডো জেনারেটর কী?

CSS বক্স-শ্যাডো জেনারেটর হলো CSS box-shadow প্রপার্টির জন্য একটি বিনামূল্যের ভিজ্যুয়াল এডিটর, যা ফ্রন্ট-এন্ড ডেভেলপার ও ডিজাইনারদের জন্য তৈরি। এক বা একাধিক ছায়ার স্তর যোগ করুন এবং প্রতিটি স্তরের offset-x, offset-y, ব্লার ব্যাসার্ধ, স্প্রেড ব্যাসার্ধ, রঙ এবং inset বিকল্প সহজ সংখ্যা ইনপুট ও কালার পিকার দিয়ে সমন্বয় করুন। দাবার ছকের মতো পটভূমিতে একটি লাইভ প্রিভিউ বক্স সম্মিলিত ফলাফল রিয়েল-টাইমে দেখায়, এবং সম্পূর্ণ box-shadow ঘোষণা — প্রতিটি স্তরকে কমা দিয়ে আলাদা করে — আপনার কপি করার জন্য তৈরি হয়। মানের ক্রম মুখস্থ না করেই কোমল উচ্চতার ছায়া, ধারালো নিউমরফিজম, গ্লো প্রভাব, বা Material-শৈলীর স্তরীভূত গভীরতা তৈরি করতে এটি ব্যবহার করুন।

CSS বক্স-শ্যাডো জেনারেটর কীভাবে ব্যবহার করবেন

1. প্রথম স্তরের offset-x ও offset-y (px-এ) নির্ধারণ করুন যাতে ছায়া অনুভূমিক ও উল্লম্বভাবে সরে; ঋণাত্মক মান একে বামে বা উপরে সরায়।
2. ব্লার ব্যাসার্ধ (ছায়া কতটা কোমল) এবং স্প্রেড ব্যাসার্ধ (এটি কতটা বাড়ে বা কমে) সমন্বয় করুন।
3. সোয়াচ দিয়ে রঙ বাছুন বা একটি হেক্স মান টাইপ করুন — #00000040-এর মতো ৮-অঙ্কের হেক্স ছায়ার স্বচ্ছতা নির্ধারণ করে।
4. ছায়াটি উপাদানের বাইরে না এঁকে ভেতরে আঁকতে inset চেকবক্সে টিক দিন।
5. উপরে আরেকটি ছায়া সাজাতে স্তর যোগ করুন-এ ক্লিক করুন, তারপর মান সম্পাদনা করে পুনর্বিন্যাস করুন; যেকোনো স্তর তার ট্র্যাশ বোতাম দিয়ে মুছুন।
6. প্রিভিউ আপডেট হতে দেখুন, তারপর তৈরি করা box-shadow CSS আপনার স্টাইলশিটে কপি করুন।

উদাহরণ

x 0, y 4, ব্লার 12, স্প্রেড 0, রঙ #00000040

box-shadow: 0px 4px 12px 0px #00000040;

স্তর 1: 0 1 2 0 #0000001a · স্তর 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset টিক দেওয়া, x 0, y 2, ব্লার 6, স্প্রেড 0, রঙ #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

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

box-shadow মানগুলোর ক্রম কী?

প্রতিটি স্তর offset-x, offset-y, ব্লার ব্যাসার্ধ, স্প্রেড ব্যাসার্ধ, রঙ হিসেবে লেখা হয়, সামনে একটি ঐচ্ছিক inset কীওয়ার্ড সহ। এই টুলটি সবসময় চারটি দৈর্ঘ্যই px-এ আউটপুট করে (offset-x, offset-y, ব্লার, স্প্রেড), তাই ক্রম দ্ব্যর্থহীন এবং পরে হাতে সমন্বয় করা সহজ।

আমি কি আধা-স্বচ্ছ বা রঙিন ছায়া যোগ করতে পারি?

হ্যাঁ। রঙ ক্ষেত্রে যেকোনো CSS রঙ টাইপ করুন — #00000040-এর মতো সম্পূর্ণ ৮-অঙ্কের হেক্স (শেষ দুটি অঙ্ক হলো আলফা) একটি আধা-স্বচ্ছ ছায়া দেয়, এবং আপনি নামযুক্ত রঙ বা যেকোনো হেক্স ব্যবহার করতে পারেন। পিকার সোয়াচ নিরেট #rrggbb রঙ সামলায়; আলফার জন্য টেক্সট ক্ষেত্র সম্পাদনা করুন।

আমি কীভাবে একাধিক ছায়া সাজাব?

প্রতিটি অতিরিক্ত ছায়ার জন্য স্তর যোগ করুন-এ ক্লিক করুন। তৈরি করা CSS প্রতিটি স্তরকে উপর থেকে নিচ ক্রমে কমা দিয়ে আলাদা করে — প্রথম স্তরটি সবার শেষে (উপরে) আঁকা হয়। এটি Material-শৈলীর স্তরীভূত গভীরতার জন্য বা একটি বাইরের গ্লোকে inset হাইলাইটের সঙ্গে মিলিয়ে ব্যবহার করুন।

inset চেকবক্স কী করে?

inset ছায়াটি উপাদানের সীমানার ভেতরে আঁকে, যা বাইরের ড্রপ শ্যাডোর পরিবর্তে চাপা বা অভ্যন্তরীণ-গ্লো চেহারা তৈরি করে। প্রতি স্তরে এটিতে টিক দিন; একই box-shadow মানে inset ও বাইরের ছায়া মেশাতে পারেন।

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

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