کار با رنگ در CSS – رنگ CSS
خوش اومدین به سومین جلسه از دوره آموزش CSS. امروز میخایم در مورد رنگ در CSS با همدیگه صحبت کنیم. ما از رنگ توی جاهای مختلفی استفاده میکنیم. از تغییر بک گراند و پس زمینه بخش ها تا رنگ متن تا رنگ کادرهایی که دور بخش ها و تگ های HTML قرار میدیم، توی همه این قسمتها از رنگها استفاده میکنیم. اما باید بدونیم که اختصاص دادن یه رنگ به بخش مورد نظرمون، دارای قواعد و قوانینی است. ما تو این بخش به تمامی مطالب پیرامون رنگ در CSS میپردازیم و بعد از این میتونید به راحتی از رنگ ها در پروژه های خودتون استفاده کنید.
روشهای اختصاص رنگ در CSS
همونطور که قبلتر گفتم، ما میتونیم رنگ ها رو به ویژگی های متفاوتی اختصاص بدیم. اما این اختاص به چند روش انجام میشه. ما با روشهای زیر میتونیم یک رنگ رو به ویژگی مدنظرمون اختصاص بدیم.
- استفاده از نام رنگ
- استفاده از کد رنگ (RGB)
- استفاده از کد رنگ (HEX)
- استفاده از کد رنگ (HSL)
1. استفاده از نام رنگ
این امکان وجود داره که ما با نوشتن نام رنگ در هنگام مقداردهی، رنگ مورد نظرمون رو به ویژگی مربوطه اختصاص بدیم. این اسم ها که حدود 140 مورد هستند، توسط اکثر مرورگرهای مدرن پشتیبانی میشن. پس با خیال راحت میتونید از اونها استفاده کنید. لیست کامل اسم رنگ های CSS رو در این صفحه ببینید.
در قطعه کد زیر ما از این روش برای مقداردهی استفاده کردیم:
<p style="background-color:Tomato;">Lorem ipsum...</p>
من در قطعه کد بالا رنگ پس زمینه را، “گوجه ای” قرار دادم. با نوشتن مقدار Tomato این امکان وجود داره که من رنگ خودم رو انتخاب کنم.
هرچند این روش خیلی ساده است ولی تنها 140 رنگ رو در اختیار ما قرار میده و از لحاظ بسیار محدود هست.
2. استفاده از کد رنگ RGB
دومین روش استفاده از کد رنگ RGB هست. رنگ های RGB ترکیبی از سه رنگ اصلی هستند که شامل قرمز، سبز و آبی هستند. هر حرف نماینده یک رنگ است و میتواند عددی بین 0 تا 255 رو قبول بکنه. ساختار کلی استفاده از رنگ RGB رو در زیر میتونید ببینید:
rgb(red, green, blue)
به این ترتیب ما میتونیم با استفاده از این روش به شکل زیر درکدهامون ازش استفاده کنیم:
<p style="background-color:rgb(255, 99, 71);">Lorem ipsum...</p>همونطور که در مثال بالا میبینید من اینبار بجای اینکه از نام رنگ استفاده کنم، همان رنگ رو با استفاده از کدهای RGB ایجاد کردم.
3. استفاده از کد رنگ HEX
این روش از لحاظ روش ایجاد رنگ دقیقا مثل روش RGB است با این تفاوت که بجای اینکه 3 عدد برای قرمز، سبز و آبی را در مبنای 10 (که مبنای روزمره ما است) قبول بکنه. سه عدد رو در مبنای 16 یا هگزادسیمال قبول میکنه. ساختار کلی این روش به شکل زیر هست:
#rrggbb
در روش RGB ما برای هر رنگ عددی بین 0 تا 255 رو میتونستیم وارد کنیم ، این عدد در مبنای 10 بود. اینجا هم دقیقا همین اعداد رو در مبنای 16 میتونیم وارد کنید یعنی از اعداد 00 تا ff . (در ویدیوی این قسمت توضیحات کاملی در مورد اعداد مبنای 16 و هگزادسیمال داده ام)
اگر بخواهیم مقداردهی که در مثالهای بالا با استفاده از نوشتن نام رنگ و استفاده از کد رنگ RGB بیان کرده بودیم رو اینجا با استفاده از کد رنگ HEX بگیم، قطعه کد زیر رو خواهیم داشت:
<p style="background-color:#ff6347;">Lorem ipsum...</p>خروجی این روش با 2 روش قبلی هیچ تفاوتی نداره و ما از این طریق هم به همون رنگ قبلی میرسیم.
4. استفاده از کد رنگ HSL
این روش هم یکی از روشهای مشخص کردن رنگ در CSS هست. برای تعیین رنگ مدنظرمون ما به 3 پارامتر احتیاج داریم. عدد اول مربوط به درجه رنگ هست که عددی بین 0 تا 360 هست. عدد دوم مربوط به اشباع رنگ است که درصد اشباع رنگ رو مشخص میکنه و از اونجایی که این عدد درصد هست، عددی بین 0 تا 100 رو فقط میتونه بگیره. و عدد سوم هم درصد شفافیت و روشنایی رو مشخص میکنه که طبیعتا بازهم عددی بین 0 تا 100 هست. ساختار کلی این روش به شکل زیر هست:
hsl(hue, saturation, lightness)
اگر بخواهیم رنگ گوجه ای که در مثالهای قبلی ایجاد کردیم رو با استفاده از روش HSL ایجاد کنیم کد ما به شکل زیر میشه:
<p style="background-color:hsl(9, 100%, 64%);">Lorem ipsum...</p>درجه رنگ 9 با اشباع 100% و شفافیت 64% رنگ گوجه ای رو برای ما ایجاد میکنه.
بهترین روش ایجاد رنگ در CSS کدام روش است؟
هرچند که ما رنگ مورد نظرمون رو از هر روشی که ایجاد کنیم ، خروجی یکسانی داریم ولی مرسوم ترین روش استفاده از روش HEX و RGB است. همونطور که گفتیم این دو روش از نظر ساختار یکسان هستند و فقط اعداد وارد شده در مبنای 10 و 16 هستند که انتخاب بین این دو روش اختیاری است. روش اول محدودیت زیادی داره و ما مجبوریم از بین 140 رنگ یکی رو انتخاب کنیم ولی در 3 روش دیگه ما امکان ایجاد میلیون ها رنگ رو داریم. در حقیقت تمام رنگ هایی که چشم ما قادر به تشخیص آن هست و در طبیعت موجود است رو میتونیم با استفاده از این 3 روش ایجاد کنیم.
من در طول این دوره از 2 روش HEX و RGB استفاده میکنم.
ایجاد کد رنگ RGB ، HEX و HSL
خب حالا باید ببینیم که این کد رنگ رو چجوری بسازیم. ما از کجا باید بدونیم که چه اعدادی رو باید وارد کنیم تا رنگ دلخواهمون بدست بیاد؟ روشهای زیادی برای انجام این کار هست ولی وبسایتی که معرفی میکنم این کار رو به راحتی برای شما انجام میده. کافیه که شما رنگ مورد نظرتون رو از جعبه رنگ انتخاب کنید و کد اون رو دریافت کنید و در کدهای CSS از اون استفاده کنید.
به وبسایت زیر برید:
در این و بسایت جعبه رنگ زیر رو میتونید ببیند:
همونطور که میبینید من رنگ گوجه ای که در مثالهای بالا استفاده کرده بودم رو از داخل جعبه رنگ انتخاب کردم. شما هر رنگی رو که مایل هستید میتونید به راحتی انتخاب کنید. رنگ انتخاب شده شما در سمت راست مشخص هست. در بالای تصویر میبینید که کد HEX و RGB و HSL که مربوط به رنگ انتخاب شده هستند دیده میشه. شما میتونید از این روش برای پیدا کردن هر کد رنگی استفاده کنید.
ویژگی های رنگ در CSS
خب حالا که یاد گرفتیم چطوری مقدار رنگ مورد نظرمون رو پیدا کنیم وقتشه که بریم سراغ مقداردهی به ویژگی هایی که مقدار رنگ رو قبول میکنن.
تعیین رنگ متن با استفاده از CSS
ما با استفاده ویژگی color میتونیم رنگ متن موردنظرمون رو تغییر بدیم. مثال زیر رو ببینید:
همونطور که در تصویر بالا میبینید من با استفاده از ویژگی color رنگ تگ h1 خودم رو به قرمز و رنگ تگ p رو به آبی تغییر دادم.
تعیین رنگ پس زمینه با استفاده از CSS
ما با استفاده از ویژگی background-color میتونیم رنگ پس زمینه selector رو تغییر بدیم. مثل زیر رو ببینید:
همونطور که در تصویر بالا میبینید با استفاده از ویژگی background-color پس زمینه body رو به نارنجی تغییر دادم و همچنین پس زمینه تگ های h1 و p رو هم بصورت مجزا تغییر دادم.
بخش های دیگری هم هستند که ما میتونیم براشون رنگ مشخص کنیم. از جمله کادرها، رنگ لینک ها، سایه ها و… در طول دوره با این موضوعات بیشتر آشنا میشیم.
