تابع hsl() در CSS ابزاری حرفهای برای تعیین رنگها است. با این تابع میتوانید رنگها را بر اساس Hue (رنگ)، Saturation (شدت رنگ) و Lightness (روشنایی) تنظیم کنید. استفاده از hsl باعث میشود رنگهای دقیق و قابل ترکیب داشته باشید. برای یادگیری حرفهای CSS به دوره آموزش CSS مراجعه کنید.
پارامترهای تابع hsl
| پارامتر | توضیح |
|---|---|
| Hue | زاویه رنگ بر حسب درجه (0° = قرمز، 120° = سبز، 240° = آبی) |
| Saturation | شدت رنگ بر حسب درصد (0% = خاکستری، 100% = رنگ کامل) |
| Lightness | روشنایی رنگ بر حسب درصد (0% = سیاه، 50% = رنگ خالص، 100% = سفید) |
مثال عملی تابع hsl
نمونه استفاده از تابع hsl:
.box {
background-color: hsl(200, 70%, 50%);
width: 200px;
height: 200px;
}پشتیبانی مرورگر
| مرورگر | وضعیت پشتیبانی |
|---|---|
| Chrome | پشتیبانی کامل از نسخه 4+ |
| Firefox | پشتیبانی کامل از نسخه 3.5+ |
| Edge | پشتیبانی کامل از نسخه 12+ |
| Safari | پشتیبانی کامل از نسخه 3.1+ |
| Opera | پشتیبانی کامل از نسخه 10+ |
نکات مهم
- مقدار Hue بین 0 تا 360 است.
- مقادیر Saturation و Lightness درصدی هستند.
- میتوانید از hsl برای تعریف رنگهای دینامیک استفاده کنید.
- نسخه hsla() شامل پارامتر Alpha برای شفافیت است.
ادامه آموزش
برای یادگیری بیشتر CSS و توابع پیشرفته، حتماً دوره آموزش CSS را مشاهده کنید.
آموزش قبلی: آموزش تابع cubic-bezier در CSS
آموزش بعدی: آموزش تابع hsla در CSS
دیدگاه و پرسش