وب

مقدار ها و واحد ها در CSS – بخش سوم، مقادیر رنگ ها در CSS

مقدار ها و واحد ها در CSS – بخش سوم، مقادیر رنگ ها در CSS

در بخش های قبلی مقاله ی آمورشی مقدار ها و واحد ها در CSS، با انواع مختلف مقدار ها در CSS آشنا شدید، و در مورد بعضی از مقدار ها و واحد آموختیم. در این بخش از مقاله ی آموزشی، به مقدار های رنگ در CSS می پردازیم و انواع مختلف آن را بررسی می کنیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

رنگ ها در CSS

روش های متعددی برای تعیین رنگ در CSS وجود دارد، برخی از این روش ها اخیرا بیش از دیگر روش ها استفاده شده اند. مقادیر رنگ یکسان را می توان در همه جای CSS استفاده کرد، و برای مشخص کردن رنگ متن، رنگ پس زمینه و یا رنگ هر چیز دیگری در CSS به کار برد.

سیستم رنگ استاندارد موجود در کامپیوتر های مدرن ۲۴ بیتی است که اجازه می دهد تا با استفاده از ترکیبی از کانال های قرمز، سبز و آبی مختلف و با ۲۵۶ مقدار مختلف در هر کانال (۲۵۶ × ۲۵۶ × ۲۵۶ = ۱۶،۷۷۷،۲۱۶) حدود ۱۶٫۷ میلیون رنگ مجزا را نمایش دهیم.

در ادامه، می خواهیم از انواع مختلف موجود در مقادیر رنگ در CSS استفاده کنیم.

توجه: برای تبدیل بین سیستم های مختلف رنگ مورد بحث در زیر، یک مبدل رنگ نیاز خواهید داشت. تعداد زیادی مبدل آنلاینِ آسان، مانند HSL to RGB / RGB to HSL / Hex Colour Converter وجود دارد.

کلید واژه ها برای رنگ ها در CSS

ساده ترین و قدیمی ترین انواع رنگ در CSS، کلمات کلیدیِ رنگ هستند. این نوع از رنگ ها، رشته های خاصی هستند که مقدار رنگ خاصی را نشان می دهند. به عنوان مثال، کد CSS زیر را ببینید:

و این نتیجه به دست می آید:

مقدار ها و واحد ها در CSS

درک این روش آسان است، اگر چه فقط به ما اجازه می دهد که رنگ های اصلی و واضح را در CSS مشخص کنیم. حدود ۱۶۵ کلید واژه متفاوت برای استفاده در مرورگر های وب مدرن وجود دارد؛ فهرست کلی کلمات کلیدی را می توانید از این جا ببینید.

احتمالا از رنگ های خالص مانند قرمز، سیاه و سفید به طور منظم در کار خود استفاده خواهید کرد، اما برای داشتن رنگ های بیشتر در CSS، لازم است که از یک سیستم رنگ دیگر استفاده کنید.

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

مقادیر هگزا دسیمال / Hexadecimal

