CSS3-এ রং সংজ্ঞায়িত করতে RGB, RGBA, HSL এবং HSLA ব্যবহার করুন। এর সাথে কালার ভ্যালু এবং হেক্সাডেসিম্যাল ভ্যালুও রং সংজ্ঞায়িত করতে ব্যবহার করা যায়।
CSS3 RGBA কালার ভ্যালু হল Red, Green, Blue এবং Alpha-এর জন্য। Alpha হল কালার অপাসিটি অর্থাৎ ০.০ এবং ১.০ এর মধ্যে একটি নম্বর। এখানে, ১.০ হবে ফুল অপেক 위한। এখানে, আমরা RGBA-এ Alpha প্যারামিটারের মাধ্যমে অপাসিটির পার্থক্য দেখতে পাচ্ছি:
উদাহরণ
এখন 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 হল Hue, Saturation এবং Lightness-এর জন্য যখন এলিমেন্টের জন্য রং সেট করা হয়। Hue ভ্যালু ০ থেকে ৩৬০, যেখানে ০ বা ৩৬০ লালের জন্য, ২৪০ নীলের জন্য, আবার ১২০ সবুজের জন্য। Saturation এবং Lightness হল পার্সেন্টেজ ভ্যালু।
উদাহরণ
এখন 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 কালার ভ্যালু হল Hue, Saturation, Lightness এবং Alpha-এর জন্য। Alpha হল কালার অপাসিটি অর্থাৎ ০.০ এবং ১.০ এর মধ্যে একটি নম্বর। এখানে, ০.০ ফুলি ট্রান্সপারেন্টের জন্য, যখন ১.০ হবে ফুল অপেক 위한।
উদাহরণ
এখন একটি উদাহরণ দেখি:
<!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>
আউটপুট
উদাহরণ
এখন হেক্সাডেসিম্যাল ভ্যালু দিয়ে রং সেট করা দেখি:
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: #B13838;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</div>
</body>
</html>
আউটপুট
