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

افکت تابش نور یا “shine” یکی از محبوب‌ترین جلوه‌های بصری برای کارت‌ها و عناصر رابط کاربری است. این افکت حس متریال، عمق و حرفه‌ای بودن را به طراحی اضافه می‌کند بدون نیاز به تصاویر یا جاوااسکریپت. در این مقاله شیوه‌های متداول، نمونه‌های عملی و نکات بهینه‌سازی و دسترسی برای پیاده‌سازی افکت تابش نور روی کارت با CSS را بررسی می‌کنیم.

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

• استفاده از pseudo-element (مثل ::before یا ::after) با گرادیانت و تبدیل (transform).
• استفاده از mix-blend-mode یا filter برای هم‌آمیزی بهتر نور.
• انیمیشن با keyframes برای حرکت نور از چپ به راست یا به‌صورت نوسانی.
• استفاده از mask یا mask-image برای لبه‌های نرم و طبیعی.

مثال ساده و مفهومی

<!-- HTML -->
<div class="card">
  <h3>Product Name</h3>
  <p>Short description of the product or feature.</p>
</div>

/* CSS */.card{
  position: relative;
  overflow: hidden;
  width: 300px;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.card::before{
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.6) 50%,
              rgba(255,255,255,0) 100%);
  transform: rotate(25deg) translateX(-150%);
  transition: transform 0.8s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
  will-change: transform;
}

.card:hover::before{
  transform: rotate(25deg) translateX(300%);
}

توضیح: در این مثال از یک pseudo-element (::before) استفاده شده که گرادیانت سفیدی را به‌صورت باریک و مورب ایجاد می‌کند. با حرکت transform در حالت hover، بار تابش از چپ به راست عبور می‌کند. استفاده از transform به‌جای تغییر left/right باعث می‌شود تا انیمیشن با GPU اعمال و روان‌تر اجرا شود. همچنین pointer-events: none مانع تداخل با کلیک‌ها می‌شود.

نسخه حرفه‌ای‌تر با ماسک، بلور و تنظیم برای کاهش حرکت

<!-- HTML -->
<div class="card pro">
  <h3>Premium Card</h3>
  <p>Smoother shine with mask and reduced motion support.</p>
</div>

/* CSS */:root{
  --card-bg: linear-gradient(180deg,#0f172a,#020617);
  --shine-color: rgba(255,255,255,0.7);
  --shine-width: 18%;
}

.card.pro{
  position: relative;
  overflow: hidden;
  width: 340px;
  padding: 24px;
  border-radius: 14px;
  background: var(--card-bg);
  color: #e6eef8;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}

.card.pro::after{
  content: "";
  position: absolute;
  inset: -50% -30%;
  background: conic-gradient(from 120deg at 50% 50%,
              transparent 0 40%,
              rgba(255,255,255,0.85) 45% 55%,
              transparent 60% 100%);
  transform: translateX(-120%) rotate(10deg);
  filter: blur(14px);
  mix-blend-mode: screen;
  opacity: 0.95;
  pointer-events: none;
  will-change: transform, opacity;
  animation: shine-move 1.1s cubic-bezier(.2,.9,.2,1) infinite;
}

/* better performance: use transform animations */@keyframes shine-move{
  0% { transform: translateX(-120%) rotate(10deg); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translateX(120%) rotate(10deg); opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { transform: translateX(240%) rotate(10deg); opacity: 0; }
}

/* respect user's reduced motion preference */@media (prefers-reduced-motion: reduce){
  .card.pro::after{
    animation: none;
    opacity: 0.6;
  }
}

توضیح: در نسخه پیشرفته از ::after با conic-gradient استفاده شده که همراه با filter: blur و mix-blend-mode نمای واقعی‌تری از بازتاب نور ایجاد می‌کند. animation با keyframes بار تابش را از چپ به راست حرکت می‌دهد. اهمیت تنظیمات prefers-reduced-motion در اینجا مشخص است تا کاربران با حساسیت به حرکت، تجربه مناسبی داشته باشند.

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

• همیشه از transform و opacity برای انیمیشن استفاده کنید تا از jank جلوگیری شود (تغییرات layout پنچره مانع عملکرد GPU می‌شود).
• will-change را فقط در صورت نیاز و موقت استفاده کنید تا مصرف حافظه کاهش یابد.
• filter: blur می‌تواند هزینه‌بر باشد؛ اگر نیاز به بلور خیلی کم دارید، مقدار را کاهش دهید یا از تصاویر جایگزین استفاده کنید.
• برای چند کارت در یک لیست، انیمیشن پیوسته و همزمان ممکن است بار پردازشی بالایی داشته باشد — از stagger یا حذف انیمیشن غیرضروری استفاده کنید.
• برای عملکرد بهتر روی موبایل، از سایز کمتر برای عنصر shine استفاده کنید یا انیمیشن را کوتاه‌تر کنید.

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

افکت تابش ممکن است برای برخی کاربران آزاردهنده باشد (صدمه به افراد حساس به حرکت یا نور). رعایت موارد زیر مهم است:

• از prefers-reduced-motion برای غیرفعال کردن یا ساده‌سازی انیمیشن استفاده کنید.
• تضاد رنگ را بررسی کنید تا متن روی کارت خوانا بماند حتی هنگام تابش نور.
• اجازه ندهید نور پیام یا اطلاعات مهم را مخفی کند؛ تابش باید تزئینی باشد نه اطلاعاتی.

سازگاری مرورگر — نکات کلیدی

نتیجه‌گیری

افکت تابش نور روی کارت با CSS روشی قدرتمند و سبک برای افزایش جذابیت بصری است. با استفاده از pseudo-elementها، گرادیانت‌ها، transform و اصول دسترسی می‌توانید جلوه‌ای زیبا و بهینه بسازید. بهینه‌سازی عملکرد، رعایت prefers-reduced-motion و تست روی دستگاه‌های مختلف را فراموش نکنید تا تجربه کاربری همزمان زیبا و پایدار باشد.

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

ارسال