CSS Box Shadow: এলিমেন্টে ছায়া (Shadow) ইফেক্ট যোগ করার গাইড

যখন আপনি CSS-এ একটি এলিমেন্ট ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি সেই এলিমেন্টের ফ্রেমের (frame) চারপাশে একটি ছায়া ইফেক্ট (shadow effect) তৈরি করতে চান। উদাহরণস্বরূপ, আপনি একটি ইমেজ তৈরি করতে চাইতে পারেন যার নিচে একটি ছায়া থাকবে।

এখানেই CSS box-shadow প্রোপার্টি কাজে আসে। box-shadow প্রোপার্টি আপনাকে একটি এলিমেন্টের ফ্রেমের চারপাশে ছায়া ইফেক্ট যোগ করতে দেয়। এই টিউটোরিয়ালে উদাহরণসহ CSS box-shadow প্রোপার্টি কীভাবে ব্যবহার করে ওয়েব এলিমেন্টগুলিতে ছায়া ইফেক্ট যোগ করতে হয় তা আলোচনা করা হয়েছে। 

CSS Box Shadow

box-shadow প্রোপার্টি একটি এলিমেন্টে ছায়া যোগ করে। box-shadow প্রোপার্টি প্রায় সব HTML এলিমেন্টে প্রযোজ্য করা যেতে পারে, এবং এই প্রোপার্টি রাউন্ডেড কর্নার (rounded corners) 가진 এলিমেন্টগুলোর ওপরেও ব্যবহার করা যেতে পারে।

box-shadow প্রোপার্টির সিনট্যাক্স নিম্নরূপ:

box-shadow: offset-x offset-y blur-radius spread color;

চলুন এই সিনট্যাক্সটি ভাঙে দেখি এবং প্রতিটি উপাদান আলোচনা করি:

• offset-x হলো ছায়ার হরিজন্টাল অফসেট (horizontal offset) (আবশ্যক)।
• offset-y হলো ছায়ার ভার্টিক্যাল অফসেট (vertical offset) (আবশ্যক)।
• blur-radius হলো ছায়ার জন্য যোগ করা ব্লার ইফেক্ট (ঐচ্ছিক)।
• spread হলো ব্লার ইফেক্টের স্প্রেড রেডিাস (spread radius) (ঐচ্ছিক)।
• color হলো ছায়ার রঙ (ঐচ্ছিক, ডিফল্টভাবে কালো)।

এখন যেহেতু আমরা box-shadow প্রোপার্টির সিনট্যাক্স জানি, আমরা এই প্রোপার্টির কিছু উদাহরণ কাজে লাগানো দেখতে পারি। নিচের উদাহরণগুলোতে, আমরা নিচের HTML এলিমেন্টটি ব্যবহার করব যা আমরা স্টাইল করতে চাই:

<html>
  <div>
    <p>This is a box.</p>
  </div>

আমাদের HTML এলিমেন্টের নিচের স্টাইল রয়েছে:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
  </style>

এটি হলো আমাদের ডিফল্ট বক্সের চেহারা: কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমাদের বক্স 100px প্রস্থের এবং 200px উচ্চতার। আমাদের বক্সের কন্টেন্টে 10px প্যাডিং (padding) রয়েছে, যার মানে আমাদের বক্সের ভিতরের টেক্সট এবং আমাদের বক্সের বর্ডারের মধ্যে 10px গ্যাপ রয়েছে। 덧붙ে, আমাদের বক্স হালকা নীল। 

হরিজন্টাল এবং ভার্টিক্যাল ছায়া (Horizontal and Vertical Shadow)

box-shadow প্রোপার্টি ব্যবহার করে আপনি সবচেয়ে বেসিক ছায়া যা তৈরি করতে পারেন সেটি হলো একটি হরিজন্টাল এবং ভার্টিক্যাল ছায়া। এখানে আমাদের বক্সের সাথে একটি হরিজন্টাল এবং ভার্টিক্যাল ছায়ার উদাহরণ:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
    div { box-shadow: 10px 10px; }
  </style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমাদের কোডে, আমরা offset-x এবং offset-y অ্যাট্রিবিউট নির্দিষ্ট করেছি এবং উভয়টিই 10px সেট করেছি। এটি একটি ড্রপ শ্যাডো (drop shadow) তৈরি করে যা কালো এবং উভয় অক্ষেই 10 পিক্সেল অফসেট, যেমন আপনি উপরে দেখতে পারেন।

ছায়ার রঙ (Shadow Colors)

আপনি একটি ছায়ায় রঙ নির্দিষ্ট করতে পারেন color অ্যাট্রিবিউট ব্যবহার করে। মান লইজिए আমরা আমাদের ছায়াকে হালকা স্লেটি (light gray) করতে চাই। আমরা নিচের কোড ব্যবহার করে আমাদের box-shadow রঙ পরিবর্তন করতে পারি:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
    div { box-shadow: 10px 10px; }
    div { box-shadow: 10px 10px lightgray; }
  </style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

আমাদের বক্সের এখন একটি হালকা স্লেটি ছায়া রয়েছে।

ছায়ার ব্লার ইফেক্ট (Shadow Blur Effect)

