رنگ ها در CSS

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش CSS از تاپ سایت 98 به سراغ رنگ ها در CSS  می رویم و با ذکر چند مثال با آنها آشنا می شویم. همچنین با RGBA و RGB و HEX و HSL و HSLA آشنا می شوید. مثال ها کاملا تست شده می باشند.

برای دستورات مختلف css نیاز است از رنگ ها استفاده شود.

چندین روش برای استفاده از رنگ ها وجود دارد که توضیح خواهیم داد.

RGB که شامل رنگ های قرمز ، سبز و آبی می باشند. از ترکیب این 3 رنگ ، رنگ های مختلفی بوجود می آید.

اعدادی که استفاده می شود بین صفر تا 255 می باشد. 255 یعنی رنگ کامل .

RGBA شامل همان رنگ های قرمز ، سبز و ابی هستند ولی یک گزینه به آنها اضافه می شود و آن OPACITY یا شفافیت است که عددی بین صفر تا یک می باشد.

نام رنگ : استفاده از نام رنگ مانند RED یعنی قرمز ، BLUE یعنی آبی. در نرم افزارها و ادیتورهای حرفه ای مانند PHPSTORM این نام ها وجود دارند و می توانید انها را انتخاب نمایید.

HEX که اعداد صفر تا 9 و حروف a تا f را شامل می شود. هر رنگ شامل 6 کاراکتر می باشد و شامل اعداد صفر تا 9 و حروف a-f می باشد. مانند ff0000 که نشان دهنده رنگ قرمز است.

HSL که شامل hue, saturation, lightness می باشد. HUE نشاندهنده رنگ است و عددی بین صفر تا 360 را می گیرد. عدد صفر رنگ قرمز ، 120 رنگ سبز و 240 رنگ آبی می باشد.

Saturation  نشاندهنده غلظت رنگ می باشد. عدد 100% رنگ کامل و صفر رنگ GRAY میباشد.

Lightness نیز میزان روشنایی می باشد 50% برای روشنایی کافی است. هر چه بالاتر بروید رنگ به سفیدی و کم رنگی می رود و هر چه زیر 50 بروید رنگ تیره تر می رود و به طرف مشکی می رود. اگر صفر استفاده نمایید رنگ کاملا مشکی می شود و اگر 100% استفاده نمایید رنگ سفید می شود.

HSLA نیز یک ورودی بیشتر می گیرد و میزان شفافیت را مشخص می کند و عددی بین صفر تا یک می باشد.

امیدواریم این آموزش برای شما مفید باشد.

بزودی این آموزش کامل می شود. مثال در فیلم بالا وجود دارد.