X

X

X

CSS3 Colors । রং


CSS3 রং

CSS এ রং ব্যবহার করার জন্য color names, hexadecimal এবং RGB color কোড ব্যবহার করা যায়।

এছাড়াও CSS3 তে আরও নতুন কিছু ফিচার যুক্ত হয়েছে:

  • RGBA color
  • HSL color
  • HSLA color
  • opacity

Browser Support

উল্লিখিত ব্রাউজারসমূহ ও তাদের প্রথম সাপোর্টেড ভার্শন টেবিলে উল্লেখ্য করা হলো:

Property
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacity 4.0 9.0 2.0 3.1 10.1

RGBA Color

RGBA হচ্ছে RGB color এর একটি ভার্শন যেটিতে alpha channel কোড যুক্ত করা হয়েছে, যেটি দিয়ে রংয়ের অপাসিটি বা স্বচ্ছতা নির্ধারণ করা হয়।

RGBA Color লিখার পদ্ধতি: rgba(red, green, blue, alpha) । alpha parameter এর মান 0.0 (fully transparent) থেকে 1.0 (fully opaque) পর্যন্ত হয়ে থাকে।

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

নিচের উদাহরণে বিভিন্ন ধরণের RGBA color এর বর্ণনা দেওয়া হলো:

Code Example

#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HSL Color

HSL এর মান Hue, Saturation এবং Lightness নিয়ে গঠিত।

HSL color লিখার পদ্ধতি: hsl(hue, saturation, lightness) ।

  1. Hue হচ্ছে color wheel এর ডিগ্রীর মান। (0 থেকে 360):
    • 0 (অথবা 360) হচ্ছে red
    • 120 হচ্ছে green
    • 240 হচ্ছে blue
  2. Saturation হচ্ছে একটি percentage মান : 100% এর অর্থ হলো পরিপূর্ণ রং।
  3. Lightness ও একটি percentage মান : 0% হচ্ছে dark (black) এবং 100% হচ্ছে white.
hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

উপরের উদাহরণে বিভিন্ন HSL color এর বর্ণনা দেওয়া হলো:

Code Example

#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HSLA Color

এককথায় HSLA color = HSL Color + Opacity (A)

HSLA color value লিখার পদ্ধতি: hsla(hue, saturation, lightness, alpha) । alpha এর মান 0.00 থেকে 1.00 পর্যন্ত যেকোনো সংখ্যা হতে পারে।

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

নিচে বিভিন্ন HSLA color এর উদাহরণ দেওয়া হলো:

Code Example

#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Opacity

CSS3 opacity property ব্যবহার করে কোনো ইলামেন্টের ব্যাকগ্রাউন্ড ও টেক্সটের স্বচ্ছতার মান নির্ধারণ করা হয়।

opacity property এর মান অবশ্যই 0.0 (fully transparent) ও 1.0 (fully opaque) এর মধ্যবর্তী হতে হবে।

rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;

মনে রাখবেন opacity এর মান সেট করলে সেটি টেক্সটের রংয়ের উপরও প্রভাব ফেলবে।

নিচে অপাসিটি সহ বিভিন্ন ইলামেন্ট দেখানো হলো:

Code Example

#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »