সিএসএস অপাসিটি বা সচ্ছতা
সিএসএস-এ কোনো এলিমেন্টকে উজ্জ্বল বা অনুজ্জ্বল অথবা সচ্ছ বা অসচ্ছ করতে opacity প্রোপার্টি ব্যবহার করবো।
ট্রান্সপারেন্ট ইমেজ
কোনো ইমেজকে সচ্ছ বা অসচ্ছ করতে আমরা opacity প্রোপার্টি ব্যবহার করতে পারি। এই ক্ষেত্রে আমরা 0.0 থেকে 1.0 পর্যন্ত ভ্যালু নিতে পারবো। এখানে ভ্যালু যত কম হবে তত বেশি অসচ্ছ বা ট্রান্সপারেন্ট হয়ঃ
opacity 0.3
opacity 0.5
opacity 1
ডিফল্ট
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>image Tranparency</title>
<style>
img {
opacity: 0.5;
/*ইন্টারনেট এক্সপ্লোরার ৮ এর পূর্বের ভার্সনের জন্য */
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<h1>ইমেজ Tranparency</h1>
<p>একটি এলিমেন্টে নির্দিষ্ট ট্রান্সপেরেন্সির জন্য opacity প্রোপার্টি। নিম্ন মানের জন্য অধিক ট্রান্সপেরেন্সিঃ</p>
<p>ইমেজে 50% opacity :</p>
<img src="../css_examples/satt_bangla1.jpg" alt="natural beauty" width="100" height="80">
</body>
</html>
ফলাফল
ট্রান্সপারেন্ট হোভার ইফেক্ট
এখন আমরা opacity এবং :hover এই দুইটি প্রোপার্টিকে একত্রে ব্যবহার করে আমরা ইমেজে হোভারের মধ্যে opacity ইফেক্ট দিবঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>image Tranparency</title>
<style>
img {
opacity: 0.6;
filter: alpha(opacity=50); /*ইন্টারনেট এক্সপ্লোরার৮ এর পূর্বের ভার্সনের জন্য */
}
img:hover {
opacity: 1.5;
filter: alpha(opacity=100); /*ইন্টারনেট এক্সপ্লোরার৮ এর পূর্বের ভার্সনের জন্য */
}
</style>
</head>
<body>
<h1>ইমেজ Transparency</h1>
<p> opacity প্রোপার্টির সাথে :hover সিলেক্টর ব্যবহার করলে, পরে mouse-over এ opacity পরিবর্তন হয়ঃ</p>
<img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">
<img src="../css_examples/satt_bangla1.jpg" alt="natural bauty" width="100" height="80">
<img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">
</body>
</html>
ফলাফল
এই ইমেজ গুলোতে হোভার করলে ইমেজ গুলো অসচ্ছ দেখাবে। এই উদাহরণটি আগের উদাহরনের ঠিক বিপরীত করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>image Tranparency</title>
<style>
img {
opacity: 0.7;
filter: alpha(opacity=50); /*ইন্টারনেট এক্সপ্লোরার৮ এর পূর্বের ভার্সনের জন্য */
}
</style>
</head>
<body>
<h1>ইমেজ Transparency</h1>
<p>opacity প্রোপার্টির সাথে :hover সিলেক্টর ব্যবহার করলে, পরে mouse-over এ opacity পরিবর্তন হয়ঃ</p>
<img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">
<img src="../css_examples/satt_bangla1.jpg" alt="natural bauty" width="100" height="80"
><img src="../css_examples/satt.jpg" alt="SATT" width="100" height="80">
</body>
</html>
ফলাফল
RGBA মাধ্যমে ট্রান্সপারেন্ট
আপনি যদি একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করতে চান, সেক্ষেত্রে আপনি RGBA ব্যবহার করতে পারেন। RGBA কালার ভ্যালু হচ্ছে RGB কালারের প্রসারিত অংশ যার সাথে alpha channel থাকে, যা কালারের opacity নির্দেশ করে। নিচের উদাহরনে শুধু ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করা হয়েছে কিন্তু টেক্সট গুলোতে করা হয়নিঃ
100% opacity
60% opacity
30% opacity
10% opacity
টিপসঃ RGBA কালার সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস কালার অধ্যায়টি দেখুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Tranparency box</title>
<style>
div {
background: rgb(89, 142,155);
padding: 10px;
}
div.first {
background: rgba(76, 175, 80, 0.2);
}
div.second {
background: rgba(76, 175, 80, 0.5);
}
div.third {
background: rgba(82, 155, 75, 0.7);
}
</style>
</head>
<body>
<h3>Transparent বক্স</h3>
<p> opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p> RGBA কালার ভ্যালু:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>লক্ষ্য করুন কিভাবে opacity প্রোপার্টি ব্যবহার করলে টেক্সট এর background কালার স্বচ্ছতা পায়।</p>
</body>
</html>
ফলাফল
ট্রান্সপারেন্ট টেক্সট বক্স
তারুণ্যই সফলতা, তারুণ্যই স্যাট। তারুণ্যেই গড়বে ডিজিটাল বাংলাদেশ।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Tranparency box</title>
<style>
div.box {
background: url(../css_examples/satt_bangla1.jpg) repeat;
border: 2.5px solid red;
}
div.transparent {
margin: 40px;
background-color: LightCyan;
border: 1px solid aqua;
opacity: 0.6;
filter: alpha(opacity=70); /* ইন্টারনেট এক্সপ্লোরার ৮ এর পূর্বের ভার্সনের জন্য */
}
div.transparent p {
margin: 8%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="box">
<div class="transparent">
<p> transparent বক্সের ভিতরে লেখা।</p>
</div>
</div>
</body>
</html>
ফলাফল