সিএসএস৩ রঙ - Css3 Colour


সিএসএস এর 3.0 সংস্করণে রঙ বাবহারে অনেক বৈচিত্র্য যোগ করা হয়েছে। এই সংস্করণ বা version ওয়েব পেজে রঙের ব্যাবহার কে আরও সম্প্রসারিত করেছে।


রঙের ব্যবহার

সিএসএস এ রঙের নাম, হেক্সাডেসিমাল মান এবং RGB মান ব্যাবহার করে কোন এলিমেন্টে রঙ ব্যাবহার করা যায়, অর্থাৎ এই পদ্ধতি গুলো সমর্থন বা support করে।
কিন্তু সিএসএস 3.0 এ রঙের ক্ষেত্রে নিচের পদ্ধতি গুলোও আরও সম্প্রসারিত ভাবে সমর্থন বা support করে।

নিচে এই পদ্ধতি গুলোর ধারাবাহিক বর্ণনা দেখুন।


RGBA পদ্ধতি

RGBA পদ্ধতি হল RGB পদ্ধতিরই একটি বর্ধিত রুপ যেখানে একটি আলফা চ্যানেল বা alpha channel যুক্ত করা হয়েছে যা কোন রঙের স্বচ্ছতা নির্ধারণ করে।
RGBA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ -

ফরম্যাট

rgba(red, green, blue, alpha)

ওপরের সিনট্যাক্সে প্রথম তিনটি মান RGB মান বা value অর্থাৎ red, green এবং blue রঙের পরিমান নির্ধারণ করে আর চতুর্থ মানটি হল আলফা মান যা রঙের স্বচ্ছতা বা Opacity নির্ধারণ করে।

এখানে আলফা প্যারামিটারটি হল ০.০ (সম্পূর্ণ স্বচ্ছ) থেকে ১.০ (স্বচ্ছ নয়) এর মধ্যবর্তী কোন মান যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।

rgba(255, 99, 71, 1)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.4)

নিচে RGBA পদ্ধতি ব্যাবহার করে কয়েকটি উদাহরন দেখুন।

উদাহরণ

#div01 {background-color:rgba(255, 0, 0, 0.2);}
#div02 {background-color:rgba(255, 0, 0, 0.4);}
#div03 {background-color:rgba(255, 0, 0, 0.6);}
#div04 {background-color:rgba(255, 0, 0, 0.8);}

কোড এডিটর



HSL পদ্ধতি

HTML এ রঙ বা hue, পরিপৃক্তি বা saturation এবং লঘিমা বা lightness উল্লেখ করে কোন এলিমেন্টের রঙ নির্দিষ্ট করে দেয়া যায়। এই পদ্ধতি HSL নামে পরিচিত। এর জন্য নিচের ফরম্যাটটি অনুসরণ করতে হবে -

ফরম্যাট

hsl(hue, saturation, lightness)

নিচে এগুলোর ধারাবাহিক বর্ণনা দেখুন ।

hue বা রঙ
রঙ বা hue হল color wheel এ অবস্থিত ০ থেকে ৩৬০ ডিগ্রির মধ্যবর্তী কোন মান যেখানে ০ লাল রঙ, ১২০ সবুজ রঙ এবং ২৪০ নীল রঙ প্রকাশ করে।

Saturation বা পরিপৃক্তি
পরিপৃক্তি বা saturation হল একটি শতকরায় প্রকাশিত মান যেখানে ০% অর্থ ধূসর বা gray এবং ১০০% মান পূর্ণ রঙ নির্দিষ্ট করে। Saturation কে কোন রঙের তীব্রতা বা intensity হিসাবেও বর্ণনা করা যেতে পারে। এখানে ১০০% মানের জন্য নিখাদ রঙটি প্রকাশ পাবে, তাতে ধূসর রঙের কোন আঁচ থাকবে না। ৫০% মানের জন্য ৫০% মানের জন্য তাতে ধূসর রঙের আঁচ থাকবে, কিন্তু মুল রঙের ৫০% দেখা যাবে। ০% মানের জন্য সম্পূর্ণরূপে ধূসর রঙ দেখা যাবে, তখন আর কোন রঙ দেখা যাবে না।

