CSS Opacity

যখন আপনি একটি ওয়েবসাইট ডিজাইন করছেন, আপনি সিদ্ধান্ত নিতে পারেন যে একটি ওয়েব পেজের একটি এলিমেন্ট অন্য এলিমেন্টের চেয়ে বেশি ট্রান্সপেরেন্ট (transparent) দেখাবে। উদাহরণস্বরূপ, আপনি একটি ওয়েব পেজ ডিজাইন করছেন যেখানে অনেক ছবি আছে যেগুলো আপনি কিছুটা ট্রান্সপেরেন্ট দেখাতে চান।

এখানেই CSS opacity প্রপার্টি কাজে আসে। CSS opacity প্রপার্টি একটি ওয়েব এলিমেন্টের ট্রান্সপেরেন্সি (transparency) স্পেসিফাই করতে ব্যবহৃত হয়।

এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করবে কীভাবে opacity প্রপার্টি ব্যবহার করে একটি ওয়েব পেজে এলিমেন্টগুলো ট্রান্সপেরেন্ট করা যায়। এই টিউটোরিয়াল পড়ার শেষে, আপনি CSS-এ opacity প্রপার্টি নিয়ে কাজ করার এক্সপার্ট হয়ে যাবেন।

CSS Opacity Property

CSS opacity প্রপার্টি এলিমেন্টগুলোকে see-through (দেখা যাবে এমন), বা ট্রান্সপেরেন্ট করে।

opacity প্রপার্টির ভ্যালু ০ এবং ১-এর মধ্যে থাকে। opacity প্রপার্টির ভ্যালু যত কম, এলিমেন্টটি তত বেশি ট্রান্সপেরেন্ট দেখাবে। তাই, ০ ভ্যালু একটি এলিমেন্টকে ফুলি অপেক (fully opaque) বা ফুলি ট্রান্সপেরেন্ট করবে, এবং ১ ভ্যালু এলিমেন্টকে নরমাল দেখাবে।

CSS opacity প্রপার্টির সিনট্যাক্স:

img { opacity: 0.5; }

উপরের উদাহরণটি একটি ওয়েব পেজের যেকোনো img এলিমেন্টের opacity ০.৫ এর সমান সেট করবে। এর মানে সব ইমেজ ডিফল্টের চেয়ে ৫০% বেশি ট্রান্সপেরেন্ট দেখাবে।

opacity প্রপার্টি একটি প্যারেন্ট এলিমেন্টে এবং প্যারেন্ট যে চাইল্ড এলিমেন্টগুলো ধারণ করে সেগুলো উভয়ে প্রয়োগ হয়। এর মানে যদি আপনি opacity প্রপার্টি একটি বক্সে অ্যাপ্লাই করেন যেটিতে টেক্সট আছে, তবে বক্স এবং টেক্সট দুটোই অপেক (opaque) হয়ে যাবে।

এখন যেহেতু আমরা opacity প্রপার্টির সিনট্যাক্স আলোচনা করেছি, আমরা এই প্রপার্টি একশনে কীভাবে ব্যবহার করতে হয় তার কিছু উদাহরণের মাধ্যমে যাব।

ট্রান্সপেরেন্ট ইমেজ তৈরি করা

ধরুন আপনি একটি ওয়েবসাইট ডিজাইন করছেন যেখানে আপনি একটি ইমেজকে ট্রান্সপেরেন্ট দেখাতে চান। আপনি opacity CSS প্রপার্টি ব্যবহার করে এই লক্ষ্য অর্জন করতে পারেন।

Opacity ব্যবহার করে একটি ইমেজকে ০.৭ opacity-এ সেট করার একটি উদাহরণ (যা ইমেজকে ৭০% opaque করে):

img { opacity: 0.7; }

আমাদের কোড রিটার্ন করে:

বাম পাশে, আমরা একটি opacity ভ্যালু সেট ছাড়া একটি ইমেজ তৈরি করেছি। এর মানে ইমেজটি ট্রান্সপেরেন্ট নয়। ডান পাশে, আমরা একটি ইমেজ তৈরি করেছি এবং এর opacity ভ্যালু ০.৭ সেট করেছি। ফলস্বরূপ, ডান পাশের ইমেজটি বাম পাশের চেয়ে বেশি ট্রান্সপেরেন্ট।

Hover-এ Opacity ট্রিগার করা

যখন আপনি opacity প্রপার্টি নিয়ে কাজ করছেন, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একটি ইমেজকে আরও বেশি বা কম opaque দেখাতে চান যখন ব্যবহারকারী ইমেজের ওপর হোভার করে।

:hover CSS সিলেক্টর opacity level অ্যাট্রিবিউটের সাথে কাম্বাইন করা যায় একটি ইমেজের ট্রান্সপেরেন্সি লেভেল পরিবর্তন করতে যখন একজন ব্যবহারকারী ইমেজের ওপর হোভার করে।

ধরুন আমরা চাই আমাদের ইমেজগুলো ডিফল্টভাবে ৫০% ট্রান্সপেরেন্ট (অর্থাৎ, ০.৫ opacity ভ্যালু) থাকে। আমরা opacity-এর ভ্যালু ১ সেট করতে চাই যখন ব্যবহারকারী আমাদের ইমেজের ওপর হোভার করে। আমরা এই টাস্ক নিচের কোড ব্যবহার করে অর্জন করতে পারি:

.img { opacity: 0.5; }
.img:hover { opacity: 1; }

আমাদের কোডের ফলাফল:

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

ডিফল্টভাবে, আমাদের ইমেজ ৫০% ট্রান্সপেরেন্ট, কিন্তু যখন একজন ব্যবহারকারী ইমেজের ওপর হোভার করে, আমাদের ইমেজের opacity ১-এ সেট হয় এবং আমাদের ইমেজ ফুলি ভিজিবল (fully visible) হয়।

ট্রান্সপেরেন্ট বক্সেস (Transparent Boxes)

opacity এলিমেন্টটি CSS-এ একটি বক্সকে ট্রান্সপেরেন্ট করার জন্যও ব্যবহার করা যায়।

যখন আপনি opacity প্রপার্টি ব্যবহার করে একটি এলিমেন্টকে ট্রান্সপেরেন্ট করেন, সেই এলিমেন্টের ভিতরে থাকা প্রতিটি এলিমেন্টও আপনি স্পেসিফাই করা opacity শেয়ার করবে।

ধরুন আমাদের দুটি <div> এলিমেন্ট আছে, যেগুলো আমাদের ওয়েব পেজে বক্স তৈরি করে। আমরা এই <div> এলিমেন্টের একটিকে নরমাল দেখাতে চাই, এবং অন্যটিকে ৫০% ট্রান্সপেরেন্ট দেখাতে চাই। আমরা এই টাস্ক অর্জন করতে নিচের কোড ব্যবহার করতে পারি:

.div1 {
  background-color: #B5651D;
  opacity: 0.5;
  text-align: center;
  padding: 20px;
  color: black;
}

আমাদের কোড রিটার্ন করে:

এই উদাহরণে, আমরা দুটি বক্স তৈরি করেছি। উপরের বক্সে নিচের বক্সের মতো একই স্টাইল আছে, কিন্তু কোনো opacity ভ্যালু স্পেসিফাই করা নেই। নিচের বক্সে ০.৫ opacity ভ্যালু সেট আছে, যার মানে বক্সটি ৫০% ট্রান্সপেরেন্ট দেখাচ্ছে।

আপনি দেখতে পাচ্ছেন, আমাদের নিচের বক্সের টেক্সটটিও আরও opaque। এটি হলো কারণ <div> বক্সের ভিতরে থাকা সকল এলিমেন্ট আমরা স্পেসিফাই করা ট্রান্সপেরেন্সি ভ্যালু ইনহেরিট করে।

RGBA Color Transparency

আমাদের উপরের উদাহরণগুলোতে, আমরা opacity প্রপার্টি ব্যবহার করেছি এলিমেন্টগুলোকে বেশি এবং কম opaque করার জন্য। তবে, একটি এলিমেন্টকে ট্রান্সপেরেন্ট করার আর একটি অপ্রোচ (approach) আছে: একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার RGBA কালার ভ্যালু দিয়ে সেট করা।

যখন আপনি কালার নিয়ে কাজ করছেন, আপনি প্রায়শই RGB ব্যবহার করেন একটি কালার ভ্যালু স্পেসিফাই করতে। RGB-র পাশাপাশি, আপনি একটি আলফা (alpha) ভ্যালুও স্পেসিফাই করতে পারেন (RGBA), যা আপনি স্পেসিফাই করা কালারের opacity সেট করে।

এই অপ্রোচটি উপযোগী কারণ এটি আপনাকে একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালারের opacity সেট করতে দেয়, যা সেই এলিমেন্টের ভিতরে থাকা যেকোনো এলিমেন্টে প্রয়োগ হবে না। এটি opacity অ্যাট্রিবিউটের বিপরীতে, যেটি সেই এলিমেন্টের ভিতরে সব এলিমেন্টে প্রয়োগ হয় যেখানে opacity ভ্যালু স্পেসিফাই করা হয়েছে।

আমাদের আগের ব্রাউন বক্স উদাহরণটি নিই। যদি আমরা আমাদের বক্সকে ৭০% ট্রান্সপেরেন্ট করতে চাই, কিন্তু বক্সের ভিতরের টেক্সটকে না, তবে আমরা নিচের কোড ব্যবহার করতে পারি:

.div1 {
  text-align: center;
  padding: 20px;
  color: black;
  background: rgba(181, 101, 29, 0.3);
}

আমাদের কোড রিটার্ন করে:

আমাদের কোডে স্পেসিফাই করা opacity ভ্যালু ০.৩। এর কারণ হলো যত কম opacity, তত বেশি ট্রান্সপেরেন্ট একটি এলিমেন্ট দেখাবে, এবং ০.৩ opacity মানে এলিমেন্টটি ৭০% ট্রান্সপেরেন্ট হবে। আমরা এই উদাহরণে আমাদের টেক্সটের কালর ব্ল্যাক সেট করেছি।

উপরের বক্স হলো আমাদের <div>-এর একটি উদাহরণ কোনো opacity ছাড়া। নিচের বক্স rgba() ভ্যালু ব্যবহার করে তার opacity ০.৩-এ সেট করে। আপনি দেখতে পাচ্ছেন, আমাদের নিচের বক্স উপরের বক্সের চেয়ে উল্লেখযোগ্যভাবে বেশি ট্রান্সপেরেন্ট।

তবে, আমাদের বক্সের কন্টেন্ট—টেক্সট This is a box—কোনো ভাবে বেশি ট্রান্সপেরেন্ট নয়। এর কারণ হলো আমরা বক্সের ব্যাকগ্রাউন্ড কালারকে ট্রান্সপেরেন্ট সেট করেছি।

উপসংহার

CSS opacity প্রপার্টি একটি ওয়েব পেজের এলিমেন্টের ট্রান্সপেরেন্সি সেট করতে ব্যবহৃত হয়।

এই টিউটোরিয়াল উদাহরণের রেফারেন্সে আলোচনা করেছি কীভাবে opacity অ্যাট্রিবিউট ব্যবহার করে একটি ইমেজ এবং একটি বক্সের opacity পরিবর্তন করতে হয়। এই টিউটোরিয়াল আরও এক্সপ্লোর করেছি কীভাবে RGBA কালার ব্যবহার করে CSS-এ ট্রান্সপেরেন্ট ইফেক্ট তৈরি করা যায়। এখন আপনি opacity অ্যাট্রিবিউট প্রোফেশনালের মতো ব্যবহার করার জন্য যে জ্ঞান দরকার সেটা लेकर সুসজ্জিত!