no-img
دیزاینر

,سیر تا پیاز رنگها ( color ) در CSS ( قسمت اول )


دیزاینر
مطالب ویژه
اطلاعیه های سایت

adsads
گزارش خرابی لینک
اطلاعات را وارد کنید .

ادامه مطلب

,سیر تا پیاز رنگها ( color ) در CSS ( قسمت اول )
zip
مرداد ۲۵, ۱۳۹۴

,سیر تا پیاز رنگها ( color ) در CSS ( قسمت اول )


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

مواردی که به اونا اشاره خواهد شد :

  1. کدهای هگزادسیمال ( در مبنای ۱۶ )
  2. RGB
  3. RGBA
  4. HSL
  5. HSLA
  6. کلمه های کلیدی دیگر

css-colors

۱٫ کدهای هگزادسیمال ( در مبنای ۱۶ ) :

برای شروع یک مثال میزنم :

نتیجه این مورد در خروجی به شکل زیر هست :

css-colors1

میبینید که یک رنگ سیاه تولید شده و در خروجی نمایش داده شد. کلا هگزادسیمال یک روش برای مشخص کردن رنگ هست که مثلا میگیم اینقد قرمز و سبز و آبی رو با هم مخلوط کن و نتیجه رو به ما برگردون. نحوه مقدار دادن در این مدل در مبنای ۱۶ هست ، بخاطر همین بهش میگن هگزادسیمال. عددهایی که ما در روزمره از اونا استفاده میکنیم ، در مبنای ده هستن و به اونا دسیمال گفته میشه.

اگر ریاضی تا حدی بلد باشید ، حتما با مبناها آشنایی کمی دارید ، پس باید بدونید که در مبنای ۱۶ میتونن عددهای ۰ تا ۱۵ وجود داشته باشند. همونطور که در مبنای ۱۰ ، عددهای ۰ تا ۹ وجود دارن. در هگزا دسیمال عددهای ۱۰ تا ۱۵ رو به ترتیب با A و B و C و D و E و F نمایش میدن. کوچک یا بزرگ بودن حروف فرقی نداره.

پس وقتی میگیم F یعنی ۱۵ و بیشترین مقدار هست. یک کد هگزا دسیمال استاندارد با هش ( # ) شروع میشه و از ۶ کاراکتر هم تشکیل شده.

  • مقدار قرمز بودن بوسیله ۲ کاراکتر اول مشخص میشه
  • مقدار سبز بودن بوسیله ۲ کاراکتر دوم
  • مقدار آبی بودن بوسیله ۲ کاراکتر آخر

اگر بجای دو کارکتر ۰۰ گذاشتیم ، یعنی کمترین مقدار موجود که همون ۰ در مبنای ۱۰ میشه و یعنی اینکه هیچ مقداری از اون رنگ مورد نظر رو در رنگ نهایی مخلوط نکن. اگر بجای دو کارکتر FF بزاریم بمعنای بیشترین مقدار هست که همون ۲۵۵ در مبنای ۱۰ خواهد بود.

در مثال بالا نوشتیم #۰۰۰۰۰۰. یعنی نه قرمز میخوایم ، نه سبز و نه آبی. پس در خروجی سیاه نمایش داده میشه. بصورت زیر :

css-colors

حالا بنظرتون اگه یک رنگ آبی بخوایم باید چکار کنیم؟

میتونیم دو رقم آخر رو که مربوط به رنگ آبی هستن رو ، برابر با FF قرار بدیم. بصورت زیر :

css-colors3

حالا اگر بخوایم یک رنگ ارغوانی درست کنیم باید چکار کرد. باید یک مقدار از قرمز رو با یک مقدار از آبی مخلوط کنیم ، تا این رنگ برامون درست بشه. بصورت زیر :

css-colors4

خروجی بصورت زیر خواهد بود :

css-colors5

میبینید که برای قرمز و آبی مقادیر ۸۰ رو قرار دادیم. اگر ۸۰ رو که در مبنای ۱۶ هست ، به مبنای ۱۰ تبدیل کنیم ، برابر با ۱۲۸ خواهد شد. میدونیم که بیشترین مقدار ۲۵۵ هست ، پس یعنی ۱۲۸ تا از ۲۵۵ برداشتیم ، یعنی نصف.

همونطور که قبلا گفتم حروف بزرگ با حروف کوچک هیچ فرقی ندارن. یعنی #ffffff با #FFFFFF برابر هست. همچنین در روش هگزادسیمال اگر شرایط خاصی برقرار باشه ، میتونین خلاصه نویسی کنید. شرطش اینه که ، هر زمان دو کاراکتر هر رنگ با هم برابر بود ، میتونیم بجای اونا یکی قرار داد. یعنی #FFFFFF رو میشه بصورت #FFF نوشت و #DD00AA رو میشه بصورت #D0A نوشت و بشکل ۳ کاراکتر در آورد.

۲٫ RGB :

این روش همون کار روش قبلی رو انجام میده ولی تفاوت کلیش در این هست که در مبنای ۱۰ هست و از اونجایی که ما بیشتر از مبنای ۱۰ استفاده میکنیم ، این روش میتونه طرفدار بیشتری داشته باشه.

مانند گذشته با یک مثال بحث رو جلو میبریم :

نتیجه در خروجی :

css-colors1

همونطور که میبینید نتیجه خروجی سیاه شد. فرمت کلی این روش بصورت زیر هست :

میبینید که مانند گذشته بترتیب باید مقادیر قرمز ، سبز و آبی رو مشخص کنید. در اینجا میتونین از ۰ که حداقل مقدار هست ، تا ۲۵۵ که حداکثر مقدار هست ، برای هر رنگ استفاده کنید. در مثال بالا برای هر سه رنگ مقدار ۰ رو در نظر گرفتیم و نتیجه رنگ سیاه شد.

حالا اگر بخواهیم رنگ آبی خالص تولید کنیم ، میتونیم رنگهای قرمز و سبز رو ۰ بزاریم و مقدار رنگ آبی رو ۲۵۵ بزاریم. بصورت زیر :

css-colors6

در جلسه بعد ادامه میدیم.

 



ads

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

Admin 153 نوشته در دیزاینر دارد . مشاهده تمام نوشته های

دیدگاه ها


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

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