ساخت افکت نور نقطه ای با CSS

افکت نور نقطه‌ای (point light) یکی از جلوه‌های بصری جذاب در طراحی وب است که می‌تواند به طراحی‌ها عمق، کنتراست و هویت بصری بیشتری بدهد. این افکت معمولاً شبیه یک منبع نور کوچک است که روی سطح می‌افتد و می‌تواند با حرکت، پالس یا ترکیب با blend mode رفتارهای طبیعی‌تری شبیه نور واقعی داشته باشد. در این مقاله روش‌های مختلف پیاده‌سازی افکت نور نقطه‌ای با CSS، نکات عملکردی و مثال‌های عملی را توضیح می‌دهیم.

روش‌های متداول

• radial-gradient به عنوان بک‌گراند
• pseudo-element (::before/::after) با blur و mix-blend-mode
• box-shadow یا multiple shadows برای هاله
• ترکیب CSS variables و انیمیشن برای دینامیک شدن افکت

۱. ساده با radial-gradient

.spot {
  width: 300px;
  height: 200px;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%),
              rgba(255,240,200,0.9) 0%,
              rgba(255,200,100,0.25) 20%,
              rgba(0,0,0,0) 60%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

این کد یک المان ساده با پس‌زمینه radial-gradient ایجاد می‌کند. با استفاده از CSS variableهای --x و --y می‌توانید موقعیت نور را از طریق CSS یا JavaScript تغییر دهید. این روش سبک و مناسب برای بک‌گراندهای ساده است و نیازی به عناصر اضافی ندارد.

۲. استفاده از pseudo-element و blur برای هاله نرم

.card {
  position: relative;
  width: 320px;
  height: 220px;
  background: #111;
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  left: var(--lx, 50%);
  top: var(--ly, 40%);
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,220,180,0.9), rgba(255,150,80,0.15) 40%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

در این پیاده‌سازی از یک pseudo-element استفاده شده تا هاله نور لایه‌ای جدا داشته باشد و بتوان آن را راحت‌تر کنترل کرد. mix-blend-mode: screen باعث ترکیب طبیعی‌تر با پس‌زمینه می‌شود. استفاده از filter: blur() هاله را نرم می‌کند. از pointer-events: none برای جلوگیری از تداخل با تعامل کاربر استفاده می‌کنیم.

۳. افزودن انیمیشن پالس

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
}

.card::after {
  animation: pulse 3s ease-in-out infinite;
}

انیمیشن پالس باعث می‌شود نور مثل یک منبع زنده نفس بکشد. استفاده از transform برای تغییر مقیاس بهتر از تغییر ابعاد مستقیم است چون بهره‌وری GPU را افزایش می‌دهد.

مثال کامل: نور دنبال‌کنندهٔ ماوس (CSS + JS)

.follow {
  position: relative;
  width: 100%;
  height: 60vh;
  background: linear-gradient(180deg,#0b0b0f,#101018);
  overflow: hidden;
}
.follow::before {
  content:"";
  position:absolute;
  left:var(--mx,50%);
  top:var(--my,50%);
  transform:translate(-50%,-50%);
  width:280px;height:280px;
  background:radial-gradient(circle, rgba(255,235,180,0.95) 0%, rgba(255,160,60,0.2) 25%, transparent 60%);
  filter:blur(24px);
  mix-blend-mode:screen;
  pointer-events:none;
  transition: left 0.08s linear, top 0.08s linear;
}

در این سناریو با بروزرسانی CSS variables --mx و --my (مثلاً با JavaScript) می‌توان نور را همگام با نشانگر حرکت داد. استفاده از transition لطافت حرکت را افزایش می‌دهد. این مثال بر پایه CSS نوشته شده؛ خودِ JavaScript وظیفه تغییر مقدار متغیرها را دارد.

نکات عملکردی و دسترسی

• برای عملکرد بهتر از transform و opacity استفاده کنید تا از آلارم‌های reflow جلوگیری شود.
• فیلترهای سنگین (مثل blur با مقدار زیاد) روی صفحه‌های بزرگ می‌تواند هزینه‌بر باشد؛ محدود به عناصر کوچک و با will-change مناسب استفاده شود.
• برای موبایل رزولوشن و مصرف باتری را در نظر بگیرید؛ انیمیشن‌های پیوسته را غیرفعال یا ساده کنید.
• برای دسترسی، کنتراست خوانایی متن را بررسی کنید و مطمئن شوید نور، متن را نامرئی نمی‌کند.

مقایسه سریع: مزایا و معایب روش‌ها

پیشنهادات و بهترین شیوه‌ها

• از CSS variables برای پارامترهای نور استفاده کنید تا انعطاف‌پذیری افزایش یابد.
• در صورتی که نور حرکتی دارید، مقدار blur و اندازه را متناسب با دستگاه کاهش دهید.
• به جای ایجاد چندین عنصر DOM برای هاله‌های متعدد از layered gradients یا چندین pseudo-element استفاده کنید.
• اگر نیاز به تعامل واقعی دارید (مثل کلیک یا drag)، از pointer-events و aria attributes مناسب استفاده کنید.

جمع‌بندی

افکت نور نقطه‌ای با CSS می‌تواند تجربهٔ بصری صفحه را به طرز چشم‌گیری بهبود دهد. با انتخاب روش مناسب—radial-gradient برای سادگی، pseudo-element برای کنترل بیشتر—و رعایت نکات عملکردی، می‌توان افکت‌های زیبا و کارآمدی ساخت. استفاده از CSS variables و انیمیشن‌های مبتنی بر transform و opacity ترکیبی از زیبایی و عملکرد را فراهم می‌کند.

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

ارسال