CSS hsl() ফাংশন
- আগের পৃষ্ঠা CSS grayscale() ফাংশন
- পরবর্তী পৃষ্ঠা CSS hue-rotate() ফাংশন
- একটি স্তর উপরে CSS ফাংশন রেফারেন্স ম্যানুয়েল
নির্ধারণ ও ব্যবহার
CSS-র hsl() ফাংশন হলুদ-সাটুরেশন-লাইটনেস (HSL) মডেল ব্যবহার করে রঙ নির্ধারণ করে। এছাড়া, রঙের স্বচ্ছতা নির্ধারণ করার জন্য একটি অপশনাল alpha কম্পোনেন্ট যোগ করা যেতে পারে。
সুঝান:HSL রঙকে হিউ (Hue), সাটুরেশন (Saturation) এবং লাইটনেস (Lightness) হিসাবে ব্যাখ্যা করা হয়, যা রঙকে সার্কুলার কো-অর্ডিনেট হিসাবে প্রকাশ করে。
প্রত্যহরণ:hsla() ফাংশন হল: hsl() ফাংশনের এলিয়েন্স hsl() ফাংশন
প্রকল্প
উদাহরণ 1
বিভিন্ন HSL(A) রঙ নির্ধারণ করুন:
#p1 {background-color:hsl(120 100% 50%);} /* সবুজ */
#p2 {background-color:hsl(120 100% 75%);} /* হালকা সবুজ */
#p3 {background-color:hsl(120 100% 25%);} /* গুলা সবুজ */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* স্বচ্ছ গুলা সবুজ */
#p5 {background-color:hsl(120 60% 70%);} /* হালকা সবুজ */
#p6 {background-color:hsl(290 100% 50%);} /* নীলা */
#p7 {background-color:hsl(290 60% 70%);} /* হালকা নীলা */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* স্বচ্ছ হলুদ রঙের হালকা নীলা */
উদাহরণ 2
ব্যবহার করা যেতে পারে বিভিন্ন মানের পদ্ধতি:
#p1 {background-color:hsl(120, 100%, 50%);} /* সবুজ */
#p2 {background-color:hsl(120, 100%, 75%);} /* সবুজ */
#p3 {background-color:hsl(120, 100%, 25%);} /* গভীর সবুজ */
#p4 {background-color:hsl(120, 60%, 70%);} /* সুগম সবুজ */
#p5 {background-color:hsl(290, 100%, 50%);} /* পুরপত্তা */
#p6 {background-color:hsl(290, 60%, 70%);} /* সুগম পুরপত্তা */
CSS সংজ্ঞায়িত
অবিচ্ছিন্ন মান সংজ্ঞায়িত
hsl(hue saturation lightness / A)
| মান | বর্ণনা |
|---|---|
| hue | অপশনাল।আলোকমানের হুয়ে নির্ধারণ করে (0 বা 360 - লাল, 120 - সবুজ, 240 - নীল) |
| saturation |
অপশনাল।আলোকমানের প্রকৃতি নির্ধারণ করে; 0% হল গ্রে, 100% হল পূর্ণ রঙ (পূর্ণ সত্ত্বা) আরও ব্যবহার করা যেতে পারে None（0% এর সমতুল্য） |
| lightness |
অপশনাল।আলোকমান নির্ধারণ করে; 0% হল কালো, 50% হল সাধারণ, 100% হল সাদা আরও ব্যবহার করা যেতে পারে None（0% এর সমতুল্য） |
| / A |
অপশনাল।আলোকমানের alpha চ্যানেলের মান বলে তোলে (0%（বা 0）- সম্পূর্ণ স্পষ্ট থেকে 100%（বা 100）- সম্পূর্ণ অস্পষ্ট) আরও ব্যবহার করা যেতে পারে None（এলপা চ্যানেল নেই বলে ইঙ্গিত করে） ডিফল্ট মান 100%। |
সম্পর্কিত মান সংজ্ঞায়িত
hsl(from color hue saturation lightness / A)
| মান | বর্ণনা |
|---|---|
| from color |
এটি from শব্দে শুরু করে, এরপর একটি রঙের মান দেখানো হয় এটি সম্পর্কিত রঙের ভিত্তিতে আকার্য রঙ |
| hue | অপশনাল।আলোকমানের হুয়ে নির্ধারণ করে (0 বা 360 - লাল, 120 - সবুজ, 240 - নীল) |
| saturation |
অপশনাল।আলোকমানের প্রকৃতি নির্ধারণ করে; 0% হল গ্রে, 100% হল পূর্ণ রঙ (পূর্ণ সত্ত্বা) আরও ব্যবহার করা যেতে পারে None（0% এর সমতুল্য） |
| lightness |
অপশনাল।আলোকমান নির্ধারণ করে; 0% হল কালো, 50% হল সাধারণ, 100% হল সাদা আরও ব্যবহার করা যেতে পারে None（0% এর সমতুল্য） |
| / A |
অপশনাল।আলোকমানের alpha চ্যানেলের মান বলে তোলে (0%（বা 0）- সম্পূর্ণ স্পষ্ট থেকে 100%（বা 100）- সম্পূর্ণ অস্পষ্ট) আরও ব্যবহার করা যেতে পারে None（এলপা চ্যানেল নেই বলে ইঙ্গিত করে） ডিফল্ট মান 100%। |
প্রযুক্তিগত বিবরণ
| সংস্করণ: | CSS3 |
|---|
ব্রাউজার সমর্থন
ট্যাবলের সংখ্যা প্রথম এই ফাংশনটি সম্পূর্ণরূপে সমর্থনকারী ব্রাউজার সংস্করণ
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
|---|---|---|---|---|
| hsl() | ||||
| 1 | 9 | 1 | 3.1 | 9.5 |
| সহ alpha পারামিটারের hsl() | ||||
| 65 | 79 | 52 | 12.1 | 52 |
| হাইপন সংখ্যা | ||||
| 65 | 79 | 52 | 12.1 | 52 |
সংশ্লিষ্ট পাতা
শিক্ষাক্রম:CSS HSL রঙ
উল্লেখ:CSS রঙ
উল্লেখ:CSS hwb() ফাংশন
উল্লেখ:CSS lab() ফাংশন
উল্লেখ:CSS lch() ফাংশন
উল্লেখ:CSS oklab() ফাংশন
উল্লেখ:CSS oklch() ফাংশন
- আগের পৃষ্ঠা CSS grayscale() ফাংশন
- পরবর্তী পৃষ্ঠা CSS hue-rotate() ফাংশন
- একটি স্তর উপরে CSS ফাংশন রেফারেন্স ম্যানুয়েল
