• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

4 1490 ۸ اردیبهشت ۹۴

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

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

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

css-colors

1. کدهای هگزادسیمال ( در مبنای 16 ) :

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

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

css-colors1

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

اگر ریاضی تا حدی بلد باشید ، حتما با مبناها آشنایی کمی دارید ، پس باید بدونید که در مبنای 16 میتونن عددهای 0 تا 15 وجود داشته باشند. همونطور که در مبنای 10 ، عددهای 0 تا 9 وجود دارن. در هگزا دسیمال عددهای 10 تا 15 رو به ترتیب با A و B و C و D و E و F نمایش میدن. کوچک یا بزرگ بودن حروف فرقی نداره.

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

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

اگر بجای دو کارکتر 00 گذاشتیم ، یعنی کمترین مقدار موجود که همون 0 در مبنای 10 میشه و یعنی اینکه هیچ مقداری از اون رنگ مورد نظر رو در رنگ نهایی مخلوط نکن. اگر بجای دو کارکتر FF بزاریم بمعنای بیشترین مقدار هست که همون 255 در مبنای 10 خواهد بود.

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

css-colors

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

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

css-colors3

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

css-colors4

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

css-colors5

میبینید که برای قرمز و آبی مقادیر 80 رو قرار دادیم. اگر 80 رو که در مبنای 16 هست ، به مبنای 10 تبدیل کنیم ، برابر با 128 خواهد شد. میدونیم که بیشترین مقدار 255 هست ، پس یعنی 128 تا از 255 برداشتیم ، یعنی نصف.

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

2. RGB :

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

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

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

css-colors1

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

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

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

css-colors6

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

خب دوستان خسته نباشید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    وحید صالحی(۹ اردیبهشت ۱۳۹۴)

    ممنون محمد جان مطلب بسیار خوبیه…

  • ‏‏

    ممنون خیلی واضح بود
    حیف که اشتراک گذاری صفحه نداره که تو پلاس به اشتراکش میزاشتم

    خیلی کاربردیه
    نمیدونم چرا زیر پستای این سایت نیس آخه!

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram