رنگ HSL در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

hsl-color-lightness


در درس قبلی کاربرد و نحوه استفاده رنگهای RGBA را آموزش داده ام . در این بخش میخواهم شما را با رنگهای HSL . HSLA در Css3 آشنا کنم  . 


تعیین رنگ HSL . HSLA این امکان را به طراح میدهد که با استفاده از سه واژه Hue, saturation, Lightness به رنگ مورد نظر برسد . شاید از خودتان این سوال را بپرسید که کاربرد این سه گزینه به چه شکلی می باشد ؟

HUE مشخص کننده رنگ مورد نظر می باشد که با استفاده از یک عدد که بین 0 تا 360 درجه قرار گرفته است رنگ تعیین می شود . 

HUE HSLA


saturation تعیین کننده غلظت رنگی می باشد که بوسیله Hue مشخص شده است (مقادیر گزینه  saturation  به صورت درصد و بین صفر تا 100 می باشد که هر چه به 100 نزدیک تر  شویم غلظت زنگ کاسته شده و رنگ به سمت خاکستری پیش میرود. )
Lightness هم تعیین روشنایی و تاریکی رنگ استفاده شده می باشد (این پارامتر هم به صورت درصد یعنی بین 0 تا 100 تعریف می شود و هر چه به عدد 100 نزدیکتر شویم رنگ روشن تر و در نهایت به سفید می رسد و هر چه به عدد صفر نزدیک تز شویم تیره تر و در نهایت به سیاه می رسیم)

hsl-color-lightness

رنگ HSL
HSL تشکیل شده از سه متد hsl(hue, saturation, lightness که هر کدام در قسمت بالا توضیح داده شده است .
 HSL در اینترنت اکسپلورر 9+ ، فایرفاکس ، کروم ، سافاری و اوپرا 10 پشتیبانی می شود . 

 

p
{
     background-color:hsl(120,65%,75%);
}

 



به کدهای زیر دقت کنید .متن کامل کد بالا را تایپ کرده ام . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

 

<!DOCTYPE html>
<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 پشتیبانی می شود .

p
{
           background-color:hsla(120,65%,75%,0.3);
}

 

به کدهای زیر دقت کنید .متن کامل کد بالا را تایپ کرده ام . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<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>

 

مشاهده دمو

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:35

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا