آموزش جامع رنگ‌ها و پس‌زمینه در CSS

🎯 اهداف یادگیری

• آشنایی با روش‌های مختلف تعریف رنگ در CSS
• یادگیری استفاده از رنگ‌ها برای متن و پس‌زمینه
• کار با تصاویر پس‌زمینه و تنظیمات آن
• تکنیک‌های پیشرفته گرادینت و افکت‌های پس‌زمینه

📌 روش‌های تعریف رنگ در CSS

در CSS روش‌های مختلفی برای تعریف رنگ وجود دارد:

.box {
  color: red; /* نام رنگ */
  background-color: #ff0000; /* هگزادسیمال */
  border-color: rgb(255, 0, 0); /* RGB */
  outline-color: rgba(255, 0, 0, 0.5); /* RGB با شفافیت */
  box-shadow: 0 0 10px hsl(0, 100%, 50%); /* HSL */
}

انواع روش‌های تعریف رنگ:

• نام رنگ: مانند red, blue, green (فقط 140 رنگ نامگذاری شده)
  red

  Orange

  DodgerBlue

  green

  Gray

  SlateBlue

  Violet

  LightGray
• هگزادسیمال: مثل #ff0000 یا #f00 (مختصر شده)
  #0ff500

  #0ab000

  #0000ff

  #ccc

  #012fec

  #00ffe1

  f200ff#

  #3dd123
• RGB/RGBA: مقدار قرمز، سبز، آبی و شفافیت (0-255)
  rgb(255, 0, 0)

  rgb(0, 255, 0)

  rgb(0, 0, 255)

  rgb(50, 50, 50)

  rgb(68, 87, 85)

  rgb(4, 137, 5)

  rgb(186, 183, 9)

  rgb(0, 80, 10)
• HSL/HSLA: رنگ (Hue)، اشباع (Saturation)، روشنی (Lightness)
  hsl(0, 90%, 50%)

  hsl(0, 75%, 50%)

  hsl(0, 50%, 50%)

  hsl(0, 20%, 50%)

📌 تغییر میزان شفافیت با rgba و hsla

این روش دقیقا مانند روش rgb و hsl می باشد با این تفاوت که می توان میزان شفافیت یک رنگ را به صورت زیر مشخص کرد:

 rgba(37, 42, 55 , a )

 hsla(37, 42%, 55% , a )

که در آن پارامتر a عددی است که بین 0.0 و 1.0 تغییر می کند و هرچه این پارامتر به عدد 0.0 نزدیک تر شود کم رنگ تر خواهد شد.

📌 ویژگی‌های رنگ و پس‌زمینه

.element {
  color: #333; /* رنگ متن */
  background-color: #f8f8f8; /* رنگ پس‌زمینه */
  opacity: 0.8; /* شفافیت عنصر (0-1) */
  background-image: url('image.jpg'); /* تصویر پس‌زمینه */
  background-repeat: no-repeat; /* تکرار نشود */
  background-position: center; /* موقعیت تصویر */
  background-size: cover; /* پوشش کامل فضای موجود */
}

ویژگی‌های مهم:

• رنگ متن: با ویژگی color تنظیم می‌شود
• رنگ پس‌زمینه: با background-color یا background قابل تنظیم است
• تصویر پس‌زمینه: با background-image و تنظیمات مرتبط
• گرادینت: می‌تواند به عنوان پس‌زمینه استفاده شود

📌 گرادینت‌ها در CSS

گرادینت‌ها تغییر تدریجی بین دو یا چند رنگ هستند:

.gradient-box {
  /* گرادینت خطی */
  background: linear-gradient(to right, #ff0000, #0000ff);
  /* گرادینت دایره‌ای */
  background: radial-gradient(circle, #ff0000, #0000ff);
  /* گرادینت با زاویه و چند رنگ */
  background: linear-gradient(45deg, red, yellow, green);
  /* گرادینت با شفافیت */
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
}

انواع گرادینت:

• خطی (Linear): تغییر رنگ در یک جهت خاص
• دایره‌ای (Radial): تغییر رنگ از مرکز به بیرون
• مخروطی (Conic): تغییر رنگ در جهت چرخش
• تکرارشونده (Repeating): تکرار الگوی گرادینت

📌 تصاویر پس‌زمینه

تنظیمات پیشرفته برای تصاویر پس‌زمینه:

.hero-section {
  background-image: url('hero.jpg');
  background-size: cover; /* پوشش کامل */
  background-position: center center; /* وسط چین */
  background-repeat: no-repeat; /* بدون تکرار */
  background-attachment: fixed; /* ثابت هنگام اسکرول */
  background-blend-mode: overlay; /* ترکیب با رنگ پس‌زمینه */
}

ویژگی‌های کلیدی:

• background-size: تعیین اندازه تصویر (cover, contain, مقادیر دقیق)
• background-position: موقعیت تصویر (top, bottom, left, right, center)
• background-attachment: ثابت یا متحرک بودن هنگام اسکرول
• background-blend-mode: نحوه ترکیب با رنگ پس‌زمینه

📌 چند پس‌زمینه

می‌توان چندین پس‌زمینه را برای یک عنصر تعریف کرد:

.multi-bg {
  background:
    url('pattern.png'), /* تصویر الگو */
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8)), /* گرادینت شفاف */
    url('main-image.jpg'); /* تصویر اصلی */
  background-size:
    auto, /* اندازه الگو */
    cover, /* اندازه گرادینت */
    cover; /* اندازه تصویر اصلی */
  background-position:
    top left, /* موقعیت الگو */
    center, /* موقعیت گرادینت */
    center; /* موقعیت تصویر اصلی */
  background-repeat:
    repeat, /* تکرار الگو */
    no-repeat, /* گرادینت بدون تکرار */
    no-repeat; /* تصویر اصلی بدون تکرار */
}

ترتیب لایه‌ها:

• اولین پس‌زمینه: بالاترین لایه (روی بقیه نمایش داده می‌شود)
• آخرین پس‌زمینه: پایین‌ترین لایه (زیر بقیه قرار می‌گیرد)
• ترتیب تنظیمات: باید با ترتیب پس‌زمینه‌ها مطابقت داشته باشد

📌 متغیرهای CSS برای رنگ‌ها

متغیرهای CSS (که با نام متغیرهای سفارشی یا ویژگی‌های سفارشی نیز شناخته می‌شوند) به شما امکان می‌دهند مقادیری را تعریف کنید و سپس در سراسر stylesheet از آنها استفاده کنید. این ویژگی به خصوص برای مدیریت رنگ‌ها بسیار مفید است.

نحوه تعریف متغیرهای رنگ

متغیرهای CSS با پیشوند -- تعریف می‌شوند و معمولاً در کلاس root: قرار می‌گیرند تا به صورت سراسری قابل دسترسی باشند:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --background-color: #f8f9fa;
}

نحوه استفاده از متغیرهای رنگ

برای استفاده از متغیرهای تعریف شده، از تابع var() استفاده می‌کنیم:

body {
  background-color: var(--background-color);
  color: var(--text-color);
  direction: rtl; /* برای متن‌های فارسی */
  font-family: 'Vazir', 'Tanha', 'Iran Sans', sans-serif; /* فونت‌های بهینه برای فارسی */
}
.button {
  background-color: var(--primary-color);
  color: white;
}

مزایای استفاده از متغیرهای رنگ

1. قابلیت نگهداری آسان: تغییر رنگ‌ها در پروژه‌های بزرگ بسیار ساده می‌شود.
2. خوانایی بهتر: نام‌های معنادار برای رنگ‌ها کد را قابل فهم‌تر می‌کند.
3. ثبات طراحی: از یکپارچگی در استفاده از رنگ‌ها در سراسر پروژه اطمینان حاصل می‌کنید.

مثال کامل با رعایت نکات فارسی

:root {
  /* پالت رنگ اصلی */
  --primary: #4285f4;
  --primary-dark: #3367d6;
  --secondary: #34a853;
  --accent: #ea4335;
  
  /* رنگ‌های متن */
  --text-primary: #202124;
  --text-secondary: #5f6368;
  
  /* رنگ‌های پس‌زمینه */
  --bg-light: #f8f9fa;
  --bg-dark: #202124;
  
  /* سایه‌ها */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
}
body {
  font-family: 'Vazir', 'Iran Sans', sans-serif;
  direction: rtl;
  color: var(--text-primary);
  background-color: var(--bg-light);
  line-height: 1.8;
}
.navbar {
  background-color: var(--primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn {
  background-color: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
.btn:hover {
  background-color: var(--primary-dark);
}

>📌 تکنیک‌های پیشرفته در استفاده از ویژگی display در CSS

ویژگی display یکی از مهم‌ترین ویژگی‌های CSS است که نحوه نمایش و چیدمان عناصر در صفحه را تعیین می‌کند. در اینجا برخی تکنیک‌های پیشرفته برای مبتدیان توضیح داده می‌شود:

1. تفاوت بین block، inline و inline-block
   
   • display: block: عنصر کل عرض موجود را می‌گیرد و در خط جدید شروع می‌شود (مثل
     ،

     )

     css

     .box {
       display: block;
       width: 200px;
       height: 100px;
       background: blue;
     }

   • display: inline: عنصر فقط به اندازه محتوایش فضا می‌گیرد و در کنار عناصر دیگر قرار می‌گیرد (مثل ، )
     css

     .link {
       display: inline;
       padding: 5px;
       color: red;
     }

2. استفاده از display: none در مقابل visibility: hidden
   
3. 
   
4. 
   
5.