آموزش جامع جلوه‌های بصری CSS

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

• آشنایی با انواع جلوه‌های بصری در CSS
• یادگیری ایجاد سایه‌ها، گرادیان‌ها و افکت‌های متنی
• تسلط بر انیمیشن‌ها و ترنزیشن‌های CSS
• توانایی ایجاد افکت‌های پیشرفته مانند transform و filter

در CSS، جلوه‌های بصری (Visual Effects) به مجموعه تکنیک‌ها و ویژگی‌هایی گفته می‌شود که برای ایجاد تغییرات گرافیکی، انیمیشن‌ها، و افکت‌های جذاب در عناصر صفحه وب استفاده می‌شوند. این جلوه‌ها کمک می‌کنند تا رابط کاربری (UI) جذاب‌تر و تعاملی‌تر شود.

📌 سایه‌ها (Shadows)

سایه‌ها به عناصر عمق می‌دهند و می‌توانند برای دکمه‌ها، کارت‌ها و متن‌ها استفاده شوند:

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* افکت سایه */
}
.text {
  text-shadow: 2px 2px 4px #000;
}

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

• مقدار افقی: جابجایی سایه در محور X (مثبت = راست)
• مقدار عمودی: جابجایی سایه در محور Y (مثبت = پایین)
• بلوری: میزان محو شدن سایه
• رنگ: رنگ سایه (می‌تواند از rgba استفاده کند)

📌 گرادیان‌ها (Gradients)

گرادیان‌ها امکان ایجاد انتقال نرم بین رنگ‌ها را فراهم می‌کنند:

.linear-gradient {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.radial-gradient {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
}

انواع گرادیان‌ها:

• خطی (linear-gradient): انتقال رنگ در یک جهت خاص (به راست، چپ، بالا، پایین یا زاویه‌دار)
• شعاعی (radial-gradient): انتقال رنگ از مرکز به بیرون به صورت دایره‌ای یا بیضوی
• مخروطی (conic-gradient): انتقال رنگ به صورت چرخشی حول یک نقطه مرکزی

📌 ترنزیشن‌ها و انیمیشن‌ها

ترنزیشن‌ها تغییرات نرم بین حالت‌های مختلف را ایجاد می‌کنند:

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

انیمیشن‌های پیشرفته:

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.element {
  animation: fadeIn 2s;
}

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

• duration: مدت زمان انیمیشن (مثلاً 2s)
• timing-function: سرعت تغییر انیمیشن (ease, linear, ease-in-out)
• delay: تأخیر قبل از شروع انیمیشن
• iteration-count: تعداد تکرار انیمیشن (infinite برای تکرار بی‌نهایت)

📌 فیلترها و blend modes

فیلترها افکت‌های بصری پیشرفته‌ای را اعمال می‌کنند:

.image {
  filter: grayscale(50%) blur(2px);
}
.blend {
  mix-blend-mode: multiply;
}

انواع فیلترها:

📌 تمرین عملی

دکمه‌ای با ویژگی‌های زیر ایجاد کنید:

• گرادیان پس‌زمینه از آبی به بنفش
• سایه با افقی 0، عمودی 4px، بلوری 6px و رنگ rgba(0,0,0,0.2)
• ترنزیشن 0.3s برای تغییرات hover
• در حالت hover سایه به 0 8px 12px تغییر کند و کمی بزرگتر شود

📌 قدم بعدی

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