CSS পডকাস্ট - 006: কালার পার্ট ওয়ান
রঙ যেকোনো ওয়েবসাইটের একটি গুরুত্বপূর্ণ অংশ এবং CSS-এ রঙের ধরন, ফাংশন এবং চিকিত্সার জন্য অনেকগুলি বিকল্প রয়েছে।
আপনি কিভাবে স্থির করবেন কোন রঙের ধরন ব্যবহার করবেন? আপনি কিভাবে আপনার রং আধা-স্বচ্ছ করবেন? এই পাঠে, আপনি আপনার প্রকল্প এবং দলের জন্য সঠিক সিদ্ধান্ত নিতে আপনাকে সাহায্য করার জন্য কোন বিকল্পগুলি রয়েছে তা শিখতে যাচ্ছেন।
CSS-এর বিভিন্ন ধরনের ডেটা আছে, যেমন স্ট্রিং এবং সংখ্যা। রঙ এই ধরনের একটি এবং অন্যান্য ধরনের ব্যবহার করে, যেমন তার নিজস্ব সংজ্ঞার জন্য সংখ্যা।
সংখ্যাসূচক রং
এটি খুব সম্ভবত যে CSS-এ রঙের সাথে আপনার প্রথম এক্সপোজার সংখ্যাসূচক রঙের মাধ্যমে। আমরা কয়েকটি ভিন্ন আকারে সংখ্যাসূচক রঙের মান নিয়ে কাজ করতে পারি।
হেক্স রং
h1 {
color: #b71540;
}
হেক্সাডেসিমেল স্বরলিপি (প্রায়শই হেক্সে সংক্ষিপ্ত করা হয়) হল RGB-এর জন্য একটি সংক্ষিপ্ত সিনট্যাক্স, যা লাল সবুজ এবং নীলকে একটি সংখ্যাসূচক মান নির্ধারণ করে, যা তিনটি প্রাথমিক রঙ ।
হেক্সাডেসিমেল রেঞ্জ হল 0-9 এবং AF । যখন ছয় সংখ্যার ক্রমানুসারে ব্যবহার করা হয়, তখন সেগুলিকে RGB সংখ্যাসূচক রেঞ্জে অনুবাদ করা হয় যা 0-255 হয় যা যথাক্রমে লাল, সবুজ এবং নীল রঙের চ্যানেলের সাথে মিলে যায়।
আপনি যেকোনো সংখ্যাসূচক রং দিয়ে একটি আলফা মান নির্ধারণ করতে পারেন। একটি আলফা মান হল স্বচ্ছতার শতাংশ। হেক্স কোডে, আপনি ছয় অঙ্কের ক্রমটিতে আরও দুটি সংখ্যা যোগ করুন, একটি আট অঙ্কের ক্রম তৈরি করুন। উদাহরণস্বরূপ, হেক্স কোডে কালো সেট করতে, #000000
লিখুন। একটি 50% স্বচ্ছতা যোগ করতে, এটি #00000080
এ পরিবর্তন করুন।
হেক্স স্কেল 0-9 এবং AF হওয়ার কারণে, স্বচ্ছতার মানগুলি সম্ভবত আপনি যা আশা করতে চান তেমন নয়৷ এখানে কালো হেক্স কোডে কিছু কী, সাধারণ মান যোগ করা হয়েছে, #000000
:
- 0% আলফা - যা সম্পূর্ণ স্বচ্ছ - হল 00 :
#00000000
- 50% আলফা হল 80 :
#00000080
- 75% আলফা হল BF :
#000000BF
একটি দুই অঙ্কের হেক্সকে দশমিকে রূপান্তর করতে, প্রথম অঙ্কটি নিন এবং এটিকে 16 দ্বারা গুণ করুন (কারণ হেক্স বেস 16), তারপর দ্বিতীয় সংখ্যাটি যোগ করুন। 75% আলফার জন্য উদাহরণ হিসাবে BF ব্যবহার করা:
- B 11 এর সমান, যা 16 দ্বারা গুণ করলে 176 এর সমান হয়
- F 15 এর সমান
- 176 + 15 = 191
- আলফা মান হল 255 এর 191-75%
RGB (লাল, সবুজ, নীল)
h1 {
color: rgb(183, 21, 64);
}
RGB রঙগুলিকে rgb()
কালার ফাংশন দিয়ে সংজ্ঞায়িত করা হয়, হয় সংখ্যা বা শতাংশ ব্যবহার করে প্যারামিটার হিসেবে। সংখ্যাগুলি 0-255 সীমার মধ্যে হতে হবে এবং শতাংশগুলি 0% এবং 100% এর মধ্যে হতে হবে৷ RGB 0-255 স্কেলে কাজ করে, তাই 255 100% এবং 0 থেকে 0% এর সমতুল্য হবে।
আরজিবিতে কালো সেট করতে, এটিকে rgb(0 0 0)
হিসাবে সংজ্ঞায়িত করুন, যা শূন্য লাল, শূন্য সবুজ এবং শূন্য নীল। কালোকে rgb(0%, 0%, 0%)
হিসাবেও সংজ্ঞায়িত করা যেতে পারে। সাদা হল ঠিক বিপরীত: rgb(255, 255, 255)
বা rgb(100%, 100%, 100%)
একটি আলফা rgb()
এ দুটি উপায়ে সেট করা হয়। হয় লাল, সবুজ এবং নীল পরামিতিগুলির পরে একটি /
যোগ করুন বা rgba()
ফাংশনটি ব্যবহার করুন। আলফাকে 0 এবং 1 এর মধ্যে শতাংশ বা দশমিক দিয়ে সংজ্ঞায়িত করা যেতে পারে। উদাহরণস্বরূপ, আধুনিক ব্রাউজারগুলিতে 50% আলফা কালো সেট করতে, লিখুন: rgb(0 0 0 / 50%)
বা rgb(0 0 0 / 0.5)
. বিস্তৃত সমর্থনের জন্য, rgba()
ফাংশন ব্যবহার করে, লিখুন: rgba(0, 0, 0, 50%)
বা rgba(0, 0, 0, 0.5)
এইচএসএল (হিউ, স্যাচুরেশন, লাইটনেস)
h1 {
color: hsl(344, 79%, 40%);
}
এইচএসএল হল হিউ, স্যাচুরেশন এবং লাইটনেস। হিউ রঙের চাকার মান বর্ণনা করে, 0 থেকে 360 ডিগ্রি পর্যন্ত, লাল দিয়ে শুরু হয় (0 এবং 360 উভয়ই)। 180, বা 50% এর একটি বর্ণ নীল পরিসরে হবে। এটা আমরা দেখতে যে রঙের উত্স.
স্যাচুরেশন হল নির্বাচিত রঙ কতটা প্রাণবন্ত। একটি সম্পূর্ণ ডিস্যাচুরেটেড রঙ ( 0%
এর স্যাচুরেশন সহ) গ্রেস্কেলে প্রদর্শিত হবে। এবং অবশেষে, হালকাতা হল প্যারামিটার যা যোগ করা আলোর সাদা থেকে কালো পর্যন্ত স্কেল বর্ণনা করে। 100%
এর হালকাতা আপনাকে সর্বদা সাদা দেবে।
hsl()
কালার ফাংশন ব্যবহার করে, আপনি hsl(0 0% 0%)
, অথবা hsl(0deg 0% 0%)
লিখে সত্যিকারের কালো সংজ্ঞায়িত করেন। এর কারণ হল হিউ প্যারামিটারটি রঙের চাকার ডিগ্রী নির্ধারণ করে, যা আপনি যদি সংখ্যার ধরন ব্যবহার করেন তবে 0-360 । আপনি কোণ প্রকারটিও ব্যবহার করতে পারেন, যা হল ( 0deg
) বা (0turn)
। স্যাচুরেশন এবং হালকাতা উভয়ই শতাংশের সাথে সংজ্ঞায়িত করা হয়।
আলফা hsl()
তে সংজ্ঞায়িত করা হয়েছে, একইভাবে rgb()
হিসাবে a /
পরে hue, saturation এবং lightness parameters যোগ করে অথবা hsla()
ফাংশন ব্যবহার করে। আলফাকে 0 এবং 1 এর মধ্যে শতাংশ বা দশমিক দিয়ে সংজ্ঞায়িত করা যেতে পারে। উদাহরণস্বরূপ, একটি 50% আলফা কালো সেট করতে, ব্যবহার করুন: hsl(0 0% 0% / 50%)
বা hsl(0 0% 0% / 0.5)
hsla()
ফাংশন ব্যবহার করে লিখুন: hsla(0, 0%, 0%, 50%)
অথবা hsla(0, 0%, 0%, 0.5)
কালার কীওয়ার্ড
CSS-এ 148টি নাম দেওয়া রং আছে। এগুলি সাদামাটা ইংরেজি নাম যেমন বেগুনি, টমেটো এবং গোল্ডেনরড। ওয়েব অ্যালমানাক অনুসারে কিছু জনপ্রিয় নাম হল কালো, সাদা, লাল, নীল এবং ধূসর। আমাদের পছন্দের মধ্যে রয়েছে গোল্ডেনরড, অ্যালিসব্লু এবং হটপিঙ্ক।
স্ট্যান্ডার্ড রঙের পাশাপাশি, বিশেষ কীওয়ার্ডও উপলব্ধ রয়েছে:
-
transparent
একটি সম্পূর্ণ স্বচ্ছ রঙ। এটিbackground-color
প্রাথমিক মানও -
currentColor
হলcolor
বৈশিষ্ট্যের প্রাসঙ্গিক গণনাকৃত গতিশীল মান। আপনার যদিred
রঙের একটি পাঠ্যের রঙ থাকে এবং তারপরেborder-color
currentColor
সেট করুন, এটিও লাল হবে। আপনি যে উপাদানটির উপরcurrentColor
সংজ্ঞায়িত করেছেন তার যদি সংজ্ঞায়িতcolor
জন্য একটি মান না থাকে, তবেcurrentColor
ক্যাসকেড দ্বারা গণনা করা হবে
সিএসএস নিয়মে কোথায় রঙ ব্যবহার করবেন
যদি একটি CSS প্রপার্টি <color>
ডেটা টাইপ মান হিসাবে গ্রহণ করে, তাহলে এটি রঙ প্রকাশ করার উপরের যে কোনো পদ্ধতি গ্রহণ করবে। স্টাইলিং পাঠ্যের জন্য, color
, text-shadow
এবং text-decoration-color
বৈশিষ্ট্যগুলি ব্যবহার করুন যা সকলেই রঙকে মান বা রঙ হিসাবে মান হিসাবে গ্রহণ করে।
ব্যাকগ্রাউন্ডের জন্য, আপনি background
বা background-color
মান হিসাবে একটি রঙ সেট করতে পারেন। রঙগুলি গ্রেডিয়েন্টেও ব্যবহার করা যেতে পারে, যেমন linear-gradient
। গ্রেডিয়েন্ট হল এক ধরনের ইমেজ যা সিএসএস-এ প্রোগ্রাম্যাটিকভাবে সংজ্ঞায়িত করা যায়। গ্রেডিয়েন্টগুলি হেক্স, আরজিবি বা এইচএসএলের মতো রঙের বিন্যাসের যে কোনও সংমিশ্রণে দুটি বা ততোধিক রঙ গ্রহণ করে।
অবশেষে, border-color
এবং outline-color
আপনার বাক্সে সীমানা এবং রূপরেখার জন্য রঙ সেট করে। box-shadow
প্রপার্টিও রঙকে মান হিসেবে গ্রহণ করে।
আপনার উপলব্ধি পরীক্ষা করুন
রঙ আপনার জ্ঞান পরীক্ষা
নিচের কোনটি বৈধ রং?
hotpink
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
rbga(400 0 1)
#0f08
অবৈধ এইচএসএল রঙ চিহ্নিত করুন।
hsl(5, 0%, 90%)
hsl(0, 0, 0)
hsl(0 0% 0% / 20%)
hsl(2rad 50% 50%)
hsl(.5turn 40% 60%)