در جلسه قبل از آموزش CSS با ویژگی border در CSS3 آشنا شدید. در این بخش قصد داریم به ویژگی رنگ در CSS3 یپردازیم.
CSS3 چندین راه جدید برای تعریف مقادیر رنگ را ارایه داده است.
تعریف رنگ در CSS3
در بخش های قبلی نحوه استفاده از ویژگی color در css و سه راه متفاوت تعریف رنگ را یاد گرفتید.
به اضافه آنها CSS3 چند تابع جدید برای ست کردن مقادیر رنگ المان ها با rgba() , hsl() , hsla() را در اختیار ما قرار داده است.
مقدار رنگ RGBA در CSS3
رنگ ها می توانند در مدل RGBA (red-green-blue-alpha) با نشانه گذاری تابعی تعریف شوند. مدل رنگ RGBA یک اکستنشن از مدل رنگ RGB به همراه کانال alpha است.
پارامتر alpha مقداری بین ۰٫۰ (کاملا شفاف و غیر قابل نمایش) تا ۱٫۰ (کاملا مات) را می پذیرد.
|
1 2 3 4 5 6 |
h1 { color: rgba(0,0,255,0.5); } p { background-color: rgba(0%,0%,100%,0.3); } |
مقدار رنگ HSL در CSS3
رنگ ها می توانند در مدل HSL (hue-saturation-lightness) با نشانه گذاری تابعی تعریف شوند.
این تابع سه مقدار که توسط ویرگول از هم جدا می شوند می پذیرد. این سه مقدار به ترتیب گرمای رنگ (Hue), اشباع رنگ (Saturation) و درخشندگی یا روشنایی رنگ (Lightness) می باشند.
Hue به عنوان زاویه بر روی چرخه رنگ ها مطرح می شود (از ۰ تا ۳۶۰). زاویه صفر در این چرخه نشان دهنده رنگ قرمز است.
می توانید رنگ های اصلی و زاویه یا همان Hue مخصوص به آنها را مشاهده کنید:
Saturation میزان خلوص رنگ است. این مقدار می تواند از ۰ درصد تا ۱۰۰ درصد باشد. جایی که ۰ نشان دهنده حداقل اشباع رنگی است که ما را به سمت بی رنگی یا همان خاکستری می برد. و ۱۰۰ نشان دهنده آن رنگ در حالت خالص آن است.
Lightness تنظیم کننده روشنایی یا درخشندگی می باشد. که می تواند از ۰ درصد تا ۱۰۰ درصد باشد, بطوریکه ۰ نشان دهنده تاریکی کامل (سیاه) و ۱۰۰ بیانگر روشنایی مطلق (سفید) می باشد.
|
1 2 3 4 5 6 |
h1 { color: hsl(360,70%,60%); } p { background-color: hsl(480,50%,80%); } |
برای اینکه به روشنایی کامل رنگ مورد نظرتان برسید باید این مقدار را بر روی ۵۰% قرار دهید.
مقدار رنگ HSLA در CSS3
رنگ ها می توانند در مدل HSLA (hue-saturation-lightness-alpha) با نشانه گذاری تابعی تعریف شوند. مدل رنگ HSLA یک اکستنشن از مدل رنگ HSL به همراه کانال alpha است.
پارامتر alpha مقداری بین ۰٫۰ (کاملا شفاف و غیر قابل نمایش) تا ۱٫۰ (کاملا مات) را می پذیرد.
|
1 2 3 4 5 6 |
h1 { color: hsla(360,80%,50%,0.5); } p { background-color: hsla(480,60%,30%,0.3); } |
امیدوارم در این بخش آموزش CSS, از ویژگی رنگ در CSS3 نهایت استفاده را برده باشید.
در بخش بعدی با مقادیر جدید رنگ در CSS3 آشنا خواهید شد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