سیستم رنگ رایجِ بعدی، رنگ های هگزا دسیمال یا کد های هگز است. هر مقدار هگز، شامل یک نماد هش (#) و به دنبال آن، شش عددِ هگزا دسیمال است که هر کدام می توانند بین ۰ و f (که نشان دهنده ی ۱۵ است) باشد. یعنی این رقم ها: abcdef0123456789. هر جفت از مقادیر، نشان دهنده ی یکی از کانال ها (قرمز، سبز و آبی) در CSS می باشد و به ما اجازه می دهد که برای هر کدام، ۲۵۶ مقدار موجود (۱۶ × ۱۶ = ۲۵۶) را مشخص کنیم.

و بدین ترتیب، برای مثال، کد CSS زیر را می توان نوشت:

نتیجه ی زیر حاصل می شود:

مقدار ها و واحد ها در CSS

این مقادیر برای درک کردن، کمی پیچیده تر است، اما بسیار متنوع تر از کلمات کلیدی هستند و شما می توانید از مقادیر هگزا برای نشان دادن هر رنگی که می خواهید در طرح رنگ خود استفاده کنید.

RGB

طرح سوم مورد بحث ما در این جا، RGB است. یک مقدار RGB، یک تابع است: rgb() که سه پارامتر را نشان می دهد و همانند مقدار های هگزا، مقادیر کانال های رنگ قرمز، سبز و آبی را در CSS نشان می دهند. تفاوت سیستم هگز با RGB این است که هر کانال، نه با دو رقم هگز، بلکه با عدد دهدهی بین ۰ و ۲۵۵ نشان داده می شود.

بیایید مثال قبلی را با استفاده از رنگ RGB بازنویسی کنیم:

و نتیجه ی زیر به دست می آید:

مقدار ها و واحد ها در CSS

سیستم RGB در CSS تقریبا به اندازه ی هگزا پشتیبانی می شود؛ و شما احتمالا به مرورگری که از آن ها پشتیبانی نکند، بر نخواهید خورد. علاوه بر این، مقادیر RGB احتمالا کمی بصری تر و قابل درک تر از مقادیر هگز هستند.

توجه: چرا مقادیر از ۰ تا ۲۵۵ است و نه ۱ تا ۲۵۶؟ سیستم های کامپیوتری به جای شمردن از ۱، تمایل دارند از ۰، بشمارند. بنابراین برای این که ۲۵۶ مقدارِ ممکن داشته باشیم، رنگ های RGB، مقدار های در محدوده ی ۰ تا ۲۵۵ را می گیرند.

HSL

مدل HSL (نه در نسخه های قدیمی اینترنت اکسپلورر) کمی کمتر از RGB پشتیبانی می شود، که پس از استقبالِ زیاد طراحان اجرا شد، و به جای مقادیر قرمز، سبز و آبی، تابع hsl()، مقادیر رنگ / hue، اشباع / saturation و نور / lightness را می پذیرد، و برای متمایز کردن ۱۶٫۷ میلیون رنگ در CSS استفاده می شود، اما به شیوه ای متفاوت:

  1. رنگ / hue: که سایه ی پایه ی رنگ است. hue مقدار های بین ۰ تا ۳۶۰ را می گیرد، و زاویه هایی را حول چرخ رنگ نشان می دهد.
  2. اشباع / saturation: رنگ چگونه اشباع می شود؟ saturation مقدار های از ۰ تا ۱۰۰٪ را می گیرد، و جایی که ۰ باشد، رنگی نیست (به صورت سایه ی خاکستری ظاهر می شود) و ۱۰۰٪ اشباع رنگ کامل است.
  3. نور / lightness: رنگ مورد نظر چقدر روشن است؟ این مقدار از ۰ تا ۱۰۰٪ تغییر می کند، در جایی که ۰ باشد، هیچ نوری نیست (کاملا سیاه به نظر می رسد) و ۱۰۰٪ روشنایی کامل است (کاملا سفید به نظر می رسد).

توجه: استوانه ی HSL برای نمایش روش کارِ این مدل رنگی، مفید است. مقاله ی HSL و HSV را در ویکی پدیا مشاهده کنید.

اکنون مثال خود را با استفاده از مدل رنگ HSL بازنویسی می کنیم:

کد CSS بالا این نتیجه را می دهد:

مقدار ها و واحد ها در CSS

مدل رنگ HSL برای طراحانی که عادت به کار با چنین مدل های رنگی دارند، بصری و قابل درک است. برای مثال، این مدل برای پیدا کردن مجموعه ای از سایه ها در یک طرح رنگی تک رنگ، مفید است:

RGBA و HSLA

RGB و HSL هر دو حالت های متناظر دارند (RGBA و HSLA) که به شما اجازه می دهد تا نه تنها رنگی را که می خواهید نمایش دهید، بلکه این قابلیت را نیز فراهم می کنند که شفافیتی که می خواهید این رنگ داشته باشد را نیز نمایش دهید. توابع متناظر آن ها، پارامتر های یکسانی را می گیرند، به علاوه ی یک مقدار چهارم در محدوده ۰ تا ۱، که شفافیت یا کانال آلفا را در CSS تنظیم می کند. ۰ کاملا شفاف است و ۱ به طور کامل مات است.

بیایید یک نمونه ی دیگر را ببینیم – ابتدا کد HTML:

و سپس کد های CSS (در اینجا برای نشان دادن اثر همپوشانی پاراگراف ها، پاراگراف اول را جابجا کردیم، البته در ادامه، بیشتر به این موضوع می پردازیم):

این نتیجه به دست می آید:

مقدار ها و واحد ها در CSS

رنگ های شفاف برای جلوه های بصریِ غنی تر (ترکیب پس زمینه، عناصر UI نیمه شفاف / semi-transparent UI elements و غیره) بسیار مفید هستند.

شفافیت /  Opacity

روش دیگری برای تعریف شفافیت از طریق CSS وجود دارد و آن، ویژگی Opacity است. به جای تنظیم شفافیت یک رنگ خاص، این ویژگی، شفافیت تمام عناصر انتخاب شده و فرزندان آن ها را نیز تعیین می کند. بیایید یک نمونه کد دیگر بنویسیم تا تفاوت را ببینیم.

و کد CSS به صورت زیر:

این نتیجه حاصل می شود:

مقدار ها و واحد ها در CSS

به تفاوت توجه کنید: اولین باکس که از رنگ RGBA استفاده می کند تنها دارای پس زمینه ی نیمه شفاف است، در حالی که همه چیز، از جمله متن، در باکس دوم شفاف است. در زمانِ استفاده، باید ببینید که به کدام یک نیاز دارید؛ به عنوان مثال RGBA زمانی مفید است که بخواهید یک عنوان یا کپشن تصویر بر روی هم ایجاد کنید که در آن، تصویر از طریق باکس کپشن نشان داده می شود، اما متن هنوز هم قابل خواندن است. از سوی دیگر، Opacity زمانی مفید است که بخواهید یک اثر انیمیشن ایجاد کنید که در آن، کل عنصر UI از حالت کاملا قابل مشاهده به حالت پنهان می رود.

یادگیری فعال: بازی با رنگ ها

این بخش از یادگیری فعال نیز دارای یک پاسخ درست نیست، شما فقط باید مقادیر رنگ پس زمینه ی سه باکس زیر را که کمی در بالای یکدیگر قرار می گیرند، تغییر دهید. کلمات کلیدی، hex، RGB / HSL / RGBA / HSLA، و ویژگی opacity را امتحان کنید.

اگر اشتباه کردید، همیشه می توانید آن را با استفاده از دکمه بازنشانی مجددا تنظیم کنید.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا