box-shadow چیست؟
ویژگی box-shadow در CSS به عناصر سایه می‌دهد؛ از سایه‌ی ظریف زیر یک کارت تا حس عمق در دکمه‌ها، مودال‌ها و منوهای کشویی. سایه‌ی خوب بدون اینکه دیده شود، به کاربر می‌فهماند کدام بخش بالاتر است و کدام قابل کلیک.
ساختار box-shadow
box-shadow: [inset] <x> <y> <blur> <spread> <color>;
/* مثال */
box-shadow: 0 8px 24px -4px rgba(16, 24, 40, 0.18);| مقدار | کار |
|---|---|
| x | جابه‌جایی افقی؛ عدد منفی سایه را به چپ می‌برد |
| y | جابه‌جایی عمودی؛ مثبت یعنی سایه پایین عنصر (نور از بالا) |
| blur | میزان محو شدن لبه‌ی سایه؛ عدد بیشتر یعنی سایه‌ی نرم‌تر |
| spread | بزرگ یا کوچک کردن سایه؛ منفی برای سایه‌های جمع‌وجور و طبیعی |
| color | رنگ سایه؛ بهتر است با شفافیت (rgba) باشد |
| inset | سایه را به داخل عنصر می‌برد؛ برای فیلدهای فرم و حالت فشرده‌ی دکمه |
راز سایه‌ی نرم و طبیعی؛ سایه‌ی لایه‌ای
سایه‌های واقعی یکدست نیستند: نزدیک جسم تیره و تیز و دورتر کم‌رنگ و محو. یک سایه‌ی CSS این را نشان نمی‌دهد، ولی چند سایه‌ی کم‌رنگ روی هم دقیقاً همین حس را می‌سازد:
box-shadow:
0 1px 2px rgba(16, 24, 40, 0.06),
0 4px 8px rgba(16, 24, 40, 0.06),
0 12px 24px rgba(16, 24, 40, 0.08),
0 24px 48px rgba(16, 24, 40, 0.08);چند نکته‌ی دیگر برای سایه‌ی حرفه‌ای:
- به‌جای سیاه خالص، از رنگ تیره‌ی مایل به رنگ برند یا پس‌زمینه استفاده کن.
- جهت نور را در کل سایت یکسان نگه دار؛ معمولاً y مثبت و x صفر.
- spread منفی کمک می‌کند سایه‌ی بزرگ از کناره‌ها بیرون نزند.
- در تم تاریک سایه کمتر دیده می‌شود؛ آنجا از حاشیه‌ی روشن یا پس‌زمینه‌ی روشن‌تر برای نشان دادن عمق کمک بگیر.
سایه در حالت hover
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
transform: translateY(-4px);
}از سایه‌ی فیگما تا کد
مقادیر Drop shadow در فیگما (X، Y، Blur، Spread و رنگ) یک‌به‌یک با box-shadow برابرند و می‌توانی مستقیم در این ابزار واردشان کنی. اگر کل طرح را داری و می‌خواهی سایه‌ها، گوشه‌ها و جزئیات دقیقاً مثل فیگما پیاده شوند، تبدیل فیگما به HTML را ببین. برای تبدیل اندازه‌ها هم مبدل px به rem به کارت می‌آید.