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

Shadow، Filter و Backdrop

Blur و Backdrop Filter

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

محتوای درس Blur و Backdrop Filter

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

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

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

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

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

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

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

index.html
<header class="sticky top-0 z-50 border-b border-white/10 bg-slate-950/75
  text-white backdrop-blur-xl">
  <div class="mx-auto max-w-7xl p-4">Navigation</div>
</header>

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

Header نیمه‌شفاف با Blur پس‌زمینه.

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

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

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

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

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