cssطراحی سایت

جلسه ۲۷: معنای رنگ در CSS در CSS

رنگ ها در بیشتر موارد طرح های زیبایی را تشکیل می دهند. در این درس نظریه رنگ زیادی وجود نخواهد داشت ، اما شما یاد خواهید گرفت که رنگها را با CSS دستکاری کنید. همچنین واحدهای رنگی را در CSS فرا خواهید گرفت. تقریباً همه موارد مهم رنگی CSS. این درس را با یک مثال سریع آغاز خواهیم کرد. نگاهی به کد زیر بیندازید:
body {
  background-color: red;
}
کد بالا نشان می دهد که ما از آغاز دوره چگونه با رنگ ها رفتار کرده ایم. ما از نام هایی مانند red ، blue ، green و غیره استفاده کرده ایم. این نام های رنگی به طور کلی به عنوان نام های رنگی شناخته می شوند و حدود ۱۴۰ مورد از این نام ها وجود دارد و همه معتبر هستند. می توانید در اینجا نگاهی به همه آنها بیندازید قبل از جست و خیز برای دیدن این رنگ ها ، سعی نکنید رنگ ها را به خاطر بسپارید. فقط نگاهی به آنها بیندازید حتی با وجود ۱۴۰ رنگ، طراحان وب و توسعه دهندگان به موارد بیشتری احتیاج دارند! بیایید نگاهی به روشهای دیگر تعریف رنگها در CSS بیندازیم.

۱٫ مقادیر RGB

نگاهی به تصویر زیر بیندازید. چه چیزی را به شما یادآوری می کند؟

برای من ، این یادآور وقتی بچه بودم است. وقتی با مداد رنگی بازی می کردم. ✏️ نکته مهمی که باید به آن توجه کنید ، مخلوط شدن رنگها است. ۳ رنگ اصلی (قرمز ، سبز و آبی) با هم مخلوط شده و رنگهای مختلف دیگری تولید می شود. این مفهوم به همان اندازه در CSS نیز پذیرفته شده است. فقط به جای مخلوط کردن این رنگها با مداد ، این کار را در مقادیر ۰ – ۲۵۵ انجام خواهیم داد.

مثال ها:

بیایید نگاهی به چند نمونه بیندازیم. در ابتدایی ترین شکل ، رنگ ها در مقادیر rgb تعریف می شوند همانطور که در زیر مشاهده می کنید:
body {
  background-color: rgb(0,0,0);
}

body {
   background-color: rgb(255,255,255) 
}
اکنون نام رنگ ها را برداشته و rgb() را جایگزین کرده ایم اولین مقدار در اعلان rgb() به رنگ قرمز و دو مقدار دیگر به ترتیب به سبز و آبی اختصاص می یابد.

در اینجا چند نمونه عملی دیگر آورده شده است. rgb (255،۰،۰) می گوید ، “سطل رنگ” را با ۲۵۵ کاسه رنگ قرمز پر کنید ، و هیچ مقداری از سبز و آبی بر ندارید. بنابراین ، این یک رنگ کاملا قرمز است
<html>
 <head>
 </head>
 <body>
   <div> I am learniong about colors!</div>
 </body>
</html>
body {
  background-color: rgb(255, 0, 0)
}
لطفا از زمین بازی در بالا دیدن کنید. تنظیم رنگ پس زمینه صفحه به rgb (0 ، ۲۵۵ ، ۰) چه عواملی دارد؟ “هیچ سطل قرمز ، ۲۵۵ سطل سبز و هیچ سطل آبی“
<html>
 <head>
 </head>
 <body>
   <div> I am learning about colors!</div>
 </body>
</html>
body {
  background-color: rgb(0, 255, 0)
}
مانند قبل ، روی برگه “خروجی” کلیک کنید تا نتیجه را ببینید. اکنون فکر می کنم شما از این موضوع آگاه شده اید. بنابراین پیش بروید و رنگ پس زمینه صفحه را در کد بالا به rgb (0،۰،۲۵۵) تنظیم کنید. پس باید یک صفحه آبی دریافت کنید.

گزینه های رنگ بیشتر

مطمئناً ترکیبات بیشتری مانند آبی ، سبز و قرمز وجود دارد. سه رنگ را می توان به روش های بسیار مختلفی مخلوط کرد. از ۰ – ۲۵۵٫ این بدان معناست که شما می توانید رنگهایی مانند rgb (0،۳۴،۱۲۷) ، rgb (89، ۲۴۱، ۸) یا rgb (90، ۵۶، ۲۲۲) داشته باشید. احتمالات واقعاً بسیار زیاد است.
<html>
 <head>
 </head>
 <body>
   <div> I am learning about colors!</div>
 </body>
</html>
body {
  background-color: rgb(90, 56, 222)
}

آیا لازم است همه این رنگها را حفظ کنم؟

نه. برای شما ابزارهای زیادی وجود دارد که روند انتخاب رنگ برای پروژه های وب شما را بسیار آسان می کند. یکی از این موارد و شاید مورد علاقه من https://www.materialui.co/colors است نگران نباشید ، در بخشهای عملی موجود ، ما رابط های کاربری واقعی ایجاد می کنیم و آنها را با رنگ تزئین می کنیم. من تمام ترفندهای ها را به شما نشان خواهم داد …

۲٫ مقادیر RGBA

مقادیر RGBA بسیار شبیه مقادیر RGB هستند – به جز یک چیز که شفافیت است. گاهی اوقات شما یک رنگ ثابت نمی خواهید اما می خواهید کمی شفافیت بپاشید. در چنین مواردی از مقادیر RGBA استفاده کنید. ”A” که بعد از "RGB" در "RGBA" ایستاده نشان دهنده کانال آلفای رنگ است. این مقدار شفافیت جسم را مشخص می کند. بیایید یک مثال را ببینیم

مثال:

  p {
        background-color: rgba(0,255,0,0.8)
   }
پارامتر آلفا عددی بین ۰٫۰ (کاملاً شفاف) و ۱٫۰ (کاملاً مات) است. بنابراین ، مثال بالا یک رنگ سبز کمی شفاف خواهد داشت. جالب است که به نظر می رسد ، می توانید این مورد را در هر یک از زمین های بازی بالا آزمایش کنید.

۳٫ مقادیر HEX

رنگها در CSS نیز ممکن است با استفاده از مقادیر HEX تعریف شوند. آنها نسبتاً عجیب به نظر می رسند. چیزی شبیه ، # است. چه کسی این را اختراع کرده است؟ و چرا اینقدر گیج کننده است؟ خبر خوب این است که شما نیازی نیست که خود را از اصل فرد عجیب و غریب نگران کنید. آنچه مهم است در اینجا است. به این موارد توجه کنید: ۱.”هگز” در مقادیر هگز ، به Hexademical اشاره دارد. ۲.قالب کلی آن #RRGGB است در جایی که R قرمز ، G سبز و B آبی است. ۳.برخلاف مقادیر RGB که دامنه آنها از ۰ تا ۲۵۵ است ، مقادیر hex دارای دامنه ۰۰ - FF هستند که ۰۰ کمترین و FF بالاترین است.

یک مثال سریع

این یک رنگ قرمز می دهد:
  p {
        background-color: #FF0000
   }
به همین ترتیب ، # ۰۰FF00 یک رنگ سبز و ۰۰۰۰FF ، آبی می دهد

هشدار

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

نتیجه

و همین! در بخشهای عملی بسیار سرگرم کننده خواهد بود. بیایید حرکت کنیم.

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

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

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

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