جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

جلسه 7 آموزش CSS: کار با رنگ ها (colors) در CSS

سلام رفقا 👋! حالتون چطوره؟ رسیدیم به جلسه هفتم از سری آموزش‌های جذاب CSS مون. توی این جلسه می‌خوام با دنیای رنگ‌ها در CSS حسابی آشنا کنمت.🎨🌈 رنگ‌ها نقش خیلی مهمی توی طراحی وب دارن و می‌تونن حس و حال سایت رو کاملاً عوض کنن و اون رو از بی روح بودن در بیارن. با من همراه شو تا یاد بگیری چطور با یک CSS، به عناصر سایتت زندگی و رنگ ببخشی. 😎

چرا رنگ‌ها توی CSS مهمن؟ 🤔

تصور کن یه سایت داری که همه‌چیزش سیاه و سفیده! 😩 خیلی خسته‌کننده به نظر می‌رسه، نه؟ رنگ‌ها جون می‌دن به طراحی وب و باعث می‌شن کاربرها بیشتر جذب سایتت بشن. با CSS می‌تونیم رنگ پس‌زمینه، رنگ متن، رنگ حاشیه‌ها و خیلی چیزهای دیگه رو تغییر بدیم و یه ظاهر جذاب برای سایتمون بسازیم. پس بزن بریم که یاد بگیریم چطور این کار رو انجام بدیم! 🙂

ویژگی‌ کلیدی رنگ در CSS: تعیین رنگ پس‌ زمینه و متن 🎨

قبل از اینکه برم سراغ روش‌های مختلف تعیین رنگ، لازمه بدونی که توی CSS دو تا ویژگی اصلی داریم که با استفاده از اونا می‌تونی رنگ‌ها رو اعمال کنی:

×

جلسه 3 آموزش CSS: کامنت گذاری در CSS

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• background-color: همونطور که از اسمش پیداست، این ویژگی برای تنظیم رنگ پس‌زمینه (زمینه) عناصر HTML استفاده می‌شه. مثلاً می‌تونی رنگ پس‌زمینه یه div، یه body یا هر عنصر دیگه‌ای رو با این ویژگی تعیین کنی.
• color: این ویژگی هم برای تنظیم رنگ متن (نوشته‌ها) داخل عناصر HTML به کار می‌ره. با استفاده از این ویژگی می‌تونی رنگ عناوین، پاراگراف‌ها، لینک‌ها و هر متن دیگه‌ای رو تغییر بدی.

حالا که با این دو تا ویژگی مهم آشنا شدی، بریم سراغ روش‌های مختلفی که می‌تونیم با استفاده از اونا به این ویژگی‌ها مقدار بدیم (یعنی رنگ مورد نظرمون رو تعیین کنیم). 😉

روش‌های مختلف برای تعیین رنگ بکگراند و متن در CSS ⚙️

خوشبختانه CSS راه‌های مختلفی رو برای تعیین رنگ در اختیارمون گذاشته. هر کدوم از این روش‌ها یه جور خاصی رنگ رو تعریف می‌کنن و ما می‌تونیم بسته به نیازمون ازشون استفاده کنیم. بریم با هم این روش‌ها رو ببینیم:

1️⃣ استفاده از نام رنگ‌ها (Color Names)

ساده‌ترین راه برای تعیین رنگ، استفاده از نام های از پیش تعیین شده رنگ‌هاست. CSS یه عالمه اسم رنگ رو می‌شناسه، مثل red (قرمز)، blue (آبی)، green (سبز)، yellow (زرد)، black (سیاه)، white (سفید) و خیلی اسم‌های دیگه. این روش برای رنگ‌های اصلی خیلی خوبه و راحت می‌تونی ازشون استفاده کنی.

×

جلسه 12 آموزش CSS: ویژگی width و height در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا، صفحه با پس‌زمینه آبی 🟦 و عنوان h1 با رنگ سبز 🟩 نمایش داده میشه.

👇 لیستی از رنگ‌های پرکاربرد در با اسم:

• red ❤️ (قرمز)
• blue 💙 (آبی)
• green 💚 (سبز)
• yellow 💛 (زرد)
• black ⚫ (سیاه)
• white ⚪ (سفید)
• orange 🧡 (نارنجی)
• purple 💜 (بنفش)
• pink 🩷 (صورتی)
• gray 🩶 (خاکستری)
• lightblue 🟦 (آبی روشن)
• darkgreen 🌲 (سبز تیره)

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

• مزایا: خیلی ساده و قابل فهمه، مخصوصاً برای رنگ‌های اصلی و پرکاربرد.
• معایب: تنوع رنگی محدودی داره و برای رنگ‌های دقیق و خاص مناسب نیست.
• چه زمانی استفاده کنیم؟ وقتی یه رنگ اصلی و ساده مثل red، blue، green و… رو می‌خوای از این روش برای تعیین رنگ استفاده کن.

👇 مجموعه ای از نام رنگ ها را در زیر میتونی ببینی 👇

×

جلسه 16 آموزش CSS: تصاویر (Images) در CSS

مطالعه

2️⃣ استفاده از کد هگزادسیمال (Hexadecimal Values)

کدهای هگزادسیمال یه جور کد 6 رقمی هستن که با یه علامت # شروع می‌شن. این کدها نشون می‌دن که هر کدوم از رنگ‌های اصلی (قرمز، سبز، آبی) چه مقدار باید با هم ترکیب بشن تا رنگ مورد نظرمون به دست بیاد. هر دو رقم اول برای رنگ قرمز، دو رقم بعدی برای رنگ سبز و دو رقم آخر برای رنگ آبی هستن. مقدار هر کدوم از این دو رقم می‌تونه از 00 تا FF باشه (0 کمترین مقدار و FF بیشترین مقدار رو نشون می‌ده).

ساختار کد هگزادسیمال: #RRGGBB

• RR: میزان رنگ قرمز (Red)
• GG: میزان رنگ سبز (Green)
• BB: میزان رنگ آبی (Blue)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا، صفحه با پس‌زمینه آبی روشن 🟦 و عنوان h1 با رنگ قرمز 🟥 نمایش داده میشه.

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

×

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه

• مزایا: خیلی دقیق و پرکاربرده، طیف وسیعی از رنگ‌ها رو پوشش می‌ده و توی طراحی وب خیلی رایجه. همه مرورگرها هم به خوبی ازش پشتیبانی می‌کنن.
• معایب: ممکنه حفظ کردن یا خوندنش برای رنگ‌های پیچیده یکم سخت باشه.
• چه زمانی استفاده کنیم؟ وقتی به دقت بالایی در انتخاب رنگ نیاز داری، یا وقتی با ابزارهای طراحی مثل فتوشاپ یا فیگما کار میکنی کد هگزادسیمال رنگ‌ها بهت کمک زیادی میکنه.

3️⃣ استفاده از مقادیر RGB (RGB Values)

RGB مخفف Red, Green, Blue (قرمز، سبز، آبی) هست. توی این روش، ما میزان هر کدوم از این سه رنگ اصلی رو با استفاده از اعداد بین 0 تا 255 مشخص می‌کنیم. rgb(red,Green,Blue)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا، صفحه با پس‌زمینه زرد روشن 🟡 و عنوان h1 با رنگ آبی تیره🔵 نمایش داده میشه.

مزایا و معایب استفاده از مقادیر RGB :

• مزایا: شبیه هگزادسیمال، دقت بالایی داره.
• معایب: مثل هگزادسیمال، ممکنه خوندنش برای رنگ‌های خیلی خاص یکم سخت باشه.
• چه زمانی استفاده کنیم؟ وقتی می‌خوای رنگ‌ها رو به صورت مستقیم با مقادیر قرمز، سبز و آبی کنترل کنی یا وقتی با جاوااسکریپت داری رنگ‌ها رو به صورت پویا تغییر میدی.

4️⃣ استفاده از مقادیر RGBA (RGBA Values)

RGBA هم مثل RGB هست، با این تفاوت که یه مقدار چهارم هم داره به اسم Alpha (آلفا). مقدار آلفا نشون می‌ده که رنگ چقدر شفاف باشه. مقدارش بین 0 (کاملاً شفاف) تا 1 (کاملاً مات) هست. rgb(red,Green,Blue,alpha)

×

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا، صفحه با پس‌زمینه آبی شفاف🔵 و عنوان h1 با رنگ قرمز مات🔴 نمایش داده میشه.

مزایا و معایب استفاده از مقادیر RGBA :

• مزایا: تمام مزایای RGB رو داره و علاوه بر اون، امکان تعیین شفافیت (آلفا) رو هم بهتون می‌ده که برای ایجاد افکت‌های بصری خیلی کاربردیه.
• معایب: ممکنه توی مرورگرهای قدیمی‌تر به طور کامل پشتیبانی نشه (البته الان دیگه تقریباً همه مرورگرهای مدرن ازش پشتیبانی می‌کنن).
• چه زمانی استفاده کنیم؟ وقتی به رنگ‌های نیمه‌شفاف یا شفاف نیاز داری، مثلاً برای ایجاد لایه‌های روی هم یا پس‌زمینه‌هایی که محتوای زیرشون دیده بشه.

5️⃣ استفاده از مقادیر HSL (HSL Values)

HSL مخفف Hue, Saturation, Lightness (فام، اشباع، روشنایی) هست. این روش یه جور دیگه برای توصیف رنگ‌هاست که ممکنه برای بعضی‌ها بصری‌تر باشه.

• Hue (فام): یه زاویه روی چرخه رنگ‌هاست (از 0 تا 360 درجه). مثلاً 0 قرمز، 120 سبز و 240 آبیه.
• Saturation (اشباع): میزان خلوص رنگ رو نشون می‌ده (از 0% که خاکستریه تا 100% که رنگ خالصه).
• Lightness (روشنایی): میزان روشن یا تیره بودن رنگ رو نشون می‌ده (از 0% که سیاهه تا 100% که سفیده، و 50% رنگ اصلیه).

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا، صفحه با پس‌زمینه سبز روشن 🟩 و عنوان h1 با رنگ آبی متعادل🔵 نمایش داده میشه.

×

جلسه 23 آموزش CSS: نحوه اولویت بندی عناصر در CSS

مطالعه

مزایا و معایب استفاده از مقادیر HSL :

• مزایا: برای انسان‌ها خیلی بصری‌تر و قابل فهم‌تره. با تغییر فام، اشباع و روشنایی می‌تونی به راحتی رنگ‌های مختلف رو پیدا کنی و تغییر بدی. ایجاد تنوع در رنگ‌ها (مثلاً رنگ‌های روشن‌تر یا تیره‌تر از یه رنگ اصلی) با HSL خیلی آسون‌تره.
• معایب: ممکنه برای کسایی که تازه باهاش آشنا شدن یکم زمان ببره تا قلقش رو یاد بگیرن.
• چه زمانی استفاده کنیم؟ وقتی می‌خوای رنگ‌ها رو بر اساس درک بصری خودت تنظیم کنی، یا وقتی می‌خوای به راحتی تنوع رنگی ایجاد کنی.

6️⃣ استفاده از مقادیر HSLA (HSLA Values)

HSLA هم مثل HSL هست، با این تفاوت که یه مقدار آلفا هم برای تعیین شفافیت داره (مثل RGBA). rgb(Hue,Saturation,Lightness,alpha)

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا، صفحه با پس‌زمینه سبز 🟩 و عنوان h1 با رنگ آبی روشن🟦 نمایش داده میشه.

مزایا و معایب استفاده از مقادیر HSLA :

×

CSS چیست؟ آشنایی با سلاح مخفی طراحان وب

مطالعه

• مزایا: تمام مزایای HSL رو داره و امکان تعیین شفافیت رو هم بهتون می‌ده.
• معایب: مثل RGBA، ممکنه توی مرورگرهای خیلی قدیمی پشتیبانی نشه.
• چه زمانی استفاده کنیم؟ وقتی به رنگ‌های نیمه‌شفاف با قابلیت تنظیم بر اساس فام، اشباع و روشنایی نیاز داری.

7️⃣ استفاده از رنگ ترکیبی (Gradient)

تا اینجا فقط با رنگ‌های ثابت آشنا شدیم، اما CSS یه قابلیت خیلی باحال دیگه هم داره به اسم Gradient (گرادیان) که بهمون اجازه می‌ده چند تا رنگ رو با هم ترکیب کنیم و یه افکت تدریجی و جذاب ایجاد کنیم. دو نوع گرادیان اصلی توی CSS داریم:

• Linear Gradient (گرادیان خطی): رنگ‌ها به صورت خطی از یه نقطه شروع به یه نقطه پایان تغییر می‌کنن. می‌تونی جهت تغییر رنگ رو هم مشخص کنی (مثلاً از بالا به پایین، از چپ به راست یا به صورت مورب).
• Radial Gradient (گرادیان شعاعی): رنگ‌ها به صورت دایره‌ای از یه نقطه مرکزی به سمت بیرون تغییر می‌کنن.

مثال از Linear Gradient:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

در مثال بالا رنگ بکگراند از رنگ نارنجی روشن به نارجی تیره مایل به قرمز تغییر میکنه به صورت خطی و از چپ به راست.

مثال از Radial Gradient:

×

جلسه 19 آموزش CSS: جدول (Table) در CSS

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

این کد یک پس‌زمینه شعاعی دایره‌ای ایجاد می‌کنه که رنگ‌ها از مرکز به سمت بیرون تغییر میکنن. یعنی رنگ های مرکز آبی بسیار روشن (مایل به سفید) و بیرون آبی تیره خواهد بود.

مزایا و معایب استفاده از رنگ Gradient:

استفاده از رنگ ترکیبی Gradient:

• مزایا: برای ایجاد جلوه‌های بصری جذاب و پویا خیلی مناسبه. می‌تونی با ترکیب چند رنگ، پس‌زمینه‌های زیبا و چشم‌نواز ایجاد کنی.
• معایب: برای رنگ‌های ثابت و ساده نیازی به استفاده از گرادیان نیست و ممکنه کد رو پیچیده‌تر کنه.
• چه زمانی استفاده کنیم؟ وقتی می‌خوای یه تغییر تدریجی و جذاب بین چند رنگ رو توی پس‌زمینه یا عناصر دیگه ایجاد کنی.

نکات طلایی برای استفاده حرفه‌ ای از رنگ‌ ها ✨

• کنتراست رو جدی بگیر: مطمئن شو که بین رنگ متن و پس‌زمینه کنتراست کافی وجود داره تا کاربرها بتونن مطالب سایتت رو به راحتی بخونن. کنتراست پایین می‌تونه باعث خستگی چشم و تجربه کاربری بد بشه.
• از ابزارهای انتخاب رنگ کمک بگیر: کلی وبسایت و ابزار آنلاین هستن که بهت کمک می‌کنن پالت‌ رنگی هماهنگ و زیبا برای سایتت انتخاب کنی. حتماً ازشون استفاده کن!
• به هدف سایتت فکر کن: رنگ‌هایی که انتخاب می‌کنی باید با موضوع و حسی که می‌خوای سایتت منتقل کنه، همخونی داشته باشه. مثلاً برای یه سایت فروشگاهی ممکنه رنگ‌های شاد و جذاب مناسب باشه، در حالی که برای یه سایت خبری ممکنه رنگ‌های رسمی‌تر و جدی‌تر بهتر جواب بده.
• زیاد از رنگ‌های مختلف استفاده نکن: سعی کن تعداد رنگ‌های اصلی سایتت رو محدود نگه داری تا ظاهر سایتت شلوغ و گیج‌کننده نشه. معمولاً استفاده از 2-3 رنگ اصلی و چند تا رنگ مکمل کافیه.

جمع بندی

به طور خلاصه:

• برای سادگی و رنگ‌های اصلی: اسم رنگ‌ها
• برای دقت و استفاده رایج: کد هگزادسیمال
• برای کنترل مستقیم RGB: کد RGB
• برای شفافیت: کد RGBA یا HSLA
• برای درک بصری و ایجاد تنوع رنگی آسان: کد HSL
• برای جلوه‌های ویژه و ترکیب رنگ‌ها: Gradient

در نهایت، انتخاب بهترین روش بستگی به سلیقه شخصی تو، نیازهای پروژه و ابزارهایی که ازشون استفاده می‌کنی داره. مهم اینه که با همه این روش‌ها آشنا باشی تا بتونی در هر موقعیتی بهترین انتخاب رو انجام بدی! 😉🎨

×

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

مرسی که تا پایان این جلسه آموزشی با من همراه بودی امیدوارم این آموزش هم برات مفید و کاربردی باشه تا یه جلسه و یه آموزش خاص دیگه تو رو به خدای بزرگ میسپارمت فعلن 🙂

×

جلسه 22 آموزش CSS: شبه عناصر (pseudo elements) در CSS

مطالعه