رنگ HSL در Css3

Sina

Administrator
پرسنل مدیریت
2013-05-11
4,716
2,902
113
چابکســـر


HUE_HSLA.jpg


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.ذخیره کنید)

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
 

درباره ما

  • خوش آمدید ؛ یه حسِ خوب یک انجمن است که شما می توانید در آن عضو شده از امکانات آن استفاده کرده و دوستان جدید پیدا کنید. این مجموعه دارای نظارت 24 ساعته بوده تا محیطی سالم را برای کاربران خود فراهم آورد،از کاربران انتظار می رود که با رعایت قوانین ما را برای رسیدن به این هدف یاری کنند.
    از طرف مدیر وب سایت:
    "همواره آرزو دارم که هربازدید کننده ای بعد از ورود به انجمن، با یه حسِ خوب اینجارو ترک کنه!"

منوی کاربر