درس ۹: رنگ‌ها و پس‌زمینه

رنگ یکی از مهم‌ترین عناصر طراحی وب است که تأثیر عمیقی بر تجربه کاربری، احساسات و برداشت کاربران از سایت دارد. انتخاب رنگ‌های مناسب می‌تواند باعث افزایش تعامل، بهبود خوانایی و تقویت هویت برند شود.

نقش رنگ در طراحی:

• انتقال احساسات: هر رنگ احساس خاصی را منتقل می‌کند
• ایجاد سلسله‌مراتب: رنگ‌ها اهمیت عناصر را مشخص می‌کنند
• هدایت توجه: رنگ‌های برجسته توجه کاربر را جلب می‌کنند
• بهبود خوانایی: کنتراست مناسب خوانایی را افزایش می‌دهد
• هویت برند: رنگ‌ها شخصیت برند را منعکس می‌کنند

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

۱. نام‌های رنگ (Color Names):

CSS بیش از ۱۴۰ نام رنگ از پیش تعریف شده دارد:

color: red;
color: blue;
color: green;
color: orange;
color: purple;

۲. مقادیر هگزادسیمال (Hex):

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

color: #FF0000; /* قرمز */
color: #00FF00; /* سبز */
color: #0000FF; /* آبی */
color: #FFF;    /* سفید (کوتاه) */
color: #000;    /* سیاه (کوتاه) */

۳. RGB و RGBA:

تعریف رنگ با مقادیر قرمز، سبز و آبی:

color: rgb(255, 0, 0);        /* قرمز */
color: rgb(0, 255, 0);        /* سبز */
color: rgba(255, 0, 0, 0.5);  /* قرمز با شفافیت ۵۰٪ */

۴. HSL و HSLA:

تعریف رنگ با رنگ، اشباع و روشنایی:

color: hsl(0, 100%, 50%);     /* قرمز */
color: hsl(120, 100%, 50%);   /* سبز */
color: hsla(240, 100%, 50%, 0.7); /* آبی با شفافیت */

CSS ویژگی‌های مختلفی برای کنترل رنگ متن و عناصر ارائه می‌دهد.

ویژگی‌های اصلی:

• color: رنگ متن
• background-color: رنگ پس‌زمینه
• border-color: رنگ حاشیه
• outline-color: رنگ خط دور

مثال‌ها:

.text-primary {
  color: #007bff;
}

.text-success {
  color: #28a745;
}

.text-danger {
  color: #dc3545;
}

.text-warning {
  color: #ffc107;
}

در ادامه، مثالی از استفاده مختلف رنگ‌ها و پس‌زمینه را مشاهده می‌کنید. کد را ویرایش کرده و تأثیرات مختلف را ببینید:

CSS امکانات گسترده‌ای برای کنترل پس‌زمینه عناصر ارائه می‌دهد.

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

• background-color: رنگ پس‌زمینه
• background-image: تصویر پس‌زمینه
• background-repeat: تکرار تصویر
• background-position: موقعیت تصویر
• background-size: اندازه تصویر
• background-attachment: نحوه چسبیدن تصویر

مثال‌های background-repeat:

background-repeat: repeat;    /* تکرار در همه جهات */
background-repeat: repeat-x;  /* تکرار افقی */
background-repeat: repeat-y;  /* تکرار عمودی */
background-repeat: no-repeat; /* بدون تکرار */

مثال‌های background-position:

background-position: center;
background-position: top right;
background-position: 50% 25%;
background-position: 10px 20px;

مثال‌های background-size:

background-size: cover;    /* پوشش کامل */
background-size: contain;  /* نمایش کامل تصویر */
background-size: 100% 50%; /* اندازه دلخواه */

گرادیان‌ها انتقال نرم بین دو یا چند رنگ هستند که جلوه بصری زیبایی ایجاد می‌کنند.

گرادیان خطی (Linear Gradient):

/* گرادیان ساده */
background: linear-gradient(to right, red, blue);

/* گرادیان با زاویه */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

