PHP Professional,Laravel 5.6 Beginning to Advance এবং Zend Certified PHP Engineer (ZCPE ) Course এ সীমিত সংখ্যক আসন বাকি আছে। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

CSS TUTORIAL IN BANGLA PART-2: CSS Colors

css colors

css colors

CSS Colors

HTML Page বা Element এর Color সেট করার জন্য CSS Color প্রোপার্টি ব্যবহার করা হয়। আর CSS দিয়ে ওয়েবসাইটের বিভিন্ন উপাদানে Color প্রধান বা পরিবর্তনের জন্য অধিকাংশ সময় নিচের ৫ টি পদ্ধতির যেকোনো এক বা একাধিক পদ্ধতি ব্যবহৃত হয়। চলুন পদ্ধতি গুলোর বিস্তারিত জানা যাক :

  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors

CSS Hexadecimal Color

Web এ Hexadecimal Color কে #RRGGBB দ্বারা define করা হয়,যেখানে RR (red), GG (green) এবং BB (blue) Hexadecimal সম্পূর্ন কালারের এক একটি অংশবিশেষ। অর্থাৎ এখানে সকল মান 00 থেকে FF এর ভিতরে থাকে।

উদাহরণস্বরূপ, #0000ff মানটি নীল রং নির্দেশ করে, কারন এখানে RR এবং GG এর মান শূন্য।

আবার একইভাবে #ff0000 মানটি লাল রং নির্দেশ করে, কারন এখানে GG এবং BB এর মান শূন্য।

ঠিক একইভাবে #00ff00 মানটি সবুজ রং নির্দেশ করে, কারন এখানে RR এবং BB এর মান শূন্য।

আর যদি এগুলো mixing করেন , তাহলে মিক্সিং এর ধরণ অনুযায়ী ভিন্ন ভিন্ন কালার তৈরী হবে।

চলুন এবং কয়েকটা উদাহরণ দিয়ে দেখা যাক:

<!DOCTYPE html>
<html>
<head>
   <title>CSS Hexadecimal Color</title>
  
</head>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#00ff00;">#00ff00</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</body>
</html>

Output

#ff0000

#0000ff

#00ff00

#ee82ee

#ffa500

#6a5acd

CSS RGB Color

Web এ RGB Color কে rgb(red, green, blue) দ্বারা define করা হয়, এবং এখানে সকল মান 0 থেকে 255 এর ভিতরে থাকে। এবং এখানে color এর শতকরা মান ০-১০০% হতে পারে।

উদাহরণস্বরূপ, rgb(0,0,255) মানটি নীল রং নির্দেশ করে, কারন এখানে Red এবং Green এর মান শূন্য।

আবার একইভাবে rgb(255,0,0) মানটি লাল রং নির্দেশ করে, কারন এখানে Green এবং Blue এর মান শূন্য।

ঠিক একইভাবে rgb(0,255,0) মানটি সবুজ রং নির্দেশ করে, কারন এখানে Red এবং Blue এর মান শূন্য।

আর যদি এগুলো mixing করেন , তাহলে মিক্সিং এর ধরণ অনুযায়ী ভিন্ন ভিন্ন কালার তৈরী হবে।

চলুন এবং কয়েকটা উদাহরণ দিয়ে দেখা যাক:

<!DOCTYPE html>
<html>
<head>
   <title>CSS RGB Color</title>
  
</head>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>

Output

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

CSS RGBA Color

RGBA colorমান, RGB color মানের সাথে একটি আলফা চ্যানেল যুক্ত করে করা হয়। যেটি হলো opacity (অস্বচ্ছলতা)। অর্থাৎ RGBA color মান rgba(red, green, blue, alpha) দ্বারা নির্দেশ করা হয়। আর আলফা প্যারামিটারটি ০.০ থেকে ১.০ পর্যন্ত হয়ে থাকে।

নিচে RGBA কালার এর উদাহরণ দেওয়া হলো :

<!DOCTYPE html>
<html>
<head>
   <title>CSS RGB Color</title>
  
</head>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>

Output

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

CSS HSL Color

HSL( hue, saturation এবং lightness) নির্দেশ করে এবং কালার-এর উপস্থাপনা একটা গোলাকার চক্র তুল্য। অর্থাৎ ০-৩৬০, যেখানে ০ অথবা ৩৬০ হচ্ছে লাল(Red), ১২০ হচ্ছে সবুজ(Green) এবং ২৪০ হচ্ছে নীল(Blue) Saturation-হচ্ছে শতকরা মান ০% হচ্ছে ধূসর ছায়া এবং ১০০% হচ্ছে পুর্নাঙ্গ কালার। Lightness-ও হচ্ছে শতকরা মান; ০% হচ্ছে কালো, ১০০% হচ্ছে সাদা। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক :

<!DOCTYPE html>
<html>
<head>
   <title>CSS HSL Color</title>
  
</head>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
</body>
</html>

Output

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

CSS HSLA Color

HSLA Color মান hsla(hue, saturation, lightness, alpha) দ্বারা সংজ্ঞায়িত করা হয়, অর্থাৎ HSL Color মানের সাথে একটি Alpha চ্যানেল যুক্ত করে। যেটি হলো opacity বা অবজেক্টের অস্বচ্ছলতা।। আলফা প্যারামিটারটি ০.০ থেকে ১.০ পর্যন্ত হয়ে থাকে। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক :

<!DOCTYPE html>
<html>
<head>
   <title>CSS HSLA Color</title>
  
</head>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
</body>
</html>

Output

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

এই ক্যাটাগরির অন্যান্য পোস্ট:

Masud Alam
আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ৮ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। বিশেষ ভাবে বাংলাদেশের ১০০ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ৫২ জন ই আমার হাতে জেন্ড সার্টিফাইড হয়েছে। বর্তমানে TechBeeo Software Company তে সিইও হিসাবে আছি । পাশাপাশি w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -7 Engineering কোর্স করাই। আর w3programmers.com সাইট টি আমার।

Leave a Reply