CSS3-তে রং নির্ধারণ করতে, RGB, RGBA, HSL এবং HSLA ব্যবহার করুন। এর সাথে, আপনি রঙের মান ব্যবহার করতে পারেন এবং হেক্সাডেসিমেল মানটিও রং নির্ধারণের জন্য ব্যবহার করা যেতে পারে -
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> আউটপুট
উদাহরণ
আসুন এখন দেখি কিভাবে হেক্সাডেসিমেল মান সহ রং সেট করা যায় −
<!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> আউটপুট
