فصل 15 از 27 درس 1 از 2

Shadow، Filter و Backdrop

Shadow و Depth

بخشی از آموزش جامع Tailwind CSS

محتوای درس Shadow و Depth

Shadow و Depth را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Shadow حس عمق می‌دهد و Filter یا Backdrop Filter برای جلوه‌های کنترل‌شده به کار می‌رود. Backdrop Blur تنها پشت عنصر نیمه‌شفاف دیده می‌شود و باید با Border یا رنگ جایگزین در مرورگرهای ضعیف همراه باشد.

روش پیاده‌سازی

  1. ابتدا سلسله‌مراتب Surfaceها را تعیین کنید.
  2. Shadow و Opacity را ملایم نگه دارید.
  3. برای Header شفاف، backdrop-blur را همراه پس‌زمینه نیمه‌شفاف استفاده کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="rounded-2xl bg-white p-6 shadow-xl shadow-slate-900/10">
  <h2 class="font-bold">پنل اصلی</h2>
</div>

خروجی مورد انتظار

پنل سفید با Shadow نرم.

نکات مهم و خطاهای رایج

  • Shadow شدید برای همه کارت‌ها سلسله‌مراتب را از بین می‌برد.
  • Blur زیاد هزینه Render و خوانایی را کاهش می‌دهد.

تمرین پیشنهادی

نمونه را روی پس‌زمینه روشن، تیره و تصویری آزمایش کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS