این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع hsla در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع hsla در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع hsla در CSS
با استفاده از تابع hsla ( که مخفف Hue Saturation Lightness Alpha می باشد ) در CSS میتوان میزان اشباع و روشنایی ( سبکی / سنگینی ) رنگ را مشخص کرد.
این تابع ۴ مقدار میپذیرد، مقدار اول یک رنگ از بین ۳ رنگ اصلی ( R=red , G=green , B=blue ) با مقداری از ۰ تا ۳۶۰ و مقدار دوم و سوم از ۰ تا ۱۰۰% میزان اشباع و سبکی رنگ را مشخص میکنند و مقدار چهارم کانال آلفا ( میزان شفافیت / تاری – مقداری بین ۰ تا ۱ ) را مشخص میکند.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع hsla در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 |
<style> .p1{ background-color: hsla(357.3, 100%, 38.8%, 0.1); } .p2{ background-color: hsla(357.3, 100%, 38.8%, 0.2); } .p3{ background-color: hsla(357.3, 100%, 38.8%, 0.4); } .p4{ background-color: hsla(357.3, 100%, 38.8%, 0.6); } .p5{ background-color: hsla(357.3, 100%, 38.8%, 0.8); } .p6{ background-color: hsla(357.3, 100%, 38.8%, 1); } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع hsla در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()hsla | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
hsla( hue, saturation, lightness, alpha ); |
Free-Learn
جدول مقادیر تابع hsla در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| hue | تعریف رنگ اصلی – از ۰ تا ۳۶۰ ۰ یا ۳۶۰ » قرمز ۱۲۰ » سبز ۲۴۰ » آبی |
| saturation | میزان اشباع رنگ – از ۰ درصد تا ۱۰۰ درصد ( ۰ خاکستری و هرچقدر بسمت ۱۰۰ برود رنگ کامل میشود ) |
| lightness | میزان سبکی / سنگینی رنگ – از ۰ درصد تا ۱۰۰ درصد ( ۰ سیاه و هرچقدر بسمت ۱۰۰ برود رنگ سفید میشود ) |
| alpha | میزان شفافیت رنگ – از ۰ تا ۱ یا از ۰٫۰ تا ۱٫۰ ( ۰ کاملا مات و هرچقدر بسمت ۱ برود شفاف تر میشود ) |
Free-Learn
نکات و توضیحات
- با استفاده از ابزار آنلاین تولید رنگ های hex , rgb , hsl فری لرن میتوانید به راحتی انواع رنگ های hsl را تولید نمایید. برای مشاهده ابزار اینجا کلیک نمایید.
