توابع hsl() CSS
- پائیدھ میں سے اوپر CSS grayscale() کا گرینشید
- پائیدھ میں CSS hue-rotate() کا یوو آل روٹ
- ایک پیمائش اوپر واپس سی ایس ایس فنکشن مراجع منول
تعریف و استفاده
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) - 0 (یا 360) قرمز،120 سبز،240 آبی. |
| saturation |
ضروری. تعریف غلظت رنگ؛0% خاکستری،100% رنگ کامل (غلظت کامل). همچنین میتوان از None (که با 0% مشابه است) استفاده کرد. |
| lightness |
ضروری. تعریف روشنایی رنگ؛0% سیاه،50% عادی،100% سفید. همچنین میتوان از None (که با 0% مشابه است) استفاده کرد. |
| / A |
اختیاری. مقدار کانال آلفای رنگ (از 0% (یا 0) - کاملاً شفاف تا 100% (یا 100) - کاملاً غیرشفاف). همچنین میتوان از None (که نشاندهنده وجود هیچ کانال آلفا نیست) استفاده کرد. مقدار پیشفرض 100% است. |
نحوه استفاده از مقدارهای نسبی
hsl(from color hue saturation lightness / A)
| مقدار | توضیح |
|---|---|
| from color |
از کلمه کلیدی from شروع میشود، سپس یک مقدار رنگ برای رنگ اصلی. این رنگ اصلی است که رنگهای نسبی بر اساس آن قرار دارند. |
| hue | ضروری. تعریف درجه روی چرخه رنگ (از 0 تا 360) - 0 (یا 360) قرمز،120 سبز،240 آبی. |
| saturation |
ضروری. تعریف غلظت رنگ؛0% خاکستری،100% رنگ کامل (غلظت کامل). همچنین میتوان از None (که با 0% مشابه است) استفاده کرد. |
| lightness |
ضروری. تعریف روشنایی رنگ؛0% سیاه،50% عادی،100% سفید. همچنین میتوان از None (که با 0% مشابه است) استفاده کرد. |
| / A |
اختیاری. مقدار کانال آلفای رنگ (از 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 hwb() فنکشن
مطالبت:CSS lab() فنکشن
مطالبت:CSS lch() فنکشن
مطالبت:CSS oklab() کا فنکشن
مطالبت:CSS oklch() کا فنکشن
- پائیدھ میں سے اوپر CSS grayscale() کا گرینشید
- پائیدھ میں CSS hue-rotate() کا یوو آل روٹ
- ایک پیمائش اوپر واپس سی ایس ایس فنکشن مراجع منول