/* گرادیان چند رنگ */
background: linear-gradient(to bottom, 
  #ff6b6b 0%, 
  #4ecdc4 50%, 
  #45b7d1 100%);

/* گرادیان با نقاط توقف */
background: linear-gradient(90deg, 
  red 0%, 
  yellow 25%, 
  green 75%, 
  blue 100%);

گرادیان شعاعی (Radial Gradient):

/* گرادیان دایره‌ای */
background: radial-gradient(circle, red, blue);

/* گرادیان بیضوی */
background: radial-gradient(ellipse, #ff6b6b, #4ecdc4);

/* گرادیان با موقعیت مشخص */
background: radial-gradient(circle at top left, red, blue);

/* گرادیان با اندازه مشخص */
background: radial-gradient(circle 100px at center, red, blue);

گرادیان مخروطی (Conic Gradient):

/* گرادیان مخروطی ساده */
background: conic-gradient(red, yellow, green, blue, red);

/* گرادیان مخروطی با زاویه شروع */
background: conic-gradient(from 45deg, red, blue);

/* ایجاد رنگین‌کمان */
background: conic-gradient(
  red 0deg, 
  orange 60deg, 
  yellow 120deg, 
  green 180deg, 
  blue 240deg, 
  purple 300deg, 
  red 360deg
);

شفافیت ابزار قدرتمندی برای ایجاد جلوه‌های بصری و لایه‌بندی عناصر است.

روش‌های ایجاد شفافیت:

• opacity: شفافیت کل عنصر (۰ تا ۱)
• rgba(): شفافیت فقط برای رنگ
• hsla(): شفافیت در مدل HSL

مثال‌ها:

/* شفافیت کل عنصر */
.transparent-element {
  opacity: 0.5; /* ۵۰٪ شفافیت */
}

/* شفافیت فقط پس‌زمینه */
.transparent-bg {
  background-color: rgba(255, 0, 0, 0.3); /* قرمز با ۳۰٪ شفافیت */
  color: black; /* متن کاملاً مات */
}

/* شفافیت متدرج */
.fade-out {
  background: linear-gradient(
    to bottom, 
    rgba(0,0,0,1) 0%, 
    rgba(0,0,0,0) 100%
  );
}

تفاوت opacity و rgba:

• opacity: کل عنصر و فرزندانش شفاف می‌شوند
• rgba: فقط ویژگی مشخص (رنگ، پس‌زمینه) شفاف می‌شود

سایه‌ها عمق و بُعد سه‌بعدی به طراحی اضافه می‌کنند.

سایه متن (text-shadow):

/* سایه ساده */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

/* سایه چندگانه */
text-shadow: 
  1px 1px 2px red,
  2px 2px 4px blue,
  3px 3px 6px green;

/* سایه درخشان */
text-shadow: 0 0 10px #00ff00;

سایه جعبه (box-shadow):

/* سایه بیرونی */
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);

/* سایه درونی */
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);

/* سایه چندگانه */
box-shadow: 
  0 2px 4px rgba(0,0,0,0.1),
  0 8px 16px rgba(0,0,0,0.1);

/* سایه رنگی */
box-shadow: 0 0 20px #ff6b6b;

پارامترهای box-shadow:

• offset-x: جابجایی افقی
• offset-y: جابجایی عمودی
• blur-radius: میزان تاری
• spread-radius: گسترش سایه
• color: رنگ سایه
• inset: سایه درونی

متغیرهای CSS امکان تعریف و استفاده مجدد از مقادیر رنگ را فراهم می‌کنند.

تعریف متغیرها:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  --light-bg: #f8f9fa;
  --dark-bg: #343a40;
}

استفاده از متغیرها:

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.alert-success {
  background-color: var(--success-color);
  color: white;
}

/* متغیر با مقدار پیش‌فرض */
.custom-element {
  color: var(--custom-color, #333);
}

مزایای متغیرهای CSS:

• مدیریت آسان‌تر رنگ‌ها
• تغییر سریع تم
• کاهش تکرار کد
• پشتیبانی از تم تیره/روشن

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: پالت رنگی

پالت رنگی کاملی برای یک وب‌سایت ایجاد کنید که شامل رنگ‌های اصلی، فرعی و حالت‌های مختلف باشد.

تمرین ۲: کارت‌های گرادیان

مجموعه‌ای از کارت‌ها با گرادیان‌های مختلف و جذاب طراحی کنید.

تمرین ۳: گالری تصاویر

گالری تصاویری با افکت‌های hover و سایه‌های زیبا ایجاد کنید.

تمرین ۴: تم تیره/روشن

سیستم تم تیره و روشن با استفاده از متغیرهای CSS پیاده‌سازی کنید.

بهترین شیوه‌ها:

• از متغیرهای CSS برای مدیریت رنگ‌ها استفاده کنید
• کنتراست مناسب بین متن و پس‌زمینه ایجاد کنید
• از پالت رنگی محدود و هماهنگ استفاده کنید
• معنای فرهنگی رنگ‌ها را در نظر بگیرید
• برای دسترسی‌پذیری، فقط به رنگ تکیه نکنید

نکات دسترسی‌پذیری:

• نسبت کنتراست حداقل ۴.۵:۱ برای متن معمولی
• نسبت کنتراست حداقل ۳:۱ برای متن بزرگ
• عدم استفاده از رنگ به تنهایی برای انتقال اطلاعات
• در نظر گیری کوررنگی
• تست در حالت‌های مختلف نمایش

اشتباهات رایج:

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

در درس بعدی با Flexbox و Grid Layout در CSS آشنا خواهید شد.