افکت سایه متغیر با CSS

افکت سایه متغیر با CSS یکی از روش‌های محبوب برای افزایش عمق، واقع‌گرایی و تعامل در رابط‌های وب است. با استفاده از CSS custom properties (متغیرهای CSS) می‌توانیم پارامترهای سایه مانند جابجایی، بلور، پخش و رنگ را به‌صورت پویا کنترل کنیم و افکت‌های پیچیده‌ و قابل انیمیشن بسازیم. در این مقاله به مفاهیم پایه، نمونه‌های عملی، نکات بهینه‌سازی و دسترس‌پذیری می‌پردازیم.

مفاهیم پایه: box-shadow، text-shadow و متغیرها

دو خاصیت اصلی برای سایه در CSS عبارتند از box-shadow و text-shadow. با ترکیب اینها همراه با --custom variables می‌توان سایه‌ها را قابل تنظیم و انیمیشن‌پذیر کرد.

نمونه ساده با CSS variables

/* English code */:root{
  --shadow-x: 8px;
  --shadow-y: 8px;
  --shadow-blur: 16px;
  --shadow-spread: 0px;
  --shadow-color: rgba(0,0,0,0.25);
}

.card{
  width: 280px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
  transition: box-shadow 200ms ease;
}

.card:hover{
  --shadow-x: 16px;
  --shadow-y: 16px;
  --shadow-blur: 28px;
  --shadow-color: rgba(0,0,0,0.35);
}

توضیح: در این مثال، متغیرهای CSS در ریشه تعریف شده‌اند و در box-shadow استفاده می‌شوند. با هاور کردن روی کارت، مقادیر متغیرها تغییر می‌کنند و به‌واسطه‌ی transition سایه به‌صورت نرم انیمیشن می‌یابد. مزیت این روش این است که می‌توانید چند المنت را با همان مجموعه متغیرها کنترل کنید یا مقادیر را از طریق JS ویرایش کنید.

چند لایه سایه و ترکیب رنگ

/* English code */.card-multi{
  --c1: rgba(0,0,0,0.12);
  --c2: rgba(0,0,0,0.06);
  box-shadow:
    0 2px 4px 0 var(--c1),
    0 8px 16px -8px var(--c2);
}

توضیح: این مثال نشان می‌دهد چگونه از چند لایه سایه در یک عنصر استفاده کنیم. لایه‌ها با کاما جدا شده و هر لایه می‌تواند رنگ، جابجایی و بلور خاص خود را داشته باشد. استفاده از متغیرها باعث می‌شود تغییر کل گروهِ سایه‌ها ساده‌تر شود.

انیمیشن و انتقال نرم سایه

سایه‌ها معمولاً هنگام تغییر با transition یا @keyframes انیمیشنی نرم ایجاد می‌کنند. با این حال، برای عملکرد بهتر بهتر است از will-change یا روش‌های سبک‌تر استفاده کنیم.

/* English code */.card-anim{
  --sx: 6px; --sy: 6px; --sb: 12px;
  box-shadow: var(--sx) var(--sy) var(--sb) rgba(0,0,0,0.2);
  transition: transform 200ms ease, box-shadow 200ms ease;
  will-change: transform, box-shadow;
}

.card-anim:hover{
  transform: translateY(-6px);
  --sx: 18px; --sy: 18px; --sb: 30px;
}

توضیح: با ترکیب transform و تغییر متغیرهای سایه، جلوهٔ شناور به وجود می‌آید. استفاده از will-change به مرورگر کمک می‌کند تا رندر را بهینه کند. اما مراقب باشید استفادهٔ زیاد از will-change نیز می‌تواند حافظه را افزایش دهد.

سایه پویا با حرکت ماوس — پارالاکس سایه

برای ایجاد سایه‌ای که به حرکت اشاره‌گر کاربر پاسخ دهد (مثل نور پویا)، معمولاً باید از جاوااسکریپت برای بروز رسانی متغیرهای CSS استفاده کنیم.

/* English code - HTML & JS snippet */<!-- HTML -->
<div id="spot" class="spot">Hover me</div>
<!-- CSS -->
 :root { --mx: 0px; --my: 0px; --mb: 20px; --mc: rgba(0,0,0,0.25); } #spot{ width:200px;height:120px;background:#fff;border-radius:8px; box-shadow: var(--mx) var(--my) var(--mb) var(--mc); transition: box-shadow 60ms linear; }  const el = document.getElementById('spot'); el.addEventListener('mousemove', (e) => { const rect = el.getBoundingClientRect(); const x = (e.clientX - rect.left) - rect.width/2; const y = (e.clientY - rect.top) - rect.height/2; // scale down for subtle effect el.style.setProperty('--mx', `${x * 0.12}px`); el.style.setProperty('--my', `${y * 0.12}px`); }); el.addEventListener('mouseleave', () => { el.style.setProperty('--mx', `0px`); el.style.setProperty('--my', `0px`); });

توضیح: این کد یک عنصر را دنبال می‌کند و مقدارهای --mx و --my را بر اساس موقعیت ماوس تنظیم می‌کند تا سایه به سمت مخالف اشاره‌گر جابه‌جا شود و حس پارالاکس ایجاد شود. از transition با زمان کوتاه استفاده شده تا حرکت نرم باشد.

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

سایه‌های سنگین با بلور بالا می‌توانند در دستگاه‌های ضعیف بار پردازشی ایجاد کنند. چند نکته عملی:

• از filter: drop-shadow() برای تصاویر/آیتم‌های دارای شفافیت استفاده کنید؛ گاهی سریع‌تر است.
• برای انیمیشن‌های فراوان، انیمیشنِ transform را ترجیح دهید و سایه را با جابه‌جایی عنصر همراه کنید.
• از prefers-reduced-motion برای احترام به تنظیمات کاربر و کاهش انیمیشن‌ها استفاده کنید.

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

/* English code */@media (prefers-reduced-motion: reduce) {
  .card-anim{
    transition: none;
  }
}

توضیح: این رسانه‌کوئری باعث می‌شود اگر کاربر تنظیم کاهش حرکت را فعال کرده باشد، انتقال‌ها غیرفعال شوند که به دسترس‌پذیری و تجربه کاربری کمک می‌کند.

جدول خلاصه متغیرهای معمول برای سایه

نکات پیشرفته و موارد استفاده

• طراحی کارت‌ها و دکمه‌های قابل تعامل با سایه‌های قابل سفارشی‌سازی.
• ایجاد عمق بصری در لیست‌ها یا گریدها با تغییر تدریجی سایه‌ها.
• ترکیب با backdrop-filter و mix-blend-mode برای افکت‌های بصری جذاب‌تر.
• استفاده از سایه‌های چندلایه برای شبیه‌سازی نور محیط و ارتفاعات مختلف.

خلاصه و بهترین شیوه‌ها

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

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

ارسال