کار با رنگ ها در CSS

هنگام طراحی وب سایت عوامل زیادی باید در نظر گرفته شود. فونت ، UX و موارد دیگر. یکی از عناصر بسیار مهم طراحی ، رنگ است. حتی تصمیمات ساده مانند رنگ نام تجاری ، رنگ حاشیه و رنگ پس زمینه تأثیر مشخص و قابل توجهی را ایجاد می کند. در این مقاله ، ما اصول رنگ ها در CSS را پوشش می دهیم و یاد می گیریم که چگونه یک سایت HTML را به یک وب سایت بی نقص تبدیل کنیم.

شروع کار با رنگ های CSS

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

استفاده از نام های رنگی به عنوان کلمات کلیدی

تقریبا ۱۴۰ نام رنگ CSS وجود دارد که اکثر مرورگرهای مدرن از آنها پشتیبانی می کنند. برای کلمه کلیدی رنگ می تواند به سادگی Red یا Blue باشد. اگرچه به طیف متوسطی از رنگ ها کمک می کند ، اما شما محدود به چند رنگ خاص با کنترل صفر در سایه ها و رنگ ها هستید. اینجاست که باید به محدوده بالاتری از گزینه های رنگ CSS بروید.

/*Syntax*/
color: red;
color: crimson;
color: slateblue;

استفاده از مقادیر RGB

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

علامت رشته هگزادسیمال

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

#rrggbb

این رایج ترین روش برای توصیف رنگ عددی است. این یک رنگ کاملاً مات با اجزای قرمز ، سبز و آبی به ترتیب 0xrr ، 0xgg و 0xbb است.

#rrggbbaa

از معیارهای RGB که در بالا ذکر شد با یک کانال آلفا پیروی می کند که به وضوح رنگ رسیدگی می کند. هرچه مقدار 0xaa کمتر باشد ، رنگ شفاف تر می شود.

#rgb

اگر رنگ ۵۵۶۶۷۷# دارید ، می توانید آن را به عنوان ۵۶۷# بنویسید زیرا به ترتیب نشان دهنده 0xrr ، 0xgg و 0xbb است. به عنوان مثال ، ۰۰۰# (یا ۰۰۰۰۰۰# ) سیاه است در حالی که fff# (یا ffffff# ) سفید است.

#rgba

از معیارهای فوق با یک کانال آلفا که توسط 0xaa تعیین شده است برای کنترل کدورت پیروی می کند.

RGB Functional Notation

RGB functional notation  نشان دهنده رنگها با استفاده از اجزای قرمز ، سبز و آبی است. با استفاده از تابع () rgb که پارامترهای ورودی را در قالب اجزای اصلی قرمز ، سبز و آبی (و یک کانال آلفا اختیاری) می پذیرد ، تعریف می شود. مقادیر قرمز ، سبز و آبی باید یک عدد صحیح بین ۰ تا ۲۵۵ (شامل) یا درصدی از ۰ تا ۱۰۰ درصد متغیر باشد. از طرف دیگر ، کانال آلفا مقادیر ۰.۰ (کاملاً شفاف) تا ۱.۰ (کاملاً مات) را می پذیرد. همچنین مقدار درصد را از ۰ ((همان ۰.۰) و ۱۰۰ ((همان ۱.۰) می پذیرد.

/*Syntax*/
color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);

HSL Functional Notation

HSL Functional Notation  نشان دهنده رنگ با استفاده از رنگ ، اشباع و روشنایی است. از نظر کاربرد بسیار شبیه به تابع () rgb  است. به راحتی می توانید مقدار شش ضلعی هر رنگی را روی صفحه کامپیوتر خود بیابید . در این روش رنگ با توجه به موقعیت روی چرخ رنگ ، رنگ واقعی را مشخص می کند.

مقدار رنگ (H) توسط واحد زاویه پشتیبانی شده در CSS مشخص می شود. شامل deg ، rad ، grad و turn می باشد. اشباع (S) درصد رنگ نهایی تشکیل شده از رنگ را مشخص می کند. جزء روشنایی (L) سطح خاکستری را مشخص می کند.

/*Syntax*/
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

کاربرد رنگها در عناصر HTML

در CSS ، ویژگی color  رنگ پیش زمینه محتوا را تعیین می کند ، و background-color پس زمینه محتوا را که توسط HTML ساختار یافته است ، مشخص می کند. هنگامی که یک عنصر ارائه می شود ، می توانید از ویژگی های رنگ برای ایجاد سبک استفاده کنید.

Color Property for Texts

می توانید از ویژگی text-decoration-color برای نمایش  خطوط برجسته یا خطوط رنگی مختلف استفاده کنید. می توانید رنگ پس زمینه متن را با استفاده از ویژگی background-color تغییر دهید . با استفاده از ویژگی text-shadow می توانید یک اثر سایه بر روی متن اعمال کنید .

ویژگی رنگ برای Boxes

همانطور که می دانید ، همه چیز در یک صفحه وب از مدل Boxes پیروی می کند. بنابراین ، هر عنصر یک جعبه با نوعی محتوا و پد اختیاری ، حاشیه و منطقه حاشیه است. هنگامی که محتوای پیش زمینه وجود ندارد ، می توانید از ویژگی background-color استفاده کنید . هنگامی که در حال کشیدن یک خط به منظور جدا کردن ستون های یک متن هستید ، می توانید از ویژگی column-rule-color برای آن استفاده کنید. یک ویژگی outline-color برای رنگ آمیزی طرح کلی وجود دارد.

ویژگی رنگ برای Borders

هر عنصر HTML می تواند حاشیه داشته باشد. برای تعیین رنگ حاشیه طرفهای مربوطه ، می توانید ویژگی border-color را به صورت border-top-color ، border-right-color ، border-bottom-color و border-left-color تنظیم کنید.

ویژگی border-inline-start-color به شما امکان می دهد لبه های حاشیه را که نزدیک به ابتدا هستند رنگ آمیزی کنید. از طرف دیگر ، ویژگی border-inline-end-color به شما امکان می دهد انتهای شروع خطوط متن را در یک کادر رنگ آمیزی کنید. هر چند که بسته به شما متفاوت است.

• مرتبط : جدول کد رنگ ها در HTML و سایر برنامه ها

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

استفاده از علامت های رشته هگزا دسیمال ، نام رنگ یا مقادیر RGB کاملاً به شما بستگی دارد. فقط مطمئن شوید که از رنگ ها برای تقویت متن موجود استفاده می کنید . اگر شما یک توسعه دهنده وب تازه کار هستید ، یادگیری بیشتر در مورد نظریه رنگ و ایجاد پالت شخصی خود ایده ای عالی است.