ساخت افکت محو نور با CSS

افکت محو نور یا Glow یکی از محبوب‌ترین جلوه‌های بصری در طراحی وب است. با CSS می‌توان نور نرم، نئون، یا هاله‌های پراکنده ایجاد کرد که ظاهر مدرن و جذابی به رابط کاربری می‌بخشد. در این مقاله به صورت عملی و مرحله‌به‌مرحله شیوه‌های مختلف ساخت افکت محو نور با تمرکز بر عملکرد، دسترس‌پذیری و بهینه‌سازی توضیح داده می‌شود.

مبانی فنی افکت محو نور

دو تکنیک اصلی برای ایجاد محو نور وجود دارد: سایه‌ها (box-shadow و text-shadow) و فیلترها (filter: blur) همراه با گرادیانت‌های شعاعی (radial-gradient). هر کدام مزایا و محدودیت‌هایی دارند که براساس هدف و عملکرد باید انتخاب شوند.

• text-shadow: مناسب برای درخشش متن
• box-shadow: مناسب برای عناصر بلاک و هاله‌های اطراف
• filter: blur و backdrop-filter: blur: مناسب برای محو کردن محتوا و ایجاد افکت‌های شیشه‌ای / نور پس‌زمینه
• pseudo-elements (::before, ::after): برای خلق لایه‌های نور جدا از خود عنصر و بهبود عملکرد

نمونه 1 — درخشش ساده متن

<h1 class="glow">Hello Glow</h1>

.glow {
  color: #fff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.8),
    0 0 20px rgba(0, 150, 255, 0.6),
    0 0 40px rgba(0, 150, 255, 0.35);
  background: #021024;
  display: inline-block;
  padding: 16px;
}

این کد از چندین text-shadow با اشعه‌ها و رنگ‌های مختلف استفاده می‌کند تا لایه‌های نور متفاوتی بسازد. اولین سایه نزدیک و پرنور است و سایه‌های بعدی بزرگتر و محوتر، که باعث عمق و هاله می‌شود. برای خوانایی، پس‌زمینه تیره قرار داده شده است.

نمونه 2 — نئون با pseudo-element برای بهینه‌سازی

<button class="neon">Click</button>

.neon {
  position: relative;
  color: #fff;
  background: #111;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  z-index: 1;
  overflow: visible;
}
.neon::before {
  content: "";
  position: absolute;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 30% 30%, rgba(0,200,255,0.6), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(255,0,150,0.4), transparent 35%);
  filter: blur(20px);
  z-index: -1;
  opacity: 0.9;
  pointer-events: none;
}

در این مثال نور‌ها با یک ::before جدا ایجاد شده‌اند تا برای مرورگر به عنوان لایه مستقل محاسبه شوند و از بازترسیم (repaint) مستقیم روی خود عنصر جلوگیری شود. استفاده از radial-gradient و filter: blur، هاله‌های نرم و رنگی تولید می‌کند.

بهینه‌سازی عملکرد و دسترس‌پذیری

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

• از pseudo-elements برای جدا کردن لایه‌های بلور استفاده کنید تا repaint کمتر شود.
• به جای مقادیر بسیار بزرگ blur در المان‌های متعدد، از یک لایه بزرگ‌تر و سبک‌تر استفاده کنید.
• برای کاربرانی که prefers-reduced-motion فعال دارند، انیمیشن‌ها و افکت‌های چشمک‌زن را غیرفعال کنید.
• استفاده از will-change را محدود و فقط برای عناصر ضروری اعمال کنید.

نمونه 3 — پس‌زمینه نور نرم با گرادیانت

.soft-light {
  position: relative;
  width: 100%;
  height: 300px;
  background: #05060a;
  overflow: hidden;
}
.soft-light::before {
  content: "";
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 20% 20%, rgba(255,200,100,0.25), transparent 20%),
              radial-gradient(circle at 80% 80%, rgba(100,150,255,0.18), transparent 25%);
  filter: blur(40px);
  pointer-events: none;
}

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

استفاده از backdrop-filter برای افکت‌های شیشه‌ای نور

.glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px;
  border-radius: 12px;
}

backdrop-filter محتوای پشت عنصر را محو و اشباع می‌کند؛ این برای افکت‌های شیشه‌ای یا هاله نور پشت عناصر عالی است. توجه داشته باشید که برخی مرورگرها نیاز به پیشوند -webkit- دارند و ممکن است در همه مرورگرها پشتیبانی نشود—پس بهتر است فallback ساده‌تری هم فراهم کنید.

Fallback و پشتیبانی مرورگر

برای مرورگرهایی که backdrop-filter پشتیبانی نمی‌کنند، از یک پس‌زمینه نیمه‌شفاف (rgba) یا یک تصویر بلور شده به عنوان جایگزین استفاده کنید. همیشه بررسی کنید که کنترست متن در حالت‌های مختلف تامین شود.

نمونه بهبود یافته با prefers-reduced-motion و will-change

.animated-glow {
  position: relative;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  will-change: box-shadow, transform;
}
@media (prefers-reduced-motion: reduce) {
  .animated-glow {
    transition: none;
    animation: none;
  }
}

در این نمونه از will-change برای بهبود روانی انیمیشن استفاده شده اما به یاد داشته باشید که will-change نیز می‌تواند حافظه اضافی مصرف کند؛ بنابراین تنها روی عناصر ضروری اعمال شود. بخش media query به کاربرانی که حرکت را کاهش داده‌اند احترام می‌گذارد.

توصیه‌های نهایی و نکات حرفه‌ای

• برای جلوه‌های رنگی، از رنگ‌های HSL استفاده کنید تا کنترل بهتری روی اشباع و روشنایی داشته باشید.
• ترکیب mix-blend-mode با گرادیانت‌ها می‌تواند افکت‌های متنوع‌تری بسازد، اما تست در مرورگرهای مختلف لازم است.
• در صورتی که افکت برای عناصر متحرک زیاد سنگین است، از تصاویر SVG یا PNG با فیلتر بلور از پیش رندر شده به عنوان fallback استفاده کنید.
• همیشه عملکرد را با DevTools و پروفایلینگ بررسی کنید—افکت زیبا نباید تجربه کاربری را کند کند.

با ترکیب درست سایه‌ها، گرادیانت‌ها و فیلترها می‌توانید طیف وسیعی از افکت‌های محو نور را بسازید؛ از نئون‌های تند تا هاله‌های نرم و شیشه‌ای. رعایت نکات دسترس‌پذیری و بهینه‌سازی عملکرد تضمین می‌کند که این جلوه‌ها در همه دستگاه‌ها تجربه‌ای مطلوب ایجاد کنند.

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

ارسال