حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

پیش‌بینی box-shadow در CSS؛ سایه بیرونی بدون تغییر اندازه

اجزای قابل استفاده دوباره و فرم‌های CSS · 0٪

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

در مثال، سایه دو پیکسل پایین‌تر و شش پیکسل محو می‌شه. توی سؤال مقدار عمودی کمی بیشتره و باید جهت و اثرش بر اندازه چیدمان رو پیش‌بینی کنی. خطای رایج اینه که سایه رو بخشی از padding یا width حساب کنیم. سایه ممکنه بیرون جعبه دیده بشه، اما همسایه‌ها برای فضای سایه کنار نمی‌رن. برای همین سایه خیلی بزرگ می‌تونه روی بخش‌های کناری بیفته. اینجا از رنگ کاملاً مشخص استفاده می‌کنیم و به انیمیشن یا تغییر هنگام حرکت ماوس وابسته نیستیم؛ فقط ظاهر ثابت جعبه را می‌خوانیم.

✍️ مثال حل‌شده:

<div class="note">یادداشت</div>
<style>.note { width:180px; box-shadow:0 2px 6px gray; }</style>

حالا نوبت توئه: کارت .shadow دارای width:200px و box-shadow:0 4px 8px gray است و inset ندارد. کدام توصیف درست است؟ padding و border صفرند؛ عرض چیدمان را از بخش دیده‌شده سایه جدا حساب کن و جهت جابه‌جایی عمودی را از علامت عدد بخوان.

فعالیت شما

کارت .shadow دارای width:200px و box-shadow:0 4px 8px gray است و inset ندارد. کدام توصیف درست است؟ padding و border صفرند؛ عرض چیدمان را از بخش دیده‌شده سایه جدا حساب کن و جهت جابه‌جایی عمودی را از علامت عدد بخوان.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت وارد شوید

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

کد اولیهٔ فعالیت

<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head>
<body>
<div class="shadow">کارت سایه‌دار</div>
</body>
</html>

ظاهر صفحه (CSS)

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box}
.shadow{width:200px;padding:0;border:0;background:white;box-shadow:0 4px 8px gray}

گزینه‌های پیش‌بینی خروجی

  1. سایه بیرونی به پایین می‌رود و عرض چیدمان همچنان ۲۰۰ پیکسل است.
  2. سایه داخل جعبه است و عرض به ۲۰۸ پیکسل می‌رسد.
  3. سایه بیرونی به بالا می‌رود و عرض ۲۰۰ پیکسل است.