افکت گسترش نور روی تصویر با CSS

افکت گسترش نور (Glow / Light Spread) روی تصویر یکی از جلوه‌های بصری محبوب در طراحی وب است که می‌تواند توجه کاربر را به بخش‌های خاصی از صفحه جلب کند، حس عمق و لایه‌بندی ایجاد کند و ظاهر تصاویر را حرفه‌ای‌تر نشان دهد. با استفاده از CSS می‌توان این افکت را به شکل‌های مختلف — شامل سایه‌ها، گرادیانت‌های شعاعی، فیلترها و انیمیشن‌ها — پیاده‌سازی کرد. در ادامه روش‌های عملی، مثال‌های واقعی، نکات عملکردی و دسترسی را بررسی می‌کنیم.

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

• box-shadow و drop-shadow (سایه‌های ساده)
• پیوستگی با pseudo-element و radial-gradient (کنترل کامل و ترکیب رنگ)
• filter: blur یا drop-shadow برای تصاویر با شکل غیرمستطیلی
• انیمیشن با keyframes و استفاده از transform/opacity برای عملکرد بهتر
• ترکیب با mix-blend-mode و mask برای افکت‌های خلاقانه

1. مثال ساده: استفاده از box-shadow

<div class="card">
  <img src="product.jpg" alt="Product">
</div>

.card {
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
}
.card img {
  display: block;
  width: 300px;
  height: auto;
  box-shadow: 0 20px 60px rgba(0,150,255,0.18), 0 0 40px rgba(0,150,255,0.12);
  border-radius: 12px;
}

توضیح: در این مثال ساده، از دو سطح سایه استفاده شده است؛ یکی برای ایجاد عمق (offset و blur بزرگ) و دیگری برای ایجاد درخشش مستقیم (blur بدون offset بیشتر). این روش سریع و مناسب برای دکمه‌ها یا کارت‌های ساده است اما هنگام انیمیشن دادن به box-shadow هزینه پردازشی بالایی دارد.

2. افکت گسترش نور با pseudo-element و radial-gradient

<div class="glow-wrap">
  <img src="portrait.jpg" alt="Portrait">
</div>

.glow-wrap {
  position: relative;
  display: inline-block;
  border-radius: 16px;
  overflow: visible; /* glow may overflow */}
.glow-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1);
  width: 220%;
  height: 220%;
  background: radial-gradient(circle at center, rgba(255,200,50,0.35) 0%, rgba(255,200,50,0.12) 30%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.glow-wrap img {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 16px;
}

توضیح: این روش با استفاده از یک ::before که یک گرادیانت شعاعی دارد، نور را پشت یا جلوی تصویر شبیه‌سازی می‌کند. مزیت اصلی این روش کنترل رنگ، اندازه و ترکیب با mix-blend-mode است. از filter: blur برای نرم کردن لبه‌های نور استفاده شده.

3. افکت گسترش نور متحرک (عملکرد بهینه)

/* Naive approach: animating box-shadow (expensive) */.image-anim img {
  transition: box-shadow 0.6s ease;
}
.image-anim img:hover {
  box-shadow: 0 40px 120px rgba(0,200,255,0.25), 0 0 80px rgba(0,200,255,0.18);
}

/* Optimized: animate transform + opacity on pseudo-element */.image-anim {
  position: relative; overflow: visible;
}
.image-anim::after {
  content:"";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 40%, rgba(0,200,255,0.35), transparent 40%);
  filter: blur(18px);
  transform: scale(0.8);
  opacity: 0;
  transition: transform 400ms cubic-bezier(.2,.9,.3,1), opacity 400ms;
  pointer-events: none;
}
.image-anim:hover::after {
  transform: scale(1.1);
  opacity: 1;
  will-change: transform, opacity;
}

توضیح: نمونه اول نشان می‌دهد که انیمیت کردن box-shadow گران است و می‌تواند باعث افت فریم شود. نمونه بهینه از pseudo-element استفاده می‌کند و تنها transform و opacity را انیمیت می‌کند که توسط GPU رندر می‌شوند و هزینه کمتری دارند. دستور will-change به مرورگر اطلاع می‌دهد که این حالت ممکن است تغییر کند.

4. استفاده از filter: drop-shadow برای تصاویر غیرمستطیلی

.photo {
  filter: drop-shadow(0 24px 36px rgba(0,0,0,0.25)) drop-shadow(0 0 32px rgba(0,150,255,0.12));
}

توضیح: drop-shadow برخلاف box-shadow بر پایه شفافیت پیکسل‌های تصویر عمل می‌کند، بنابراین برای تصاویر با زمینه شفاف (PNG/SVG) مناسب‌تر است چون نور حول شکل واقعی تصویر پخش می‌شود.

مثال پیشرفته: پارامترپذیری با CSS Variables

/* CSS */:root {
  --glow-color: 0 200 255;
  --glow-alpha: 0.25;
  --glow-size: 220%;
}
.glow-var::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(var(--glow-color), var(--glow-alpha)) 0%, transparent 50%);
  width: var(--glow-size);
  height: var(--glow-size);
  filter: blur(24px);
}

توضیح: استفاده از متغیرهای CSS امکان تغییر سریع رنگ، اندازه و شفافیت نور را بدون تکرار کد فراهم می‌کند و برای تم‌ها یا دیتای داینامیک بسیار مفید است.

جدول مقایسه خواص و نکات عملکردی

نکات دسترسی و تجربه کاربری

• برای کاربرانی که کاهش حرکت را فعال کرده‌اند، انیمیشن‌های نور را غیرفعال یا ساده کنید: @media (prefers-reduced-motion: reduce).
• مطمئن شوید که رنگ نور با کنتراست متن و عناصر دیگر تداخلی ایجاد نمی‌کند.
• برای تصاویر حساس به عملکرد (لیست‌های طولانی، گالری‌ها) از متدهای GPU-friendly (transform/opacity) استفاده کنید.
• برای مرورگرهای قدیمی fallback مثل یک box-shadow ساده در نظر بگیرید.

موارد کاربرد واقعی

• قهرمان (Hero) صفحه با نور ملایم برای تاکید روی محصول
• گالری محصول با افکت hover برای جلب توجه خریدار
• ایجاد احساس عمق در کارت‌های UI و کارت‌های کاربری
• افکت‌های hover در دکمه‌ها و آیکون‌ها برای تاکید تعاملی

جمع‌بندی و پیشنهادات عملی

برای دستیابی به افکت گسترش نور روی تصویر با بهترین عملکرد و کنترل، استفاده از pseudo-element با radial-gradient و انیمیت transform/opacity بهترین انتخاب است. در مواقعی که نیاز به سایه دقیقی حول شکل تصویر دارید، از filter: drop-shadow استفاده کنید. همیشه موضوع عملکرد و دسترسی را در نظر بگیرید و برای انیمیشن‌های سنگین از will-change و prefers-reduced-motion استفاده کنید.

اگر نمونه‌ای از تصویر یا طرح مشخص دارید، می‌توانم یک قطعهٔ CSS سفارشی با پارامترهای رنگ، اندازه و انیمیشن متناسب با آن طراحی کنم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال