CSS3 RGBA রঙের মান হল লাল, সবুজ, নীল এবং আলফার জন্য। আলফা হল রঙের অস্বচ্ছতা অর্থাৎ 0.0 এবং 1.0 এর মধ্যে একটি সংখ্যা। এখানে, 1.0 সম্পূর্ণ অস্বচ্ছ জন্য হবে। এখানে, আমরা RGBA −
-এ আলফা প্যারামিটার দিয়ে তৈরি অস্বচ্ছতার পার্থক্য দেখতে পাচ্ছি
উদাহরণ
আসুন এখন আরজিবিএ রঙের মান -
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html> আউটপুট
CSS3 HSL যখন উপাদানগুলির জন্য রঙ সেট করা হয় তখন রঙ, স্যাচুরেশন এবং হালকাতার জন্য। রঙের মান হল 0 থেকে 260, যেখানে 0 বা 360 হল লালের জন্য, 240 ব্লু-এর জন্য, যেখানে সবুজের জন্য 120৷ স্যাচুরেশন এবং লাইটনেস হল একটি শতাংশ মান।
উদাহরণ
আসুন এখন HSL রঙের মান -
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html> আউটপুট
HSLA রঙের মান হিউ, স্যাচুরেশন, লাইটনেস এবং আলফার জন্য। আলফা হল রঙের অস্বচ্ছতা অর্থাৎ 0.0 এবং 1.0 এর মধ্যে একটি সংখ্যা। এখানে, 0.0 সম্পূর্ণরূপে স্বচ্ছ জন্য, যেখানে 1.0 হবে সম্পূর্ণ অস্বচ্ছের জন্য।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html> আউটপুট
