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



সিএসএস ৩ এ রঙেও অনেক বৈচিত্র্য যোগ করা হয়েছে।


সিএসএস ৩ এ রঙের ব্যবহার

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

RGBA কালার পদ্ধতি,
HSL কালার পদ্ধতি,
HSLA কালার পদ্ধতিগুলোও এবং
অস্বচ্ছতা বা opacity.


RGBA কালার

RGBA কালার ভ্যালু হচ্ছে RGB কালারের প্রসারিত অংশ যার সাথে alpha channel থাকে, যা কালারের অস্বচ্ছতা(opacity) নির্দেশ করে।
নিচে RGBA কালার পদ্ধতির সিনটেক্স দেখুন -

সিনটেক্স

rgba(red, green, blue, alpha)


ওপরের সিনট্যাক্সে প্রথম তিনটি মান RGB মান বা value অর্থাৎ red, green এবং blue। আর চতুর্থ মানটি হল আলফা মান যা কালারের অপাসিটি নির্দেশ করে। আলফা প্যারামিটারটির মান সর্বনিম্ন ০.০(সম্পূর্ণ ট্রান্সপারেন্ট) এবং সর্বোচ্চ ১.০(সম্পূর্ণ স্বচ্ছ) হতে পারে।

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 কালার পদ্ধতির উদাহরণ দেখুন -

উদাহরণ

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




HSL কালার

HSL কালার পদ্ধতির সিনটেক্স নিচে দেখুন।

সিনটেক্স

hsl(hue, saturation, lightness)


HSL কালার পদ্ধতি তিনটি অংশে বিভক্ত। এগুলো হল - Hue, Saturation এবং Lightness.

এখানে প্রথম অংশ Hue, যা কালেরর মান নির্ধারন করে। এটার মান ডিগ্রীতে উল্লেখ করা হয়। যেখানে- ০ ডিগ্রী সর্বনিম্ন এবং ৩৬০ ডিগ্রী সর্বোচ্চ। এখানে ০ এবং ৩৬০ ডিগ্রী হচ্ছে লাল কালার। ১২০ ডিগ্রী হচ্ছে সবুজ কালার আর ২৪০ ডিগ্রী হচ্ছে নীল কালার।

দ্বিতীয় অংশ Saturation, যা কালারের পূর্ণতা দেয়। এটির মান বা value শতকরায় উল্লেখ করা হয়। যেখানে- ১০০% অর্থ হল সর্বোচ্চ মান।

তৃতীয় অংশ Lightness, যা কালারের উজ্জলতা নির্দেশ করে। এটির মান বা value ও শতকরায় উল্লেখ করা হয়। যেখানে- ০% অর্থ হল সর্বনিম্ন এবং ১০০% অর্থ হল সর্বোচ্চ। এখানে ০% হল কালো এবং ১০০% হল সাদা বা উজ্জল।

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

নিচে 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 থাকে, যা কালারের অস্বচ্ছতা বা opacity নির্দেশ করে।
নিচে HSLA কালার পদ্ধতির সিনটেক্স দেখুন -

সিনটেক্স

hsla(hue, saturation, lightness, alpha)


এখানে বাড়তি চতুর্থ মানটি হল আলফা মান যা কালারের অস্বচ্ছতা বা opacity নির্দেশ করে। আলফা প্যারামিটারটির মান সর্বনিম্ন ০.০ অর্থাৎ সম্পূর্ণ অস্বচ্ছ এবং সর্বোচ্চ ১.০ অর্থাৎ সম্পূর্ণ স্বচ্ছ হতে পারে।

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 কালার পদ্ধতির উদাহরণ দেখুন -

উদাহরণ

#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:hsl(hsla(0, 100%, 90%, 0.3);}




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

সিএসএস ৩ এ opacity প্রোপার্টি নির্দিষ্ট RGB ভ্যালুর অস্বচ্ছতা বা opacity নির্ধারণ করে। অস্বচ্ছতা বা opacity প্রোপার্টির মান সর্বনিম্ন ০.০ অর্থাৎ সম্পূর্ণ অস্বচ্ছ এবং সর্বোচ্চ ১.০ অর্থাৎ সম্পূর্ণ স্বচ্ছ এর মধ্যে হতে হবে।

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 ব্যবহার করে কালারের সাথে লেখাও অস্বচ্ছ বা transparent করা যায়।

উদাহরণ

#div01{background-color:rgb(255, 0, 0);opacity:0.2;}
#div01{background-color:rgb(255, 0, 0);opacity:0.4;}
#div01{background-color:rgb(255, 0, 0);opacity:0.6;}
#div01{background-color:rgb(255, 0, 0);opacity:0.8;}




ব্রাউজার সাপোর্ট

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







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.