برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
saturation تعیین کننده غلظت رنگی می باشد که بوسیله Hue مشخص شده است (مقادیر گزینه saturation به صورت درصد و بین صفر تا 100 می باشد که هر چه به 100 نزدیک تر شویم غلظت زنگ کاسته شده و رنگ به سمت خاکستری پیش میرود. )
Lightness هم تعیین روشنایی و تاریکی رنگ استفاده شده می باشد ( این پارامتر هم به صورت درصد یعنی بین 0 تا 100 تعریف می شود و هر چه به عدد 100 نزدیکتر شویم رنگ روشن تر و در نهایت به سفید می رسد و هر چه به عدد صفر نزدیک تز شویم تیره تر و در نهایت به سیاه می رسیم)
برای مشاهده لینک نیاز به ثبت نام دارید؛ برای ثبت نام کلیک کنید
رنگ HSL
HSL تشکیل شده از سه متد hsl(hue, saturation, lightness که هر کدام در قسمت بالا توضیح داده شده است .
HSL در اینترنت اکسپلورر 9+ ، فایرفاکس ، کروم ، سافاری و اوپرا 10 پشتیبانی می شود .
HTML:
p{background-color:hsl(120,65%,75%);}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>p{background-color:hsl(240,65%,75%);}</style></head><body><h1>برای تغییر رنک کادر زیر باید عدد اول در کد را تغییر بدهید</h1><p>This is some text in a paragraph.</p></body></html>رنگ HSLA
تنها تفاوتی که با رنگ HSL دارد ، گزینه آلفا می باشد . این پارامتر برای تعیین میزان شفافیت به کار می رود که به صورت در صد بیان می شود یعنی اگر شما به 100 نزدیک شوید رنگ شفافیت پیدا میکند و پشت زمینه رنگ دیده میشود و هر چه به 0 نزدیک شوید حالت کدر تر پیدا میکند و به حالت جامد و ثابت نمایش داده میشود در این حالت دقیقا مثل HSL خواهد شد.
HSLA در اینترنت اکسپلورر 9+ ، فایرفاکس ، کروم ، سافاری و اوپرا 10 پشتیبانی می شود .
HTML:
p{background-color:hsla(120,65%,75%,0.3);}به کدهای زیر دقت کنید .متن کامل کد بالا را تایپ کرده ام . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>p{background-color:hsla(120,65%,75%,0.3);}</style></head><body><h1>به کادر زیر دقت کنید</h1><p>This is some text in a paragraph.</p></body></html>منبع: learning.asarayan.com