CSS-এ RGB এবং RGBA রঙ মডেলের পার্থক্য জানুন এবং RGBA দিয়ে সুন্দর, আকর্ষণীয় UI কম্পোনেন্ট তৈরি করুন।
RGB এবং RGBA CSS-এ দুটি রঙ মডেল যেগুলো হেক্স কোড রঙের (যেমন #282828) বিকল্প হিসেবে ব্যবহৃত হয়।
পার্থক্য কী?
- RGB = Red, Green, Blue
- RGBA = Red, Green, Blue, Alpha
Alpha হলো একটি ট্রান্সপেরেন্সি (পারদর্শিতা) চ্যানেল যা রঙের অপাসিটি (দৃশ্যমানতা) কন্ট্রোল করে।
CSS দুটি রঙ ফাংশন প্রদান করে: rgb() এবং rgba()। দুটোই ০ থেকে ২৫৫ স্কেলে রেড, গ্রিন, ব্লু মান গ্রহণ করে।
RGB — শুধু সলিড রঙ
{ /* ১০০% সলিড গ্রিন */ background-color: rgb(0, 255, 0); }RGBA — ট্রান্সপেরেন্সি সহ
{ /* ৫০% গ্রিন ট্রান্সপেরেন্সি */ background-color: rgba(0, 255, 0, 0.5); }ট্রান্সপেরেন্সি কেন উপযোগী?
উদাহরণস্বরূপ, একটি আকর্ষণীয় UI কার্ড ডিজাইন করতে চাইলে যেখানে ব্যাকগ্রাউন্ড ইমেজের ওপর টেক্সট থাকে:
কার্ডে থাকে: থাম্বনেইল ইমেজ, ওভারলে, এবং উপরে টেক্সট। আমি rgba() ফাংশন ব্যবহার করে ৫০% কালো ট্রান্সপেরেন্সি দিয়েছি:
.card-overlay { background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */ }Alpha চ্যানেল ভ্যালুর প্রভাব
- কম ভ্যালু (যেমন
0.1) → বেশি ট্রান্সপেরেন্ট, ব্যাকগ্রাউন্ড ইমেজ বেশি দৃশ্যমান - বেশি ভ্যালু (যেমন
0.9) → কম ট্রান্সপেরেন্ট, ব্যাকগ্রাউন্ড ইমেজ কম দৃশ্যমান
ওভারলে খুব হালকা বা খুব গाढ় করা উচিত নয়। কনটেন্ট কীভাবে উপস্থাপন করতে চান তার সাথে মেলানো "সুইট স্পট" খুঁজে বের করতে হয়।
উদাহরণ কোড (HTML + CSS)
HTML
<div class="card">
<div class="card-overlay"></div>
<img class="card-thumbnail" src="/images/the-north-sea-denmark.png" />
<div class="card-text">
<h3 class="card-title">The North Sea of Denmark</h3>
<p class="card-description"> Explore the beautiful & dynamic North Sea of Denmark — where every day is a new experience. </p>
</div>
</div>CSS
.card { position: relative; height: 400px; width: 400px; }
.card-thumbnail { height: 100%; width: 100%; display: block; object-fit: cover; }
.card-text { color: white; position: absolute; width: 80%; max-width: 300px; top: 70%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.card-title { font-size: 1.45rem; }
.card-description { font-size: 1.15rem; margin-top: 0.5rem; line-height: 1.4; }
.card-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }এই কোডটি রেফারেন্স বা আপনার নিজের UI কার্ডের স্টার্টিং পয়েন্ট হিসেবে ব্যবহার করুন।