Lightness বা লঘিমা
এবং লঘিমা বা lightness ও অনুরূপ একটি শতকরায় প্রকাশিত মান। এক কথায় lightness হল light বা আলোর পরিমান, যেখানে ০% মানের জন্য আলোর অনুপস্থিতি অর্থাৎ অন্ধকার বা কালো, ৫০% মানের জন্য সাদা ও কালোর মধ্যবর্তী রঙ এবং ১০০% মানের জন্য পূর্ণ আলো অর্থাৎ সাদা নির্ধারিত হয়।

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)

HSL পদ্ধতি ব্যাবহার করে নিচে কয়েকটি উদাহরন দেখুন ।

উদাহরণ

#div01 {background-color:hsl(0, 100%, 30%);}
#div01 {background-color:hsl(0, 100%, 50%);}
#div01 {background-color:hsl(0, 100%, 70%);}
#div01 {background-color:hsl(0, 100%, 90%)}

কোড এডিটর



HSLA পদ্ধতি

HSLA পদ্ধতি হল HSL পদ্ধতিরই একটি বর্ধিত রুপ যেখানে একটি আলফা চ্যানেল বা alpha channel যুক্ত করা হয়েছে যা কোন রঙের স্বচ্ছতা নির্ধারণ করে।
HSLA পদ্ধতির ফরম্যাটটি হল নিম্নরূপ ।

ফরম্যাট

hsla(hue, saturation, lightness, alpha)

এখানে আলফা প্যারামিটারটি হল ০.০ (সম্পূর্ণ স্বচ্ছ) থেকে ১.০ (স্বচ্ছ নয়) এর মধ্যবর্তী কোন মান যা কোন একটি রঙের স্বচ্ছতা নির্ধারণ করে।

hsla(9, 100%, 64%, 1)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.4)

HLSA পদ্ধতি ব্যাবহার করে নিচে কয়েকটি উদাহরন দেখুন।

উদাহরণ

#div01 {background-color:hsla(0, 100%, 30%, 0.3);}
#div01 {background-color:hsla(0, 100%, 50%, 0.3);}
#div01 {background-color:hsla(0, 100%, 70%, 0.3);}
#div01 {background-color:hsla(0, 100%, 90%, 0.3);}

কোড এডিটর



অস্বচ্ছতা বা opacity

সিএসএস এর Opacity প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্টকে খুব সহজ ভাবে স্বচ্ছ বা transparent এফেক্ট দেয়া যায়। Opacity প্রপার্টির মান বা value হতে পারে 0.0 থেকে 1.0 পর্যন্ত। কোন এইচটিএমএল এলিমেন্ট কে সবথেকে বেশী transparent করতে হলে সর্বনিম্ন মান ব্যবহার করতে হবে।

নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর Opacity প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

img {
   opacity: 0.4;
   }

কোড এডিটর


IE এর আগের সংস্করণ গুলো Opacity প্রোপার্টি সমর্থন করে না। তাই সকল ব্রাউজারে সমর্থন অর্থাৎ cross brawser compatability এর জন্য IE এর ক্ষেত্রে filter:alpha(opacity=x) প্রোপার্টি ব্যবহার করতে হয়।
opacity:x প্রপার্টির মান বা value হতে পারে 0 থেকে 100 পর্যন্ত। কোন এইচটিএমএল এলিমেন্টকে সব থেকে বেশী transparent করতে হলে সর্বনিম্ন মান অর্থাৎ 0 ব্যবহার করতে হবে।

filter:alpha(opacity=x) প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

img {
   opacity: 0.4;
   filter:alpha(opacity=40)*/ For IE /*
   }

কোড এডিটর



ব্রাউজার সমর্থন

প্রপার্টি
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