سایه جعبه در CSS
تا اینجا یاد گرفتید چیدمان کی عوض شود. سایه جعبه دروازهٔ Effects & Motion است: عمق نرم زیر کارت، حس فرورفتگی داخل فیلد، یا کمی بلند شدن دکمه — همه با یک ویژگی به نام box-shadow، بدون اینکه اندازهٔ box model عوض شود.
اجزای سایه
📊 اجزای box-shadow یک‌نگاه
| جزء | کار روزمره |
|---|---|
offset-x / offset-y |
جای سایه نسبت به جعبه (مثبت = راست / پایین) |
blur-radius |
نرمی لبه — 0 تیز است؛ عدد بزرگ‌تر لبه‌ها را پخش می‌کند |
spread-radius |
اختیاری؛ قبل از محو، شکل سایه را کمی بزرگ یا کوچک می‌کند |
color |
معمولاً rgba(...) تا سایه نیمه‌شفاف بماند |
inset |
کلمهٔ اختیاری — سایه را داخل جعبه می‌کشد |
| چند لیست | سایه‌های جدا با ویرگول روی هم می‌نشینند (دور نرم + نزدیک تیزتر) |
به «ارتفاع» فکر کنید، نه به تزئین زیاد. یک لایهٔ نرم زیر کارت اغلب بهتر از سه حاشیهٔ پر سر و صداست.
ارتفاع بیرونی آرام
دستور رایج کارت: کمی آفست رو به پایین، محو متوسط، spread کم یا صفر، و مشکی (یا خاکستری) نیمه‌شفاف. سایه باید نور از بالا را القا کند — نه مستطیل سیاه چسبیده پشت جعبه.
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
offset-y مثبت سایه را زیر جعبه می‌اندازد. آلفا را پایین نگه دارید تا متن و همسایه‌ها خوانا بمانند.
inset — عمق داخل جعبه
با کلمهٔ inset سایه به داخل کشیده می‌شود. برای چاهک، دکمهٔ فشرده، یا فیلدی که باید کمی فرو رفته به نظر برسد مفید است.
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}
inset جایگزین border یا padding نیست — فقط حس نور داخل ناحیهٔ رنگ‌شده را عوض می‌کند.
سایه‌های لایه‌لایه
بیش از یک سایه را با ویرگول پشت‌سرهم بنویسید. یک لایهٔ دور و نرم به‌علاوهٔ لایه‌ای نزدیک‌تر و جمع‌وجور معمولاً ارتفاع طبیعی‌تری می‌دهد تا یک لکهٔ سنگین.
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}
ترتیب در لیست ترتیب رنگ‌آمیزی است؛ هر دو هنوز مال همان عنصرند. دو لایهٔ آرام بهتر از یک لکهٔ مات است.
ریست، رنگ تأکیدی، و تمرکز روی جعبه
با box-shadow: none حالت تخت برمی‌گردد. سایهٔ رنگی می‌تواند برند را حمایت کند — باز هم محو نرم و آلفای ملایم. یادتان باشد: حروف با text-shadow (جلسهٔ افکت متن)؛ جعبه‌ها با box-shadow.
.chip {
box-shadow: none;
}
.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}
خودتان امتحان کنید
- به یک کارت سفید یک سایهٔ بیرونی نرم بدهید (آفست x صفر، y کوچک، محو حدود ۱rem، آلفای پایین).
- به فیلد جستجو
insetاضافه کنید تا کمی فرورفته حس شود. - یک پنل را به استک دولایه (نزدیک + دور) ارتقا دهید.
- هر
box-shadowمشکی مات در فایل تمرین را باrgbaنرم کنید. - مطمئن شوید درخشش عنوان با
text-shadowاست، نهbox-shadow.
اشتباه‌های رایج
- سایهٔ مشکی کاملاً مات که مثل جعبهٔ دوم دیده می‌شود
- یکی دانستن blur و spread
- گذاشتن
box-shadowروی متن وقتی منظورتانtext-shadowبوده - سایه روی هر آیتم لیست و هر لینک تا صفحه مه‌آلود شود
- فراموش کردن
insetوقتی طراحی به حس فشرده یا توخالی نیاز دارد
جمع‌بندی
box-shadowیعنی آفست، محو، در صورت نیاز spread، رنگ، و در صورت نیازinset- سایهٔ بیرونی نیمه‌شفاف و نرم، ارتفاع آرام می‌سازد
- لایه‌ها را با ویرگول روی هم بگذارید؛ با
noneدوباره تخت شوید - جعبه ≠ حرف —
text-shadowرا برای متن نگه دارید - ادامهٔ Effects & Motion: Transitions
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود