CSS অস্বচ্ছতা

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

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

এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করবে, কিভাবে একটি ওয়েব পৃষ্ঠায় উপাদানগুলিকে স্বচ্ছ করতে অস্বচ্ছতা বৈশিষ্ট্য ব্যবহার করতে হয়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS-এ অপাসিটি প্রপার্টি নিয়ে কাজ করার ক্ষেত্রে একজন বিশেষজ্ঞ হয়ে উঠবেন।

CSS অপাসিটি প্রপার্টি

সিএসএস অপাসিটি বৈশিষ্ট্য উপাদানগুলিকে দেখা বা স্বচ্ছ করে তোলে।

অপাসিটি প্রপার্টির মান 0 এবং 1 এর মধ্যে। অপাসিটি প্রপার্টির মান যত কম হবে, একটি উপাদান তত বেশি স্বচ্ছ হবে। সুতরাং, 0 এর মান একটি উপাদানকে সম্পূর্ণরূপে অস্বচ্ছ বা সম্পূর্ণ স্বচ্ছ করে তুলবে এবং 1 এর মান একটি উপাদানকে স্বাভাবিক হিসাবে দেখাবে।

এখানে সিএসএস অপাসিটি প্রপার্টির সিনট্যাক্স রয়েছে:

img { opacity: 0.5; }

উপরের উদাহরণটি যেকোনো img-এর অপাসিটি সেট করবে একটি ওয়েব পৃষ্ঠার উপাদান 0.5 এর সমান হতে হবে। এর অর্থ হল সমস্ত চিত্রগুলি ডিফল্টরূপে তাদের চেয়ে 50% বেশি স্বচ্ছ প্রদর্শিত হবে৷

অপাসিটি বৈশিষ্ট্যটি অভিভাবক উপাদান এবং পিতামাতার মধ্যে থাকা যেকোনো শিশু উপাদান উভয়ের ক্ষেত্রেই প্রয়োগ করা হয়। এর মানে হল যে আপনি যদি একটি বাক্সে অপাসিটি বৈশিষ্ট্য প্রয়োগ করেন যাতে পাঠ্য অন্তর্ভুক্ত থাকে, তাহলে বাক্স এবং পাঠ্য উভয়ই অস্বচ্ছ হয়ে যাবে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

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

একটি স্বচ্ছ চিত্র তৈরি করা

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

একটি চিত্রকে 0.7 অপাসিটিতে সেট করতে অস্বচ্ছতার একটি উদাহরণ এখানে দেওয়া হল (যা ছবিটিকে 70% অস্বচ্ছ করে তোলে):

img {
	opacity: 0.7;
}

আমাদের কোড ফিরে আসে:

বাম দিকে, আমরা কোন অপাসিটি মান সেট না করে একটি ইমেজ তৈরি করেছি। এর মানে ছবিটি স্বচ্ছ নয়। ডানদিকে, আমরা একটি চিত্র তৈরি করেছি এবং এর অপাসিটি মান 0.7 সেট করেছি। ফলস্বরূপ, ডান পাশের ছবিটি বাম দিকের ছবির চেয়ে বেশি স্বচ্ছ৷

হোভারে অস্বচ্ছতা ট্রিগার করুন

আপনি যখন অপাসিটি প্রপার্টি নিয়ে কাজ করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে ব্যবহারকারী যখন ইমেজের উপর ঘোরাফেরা করে তখন আপনি একটি ইমেজ কম বা বেশি অস্বচ্ছ দেখাতে চান।

:hover CSS নির্বাচকটি অস্বচ্ছতা স্তর বৈশিষ্ট্যের সাথে একত্রে ব্যবহার করা যেতে পারে একটি চিত্রের স্বচ্ছতার স্তর পরিবর্তন করতে যখন একজন ব্যবহারকারী ছবির উপর ঘোরায়।

ধরুন আমরা ডিফল্টরূপে আমাদের ছবিগুলিকে 50% স্বচ্ছ (অথবা অন্য কথায়, একটি 0.5 অপাসিটি মান রাখতে চাই)। ব্যবহারকারী যখন আমাদের ছবির উপর ঘোরায় তখন আমরা অস্বচ্ছতার মান 1 এ সেট করতে চাই। আমরা নিম্নলিখিত কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

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

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

ডিফল্টরূপে, আমাদের ছবি 50% স্বচ্ছ, কিন্তু যখন কোনও ব্যবহারকারী ছবির উপর ঘোরাফেরা করে, তখন আমাদের ছবির অপাসিটি 1 এ সেট করা হয় এবং আমাদের ছবিটি সম্পূর্ণরূপে দৃশ্যমান হয়৷

স্বচ্ছ বাক্স

CSS-এ একটি বক্সকে স্বচ্ছ করতেও অপাসিটি উপাদান ব্যবহার করা যেতে পারে।

আপনি যখন একটি উপাদানকে স্বচ্ছ করতে অস্বচ্ছতা বৈশিষ্ট্য ব্যবহার করেন, তখন সেই উপাদানের মধ্যে থাকা প্রতিটি উপাদান আপনার নির্দিষ্ট করা অস্বচ্ছতাও ভাগ করবে৷

ধরুন আমাদের দুটি

উপাদান আছে, যা আমাদের ওয়েব পেজে বক্স তৈরি করে। আমরা চাই যে এই

উপাদানগুলির একটি স্বাভাবিক হিসাবে প্রদর্শিত হোক এবং অন্যটি 50% স্বচ্ছ প্রদর্শিত হোক। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

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

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমরা দুটি বাক্স তৈরি করেছি। উপরের বাক্সে নীচের বাক্সের মতো একই শৈলী রয়েছে, তবে কোনও অস্বচ্ছতার মান নির্দিষ্ট করা নেই। নীচের বাক্সে 0.5 সেটের একটি অপাসিটি মান রয়েছে, যার মানে বাক্সটি 50% স্বচ্ছ দেখাচ্ছে।

আপনি দেখতে পাচ্ছেন, আমাদের নীচের বাক্সের পাঠ্যটি আরও অস্বচ্ছ। এর কারণ হল

বক্সের ভিতরের সমস্ত উপাদান আমাদের নির্দিষ্ট করা স্বচ্ছতার মানকে উত্তরাধিকারী করে।

RGBA রঙের স্বচ্ছতা

আমাদের উপরের উদাহরণগুলিতে, আমরা উপাদানগুলিকে আরও কম অস্বচ্ছ করতে অস্বচ্ছতা বৈশিষ্ট্য ব্যবহার করেছি। যাইহোক, একটি উপাদানকে স্বচ্ছ করতে আপনি ব্যবহার করতে পারেন এমন আরেকটি পদ্ধতি রয়েছে:RGBA রঙের মান ব্যবহার করে একটি উপাদানের পটভূমির রঙ সেট করুন।

আপনি যখন রঙের সাথে কাজ করছেন, আপনি প্রায়শই একটি রঙের মান নির্দিষ্ট করতে RGB ব্যবহার করবেন। RGB ব্যবহার করার পাশাপাশি, আপনি একটি আলফা মান (RGBA) নির্দিষ্ট করতে পারেন, যা আপনার নির্দিষ্ট করা রঙের অস্বচ্ছতা সেট করে।

এই পদ্ধতিটি উপযোগী কারণ এটি আপনাকে একটি উপাদানের পটভূমির রঙের জন্য অস্বচ্ছতা সেট করতে দেয়, যা আরও স্বচ্ছ করা উপাদানের মধ্যে কোনো উপাদানে প্রয়োগ করা হবে না। এটি অপাসিটি অ্যাট্রিবিউটের বিপরীতে, যেটি উপাদানের মধ্যে সমস্ত উপাদানের ক্ষেত্রে প্রয়োগ করা হয় যেখানে একটি অস্বচ্ছতার মান নির্দিষ্ট করা হয়।

আগে থেকে আমাদের ব্রাউন বক্সের উদাহরণ নেওয়া যাক। যদি আমরা আমাদের বাক্সটিকে 70% স্বচ্ছ করতে চাই, কিন্তু বাক্সের ভিতরের টেক্সট না করে, তাহলে আমরা নিম্নলিখিত কোডটি ব্যবহার করতে পারি:

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

আমাদের কোড ফিরে আসে:

আমাদের কোডে আমরা যে অপাসিটি মান উল্লেখ করি তা হল 0.3। কারণ অস্বচ্ছতা যত কম হবে, একটি উপাদান তত বেশি স্বচ্ছ হবে এবং 0.3 অস্বচ্ছতার মানে হল যে উপাদানটি 70% স্বচ্ছ হবে। আমরা এই উদাহরণে আমাদের পাঠ্যের রঙ কালো করার জন্য সেট করেছি।

টপ বক্স কোন অপাসিটি ছাড়াই আমাদের

এর একটি উদাহরণ। নীচের বাক্সটি একটি rgba() ব্যবহার করে এর অপাসিটি 0.3 এ সেট করতে মান। আপনি দেখতে পাচ্ছেন, আমাদের নীচের বাক্সটি উপরের বাক্সের তুলনায় উল্লেখযোগ্যভাবে বেশি স্বচ্ছ।

যাইহোক, আমাদের বাক্সের বিষয়বস্তু—পাঠ্য This is a box .—আরো স্বচ্ছ নয়। কারণ আমরা বক্সের ব্যাকগ্রাউন্ড কালারকে স্বচ্ছ করতে সেট করেছি।

উপসংহার

CSS অপাসিটি প্রপার্টি একটি ওয়েব পেজে একটি উপাদানের স্বচ্ছতা সেট করতে ব্যবহৃত হয়।

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