blur-radius অ্যাট্রিবিউট একটি ছায়ায় ব্লার ইফেক্ট যোগ করতে ব্যবহৃত হয়। মান লইজिए আমরা আমাদের ছায়ায় একটি 3px ব্লার চাই, যা এটিকে কিছুটা ব্লারি (blurry) করবে। আমরা নিচের কোড ব্যবহার করে একটি বক্সের জন্য ব্লার সংজ্ঞায়িত করতে পারি:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
    div { box-shadow: 10px 10px; }
    div { box-shadow: 10px 10px 3px lightgray; }
  </style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এই বক্সটি আমাদের গত উদাহরণের সাথে সাদৃশ্য, কিন্তু আপনি যদি ছায়ায় ঘনিষ্ঠভাবে দেখেন তবে আপনি দেখতে পাবেন এটি কিছুটা ব্লার আউট (blurred out) হয়েছে।

স্প্রেড ইফেক্ট (Spread Effect)

যখন আপনি box-shadow প্রোপার্টি ব্যবহার করছেন, আপনি আপনার ছায়ায় একটি স্প্রেড রেডিাস (spread radius) যোগ করতে পারেন। এটি সংজ্ঞায়িত করে ছায়া সব দিকে কতটুকু ছড়িয়ে পড়তে পারে। মান লইজिए আমরা আমাদের ছায়াকে তার চারপাশে 5px ছড়িয়ে দিতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
    div { box-shadow: 10px 10px; }
    div { box-shadow: 10px 10px 5px 5px lightgray; }
  </style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

এই উদাহরণে, আমাদের ছায়া কিছুটা দীর্ঘ। এটি কারণ আমাদের ছায়া 5px দ্বারা এক্সটেন্ড (extend) করা হয়েছে স্প্রেড রেডিাস আমরা নির্দিষ্ট করেছি।

আমাদের কোডে, আমরা যে অ্যাট্রিবিউটগুলো নির্দিষ্ট করেছি সেগুলি নিচের ক্রমে অর্ডার করা হয়েছে:

• offset-x
• offset-y
• blur
• radius
• color

মাল্টিপল শ্যাডো (Multiple Shadows)

box-shadow প্রোপার্টি ব্যবহার করা যেতে পারে একটি এলিমেন্টে একাধিক ছায়া যোগ করতে। আপনি যদি একটি এলিমেন্টে একাধিক ছায়া যোগ করতে চান, তবে আপনি উপরের সিনট্যাক্স ব্যবহার করতে পারেন এবং আপনার ছায়াগুলো কমা (comma) দিয়ে পৃথক করতে পারেন। একাধিক ছায়া তৈরি করার সিনট্যাক্স নিম্নরূপ:

box-shadow: shadow1, shadow2;

যখন আপনি একাধিক ছায়ার সাথে কাজ করছেন, অফসেট মানগুলো প্রতিটি ছায়ার জন্য ভিন্ন হতে হবে। অন্যথায়, আপনার ছায়াগুলো ওভারল্যাপ (overlap) করবে এবং শুধু প্রথম ছায়া যেটি একটি নির্দিষ্ট সেট অফসেট মান অ্যাসাইন করা হয়েছে সেটি দেখাবে।

মান লইজिए আমরা আমাদের বক্সের পিছনে হালকা স্লেটি এবং একটি গোলাপি (pink) ছായা উভয়ই চাই। আমরা নিচের কোড ব্যবহার করে এই ছায়াগুলো তৈরি করতে পারি:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
    div { box-shadow: 10px 10px; }
    div { box-shadow: 5px 5px lightgray, 5px 5px pink; }
  </style>

আমাদের কোডের আউটপুট:

ইনসেট শ্যাডো (Inset Shadows)

inset কীওয়ার্ড ব্যবহার করা যেতে পারে একটি ছায়া এলিমেন্টের ভিতরে দেখাতে। মান লইজिए আমরা আমাদের হালকা স্লেটি ছায়া আমাদের বক্সের ভিতরে দেখাতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

<html>
  <div>
    <p>This is a box.</p>
  </div>
  <style>
    div { height: 100px; width: 200px; padding: 10px; background-color: lightblue; }
    div { box-shadow: 10px 10px; }
    div { box-shadow: 5px 5px lightgray inset; }
  </style>

কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।

inset কীওয়ার্ড আমাদের ছায়াকে একটি আউটার শ্যাডো (outer shadow) থেকে একটি ইনার শ্যাডো (inner shadow) এ পরিবর্তন করতে দেয় যেমন আপনি উপরে দেখতে পারেন।

Box Shadow অ্যাট্রিবিউটস (Box Shadow Attributes)

CSS box-shadow প্রোপার্টির সাথে ব্যবহার করা যেতে পারে অনেক অ্যাট্রিবিউট রয়েছে। এখানে এই অ্যাট্রিবিউটগুলোর একটি রেফারেন্স টেবিল দেওয়া হলো:

উপসংহার (Conclusion)

CSS box-shadow প্রোপার্টি HTML এলিমেন্টগুলিতে ছায়া ইফেক্ট যোগ করতে ব্যবহৃত হয়।

এই টিউটোরিয়ালে, কয়েকটি উদাহরণের রেফারেন্স নিয়ে, box-shadow প্রোপার্টি কীভাবে ব্যবহার করে কাস্টম ছায়া তৈরি করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি পেশাদার ওয়েব ডেভেলপারের মত আপনার নিজস্ব CSS ছায়া তৈরি করা শুরু করার জন্য প্রস্তুত!