هنگام طراحی وب سایت عوامل زیادی باید در نظر گرفته شود. فونت ، جریان UX و موارد دیگر. یکی از عناصر بسیار مهم طراحی ، رنگ است. حتی تصمیمات ساده مانند رنگ نام تجاری ، رنگ حاشیه و رنگ پس زمینه تأثیر مشخص و قابل توجهی را ایجاد می کند.
در این مقاله ، ما اصول رنگ CSS را پوشش می دهیم و یاد می گیریم که چگونه یک سایت HTML را به یک وب سایت بی نقص تبدیل کنیم.
شروع کار با رنگ های CSS
روش خاصی برای توصیف رنگ ها در CSS وجود دارد که رایانه می تواند درک کند. این کار معمولاً با تقسیم رنگ به اجزای مختلف ، محاسبه مجموعه ای از رنگهای اصلی برای ایجاد رنگ دلخواه انجام می شود. چندین روش مختلف برای توصیف رنگ در CSS وجود دارد.
استفاده از نام های رنگی به عنوان کلمات کلیدی
تقریبا 140 نام رنگ CSS وجود دارد که اکثر مرورگرهای مدرن از آنها پشتیبانی می کنند. برای کلمه کلیدی رنگ می تواند به سادگی قرمز یا فیروزه ای باشد. اگرچه به طیف متوسطی از رنگ ها کمک می کند ، اما شما محدود به چند رنگ خاص با کنترل صفر در سایه ها و رنگ ها هستید. اینجاست که باید به محدوده بالاتری از گزینه های رنگ CSS بروید.
/*Syntax*/
color: red;
color: crimson;
color: slateblue;
استفاده از مقادیر RGB
هنگام طراحی یک وب سایت یا یک برنامه ، رنگ بندی اهمیت زیادی دارد – قطعاً نباید آخرین چیزی باشد که در نظر دارید. در CSS ، می توانید از سه روش برای نشان دادن رنگ RGB استفاده کنید. اینها نماد رشته هگزادسیمال ، نماد عملکردی RGB و نماد عملکردی HSL هستند. در اینجا نگاهی دقیق تر به هر یک از آنها می اندازیم.
علامت رشته هگزادسیمال
نماد رشته هگزادسیمال همیشه با کاراکتر # شروع می شود. به دنبال این کاراکتر ، رنگ ها را با استفاده از رقم های هگزادسیمال یک کد رنگ خاص مشخص می کنید. این رشته به حروف کوچک و بزرگ حساس نیست ، اما استفاده از حروف کوچک معمولی است. در اینجا چند مورد استفاده وجود دارد:
#rrggbb
این رایج ترین روش برای توصیف رنگ عددی است. این یک رنگ کاملاً مات با اجزای قرمز ، سبز و آبی به ترتیب 0xrr ، 0xgg و 0xbb است.
#rrggbbaa
از معیارهای RGB که در بالا ذکر شد با یک کانال آلفا پیروی می کند که به وضوح رنگ رسیدگی می کند. هرچه مقدار 0xaa کمتر باشد ، رنگ شفاف تر می شود.
#rgb
اگر رنگ #556677 دارید ، می توانید آن را به عنوان #567 بنویسید زیرا به ترتیب نشان دهنده 0xrr ، 0xgg و 0xbb است. به عنوان مثال ، #000 (یا #000000 ) سیاه است در حالی که #fff (یا #ffffff ) سفید است.
#رگبا
از معیارهای فوق با یک کانال آلفا که توسط 0xaa تعیین شده است برای کنترل کدورت پیروی می کند.
RGB Functional Notation
نماد عملکردی RGB نشان دهنده رنگها با استفاده از اجزای قرمز ، سبز و آبی است. با استفاده از تابع () rgb که پارامترهای ورودی را در قالب اجزای اصلی قرمز ، سبز و آبی (و یک کانال آلفا اختیاری) می پذیرد ، تعریف می شود. مقادیر قرمز ، سبز و آبی باید یک عدد صحیح بین 0 تا 255 (شامل) یا درصدی از 0 تا 100 درصد متغیر باشد. از طرف دیگر ، کانال آلفا مقادیر 0.0 (کاملاً شفاف) تا 1.0 (کاملاً مات) را می پذیرد. همچنین مقدار درصد را از 0 ((همان 0.0) و 100 ((همان 1.0) می پذیرد.
/*Syntax*/
color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);
HSL Functional Notation
نماد عملکردی HSL نشان دهنده رنگ با استفاده از رنگ ، اشباع و روشنایی است. از نظر کاربرد بسیار شبیه به تابع rgb () است. به راحتی می توانید مقدار شش ضلعی هر رنگی را روی صفحه کامپیوتر خود بیابید . در این روش رنگ ، رنگ با توجه به موقعیت روی چرخ رنگ ، رنگ واقعی را مشخص می کند. اشباع درصد خاکستری با حداکثر رنگ ممکن است. درخشندگی با افزایش رنگ ، رنگ را از تاریک ترین به روشن ترین ظاهر ممکن تبدیل می کند.
مقدار رنگ (H) توسط واحد زاویه پشتیبانی شده در CSS مشخص می شود. شامل deg ، rad ، grad و turn می باشد. اشباع (S) درصد رنگ نهایی تشکیل شده از رنگ را مشخص می کند. جزء روشنایی (L) سطح خاکستری را مشخص می کند.
/*Syntax*/
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);
کاربرد رنگها در عناصر HTML
در CSS، اموال رنگ رنگ پیش زمینه از محتوای تعریف می کند، و رنگ پس زمینه رنگ پس زمینه از محتوای ساختار های HTML تعریف می کند. هنگامی که یک عنصر ارائه می شود ، می توانید از ویژگی های رنگ برای ایجاد سبک استفاده کنید.
ویژگی رنگ برای متون
ویژگی رنگ هنگام ترسیم متن و هنگامی که به هر نوع تزئین متن نیاز دارید استفاده می شود. می توانید از ویژگی text-decoration-color برای نمایش خطوط زیر خطوط ، خطوط برجسته یا خطوط رنگی مختلف استفاده کنید. می توانید رنگ پس زمینه متن را با استفاده از ویژگی background-color تغییر دهید . با استفاده از ویژگی text-shadow می توانید یک اثر سایه بر روی متن اعمال کنید . هنگام ترسیم نمادهای تأکید در زمینه های متن ، می توانید متن-تأکید-رنگ را انتخاب کنید.
ویژگی رنگ برای جعبه ها
همانطور که می دانید ، همه چیز در یک صفحه وب از مدل جعبه پیروی می کند. بنابراین ، هر عنصر یک جعبه با نوعی محتوا و پد اختیاری ، حاشیه و منطقه حاشیه است. هنگامی که محتوای پیش زمینه وجود ندارد ، می توانید از ویژگی background-color استفاده کنید. وقتی در حال کشیدن خطی برای جدا کردن ستون های یک متن هستید ، می توانید از ویژگی column-rule-color برای آن استفاده کنید. یک ویژگی outline-color برای رنگ آمیزی طرح کلی وجود دارد. توجه داشته باشید که طرح کلی با حاشیه متفاوت است – به عنوان شاخص تمرکز عمل می کند.
ویژگی رنگ برای مرزها
هر عنصر HTML می تواند حاشیه داشته باشد. برای تعیین رنگ حاشیه طرفهای مربوطه ، می توانید ویژگی border-color را به صورت border-top-color ، border-right-color ، border-bottom-color و border-left-color تنظیم کنید. اگرچه استفاده از ویژگی مختصر نویسی تمرین خوبی است.
ویژگی border-inline-start-color به شما امکان می دهد لبه های حاشیه را که نزدیک به ابتدا هستند رنگ آمیزی کنید. از طرف دیگر ، ویژگی border-inline-end-color به شما امکان می دهد انتهای شروع خطوط متن را در یک کادر رنگ آمیزی کنید. اگرچه بسته به حالت نوشتاری ، جهت گیری متن و جهت شما متفاوت است .
جمع بندی: رنگ و دسترسی
اگرچه یک وب سایت با طراحی زیبا به شدت تحت تأثیر رنگ مورد استفاده قرار می گیرد ، اما همیشه باید از در دسترس بودن آن اطمینان حاصل کنید. استفاده نادرست از رنگ می تواند منجر به از بین رفتن ترافیک قابل توجهی در وب سایت شما شود.
استفاده از علامت های رشته هگزا دسیمال ، نام رنگ یا مقادیر RGB کاملاً به شما بستگی دارد. فقط مطمئن شوید که از رنگ ها برای تقویت متن موجود استفاده می کنید و از آن بخواهید که از سلسله مراتب بصری مشخصی پیروی کند. اگر شما یک توسعه دهنده وب تازه کار هستید ، یادگیری بیشتر در مورد نظریه رنگ و ایجاد پالت شخصی خود ایده ای عالی است. تا آن زمان ، برنامه نویسی شاد و رنگارنگ!
