CSS Box Shadow-এর মূল উপাদানসমূহ এবং তাদের কার্যকারিতা
CSS box-shadow প্রোপার্টি ওয়েব ডিজাইনে এলিমেন্টের গভীরতা এবং ত্রিমাত্রিকতা ফুটিয়ে তোলার জন্য ব্যবহৃত হয়। একটি নিখুঁত শ্যাডো তৈরি করতে কয়েকটি নির্দিষ্ট প্যারামিটার নিয়ন্ত্রণ করতে হয়, যা এই টুলের স্লাইডারগুলোর মাধ্যমে সরাসরি পরিবর্তন করা যায়।
- অনুভূমিক অফসেট: এই স্লাইডারটি শ্যাডোকে ডানে বা বামে সরিয়ে নেয়। এর সীমা -50px থেকে 50px পর্যন্ত নির্ধারিত। ধনাত্মক মান শ্যাডোকে ডানদিকে এবং ঋণাত্মক মান বামদিকে সরিয়ে দেয়।
- উল্লম্ব অফসেট: এটি শ্যাডোকে উপরে বা নিচে স্থানান্তরিত করে। এর সীমাও -50px থেকে 50px পর্যন্ত। ধনাত্মক মান শ্যাডোকে নিচের দিকে এবং ঋণাত্মক মান উপরের দিকে নিয়ে যায়।
- ব্লার (Blur): শ্যাডোর চারপাশের সীমানা কতটা নরম বা ঝাপসা হবে তা এটি নির্ধারণ করে। এর সীমা 0px থেকে 100px পর্যন্ত। মান যত বেশি হবে, শ্যাডো তত বেশি ছড়িয়ে পড়বে এবং নরম দেখাবে।
- স্প্রেড: ব্লার হওয়ার আগে শ্যাডোটি আকারে কতটা বড় বা ছোট হবে তা এটি নিয়ন্ত্রণ করে। এর সীমা -50px থেকে 50px পর্যন্ত। ঋণাত্মক স্প্রেড শ্যাডোকে ভেতরের দিকে টেনে নেয়, যা সূক্ষ্ম শ্যাডো তৈরির জন্য অত্যন্ত কার্যকর।
সাধারণ শ্যাডো বনাম ইনসেট শ্যাডো
ডিজাইনের প্রয়োজনের ওপর ভিত্তি করে শ্যাডোকে এলিমেন্টের বাইরে অথবা ভেতরে স্থাপন করা যায়।
একটি সাধারণ শ্যাডো এলিমেন্টের বাইরের দিকে তৈরি হয়, যা এলিমেন্টটিকে স্ক্রিন থেকে উপরে ভেসে থাকার বিভ্রম দেয়। এটি সাধারণত কার্ড বা বাটনের ক্ষেত্রে ব্যবহার করা হয়।
অন্যদিকে, যখন "ভেতরের শ্যাডো (Inset)" অপশনটি সক্রিয় করা হয়, তখন শ্যাডোটি এলিমেন্টের ভেতরের দিকে উল্টে যায়। এর ফলে এলিমেন্টটি ভেতরের দিকে দেবে গেছে বা বসে গেছে বলে মনে হয়। দেবে থাকা ইনপুট ফিল্ড বা চাপ দেওয়া বাটনের ভিজ্যুয়াল ইফেক্ট তৈরি করতে এই ইনসেট শ্যাডো ব্যবহার করা হয়।
একাধিক লেয়ার ব্যবহারের মাধ্যমে গভীরতা তৈরি
বাস্তবসম্মত শ্যাডো তৈরির জন্য ডিজাইনার ও ফ্রন্ট-এন্ড ডেভেলপাররা প্রায়ই একাধিক শ্যাডো লেয়ার ব্যবহার করেন। একটি মাত্র শ্যাডো লেয়ার দিয়ে অনেক সময় বাস্তবসম্মত গভীরতা পাওয়া যায় না। এই টুলে "লেয়ার যোগ করুন" বাটনে ক্লিক করে নতুন শ্যাডো লেয়ার যুক্ত করা যায় এবং "লেয়ার বাদ দিন" বাটনের সাহায্যে যেকোনো লেয়ার মুছে ফেলা যায়।
টুলটিতে প্রাথমিকভাবে পাঁচটি লেয়ার প্রি-রেন্ডার করা থাকে। এর মধ্যে প্রথম লেয়ারটির ডিফল্ট মান থাকে 0 8 24 -4 এবং এর রঙ ১৮% ট্রান্সপারেন্ট ব্ল্যাক বা কালো সেট করা থাকে। বাকি চারটি লেয়ার শুরুতে লুকানো থাকে। যখন একাধিক লেয়ার সক্রিয় থাকে, তখন জেনারেটরটি স্বয়ংক্রিয়ভাবে সেগুলোকে কমা (,) দ্বারা পৃথক করে একটি একক CSS কোড আউটপুট হিসেবে প্রস্তুত করে।
ব্রাউজার-ভিত্তিক প্রসেসিং এবং ডেটা প্রাইভেসি
এই টুলটি ব্যবহারের সময় আপনার ডেটার গোপনীয়তা সম্পূর্ণরূপে বজায় থাকে। প্রতিটি শ্যাডো সরাসরি আপনার নিজস্ব ব্রাউজারে রেন্ডার করা হয়। আপনি স্লাইডারে যে সমস্ত মান সেট করছেন বা যে রঙ নির্বাচন করছেন, তার কোনো কিছুই BroBroGo-তে আপলোড করা হয় না। সমস্ত প্রসেসিং স্থানীয়ভাবে আপনার ডিভাইসেই সম্পন্ন হয়।
প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ)
offset, blur এবং spread আসলে কী নিয়ন্ত্রণ করে? Offset শ্যাডোটিকে ডানে/বামে এবং উপরে/নিচে সরিয়ে নেয়, blur এর চারপাশকে নরম করে এবং spread ব্লার করার আগে শ্যাডোটিকে বড় বা ছোট করে। একটি নেতিবাচক (negative) স্প্রেড শ্যাডোটিকে ভেতরের দিকে টেনে নেয়, যা একটি নিখুঁত ও কাছাকাছি শ্যাডোর জন্য উপযোগী।
inset অপশনটি কী কাজ করে? একটি সাধারণ শ্যাডো এলিমেন্টের বাইরে পড়ে, যেমন একটি উঁচু কার্ডের পেছনে আলো পড়লে হয়। Inset এটিকে ভেতরের দিকে উল্টে দেয়, যাতে এলিমেন্টটি ভেতরের দিকে দেবে গেছে বলে মনে হয় — এটি দেবে থাকা ইনপুট বা প্রেস করা বাটনের জন্য বেশ উপযোগী।
একাধিক শ্যাডো লেয়ার কেন ব্যবহার করবেন? একটি একক শ্যাডো একটি নির্দিষ্ট আকারের পর ফ্ল্যাট দেখায়। বাস্তবসম্মত গভীরতা তৈরি করতে সাধারণত একটি গাঢ় শ্যাডো এবং একটি হালকা, চওড়া শ্যাডোর সংমিশ্রণ ব্যবহার করা হয় — এই ইফেক্টটি পেতে দ্বিতীয় একটি লেয়ার যোগ করুন এবং প্রতিটি আলাদাভাবে টিউন করুন।