فصل ۵: تعامل و مدرنیته

حالت تیره و استایل‌های تعاملی

۱. تعامل با کاربر (Hover, Focus, Active)

در دنیای وب، المان‌ها نباید بی روح باشند. وقتی کاربر موس را روی دکمه‌ای می‌برد (**Hover**) یا روی فیلدی کلیک می‌کند (**Focus**)، باید واکنشی ببیند.

در تیلوند، این کار با اضافه کردن یک پیشوند قبل از کلاس انجام می‌شود:

پیشوندهای پرکاربرد:

hover: وقتی موس روی المان قرار می‌گیرد.
focus: وقتی روی یک فیلد یا دکمه کلیک می‌شود.
active: لحظه‌ای که دکمه را فشار می‌دهید.

مثال: class="bg-blue-500 hover:bg-blue-700" یعنی رنگ عادی آبی است، اما هنگام هاور پررنگ‌تر می‌شود.

۲. طراحی برای شب! (Dark Mode)

در گذشته برای ساخت حالت تیره باید صدها خط کد CSS اضافه می‌نوشتیم. در تیلوند کافیست از پیشوند dark: استفاده کنید.

سیستم به طور خودکار تنظیمات سیستم‌عامل کاربر (تیره یا روشن بودن) را تشخیص می‌دهد و استایل مربوطه را اعمال می‌کند.

class=”bg-white dark:bg-slate-900 text-black dark:text-white“

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

۳. نرم کردن تغییرات (Transitions)

برای اینکه تغییر رنگ هنگام هاور ناگهانی نباشد و به صورت نرم (انیمیشنی) انجام شود، از کلاس transition و duration استفاده می‌کنیم.

تمرین عملی: ساخت یک کارت کاملاً هوشمند

این کارت در حالت تیره تغییر ظاهر می‌دهد و هنگام هاور نرم بزرگ می‌شود:

<!– Interactive Dark-ready Card –>
<div class=”
  bg-white dark:bg-slate-800  // Responsive colors
  p-6 rounded-2xl shadow-lg 
  transition-all duration-300  // Smooth animation
  hover:scale-105 hover:shadow-2xl  // Zoom on hover
“>
  <h3 class=”text-slate-900 dark:text-white font-bold“>Interactive Card</h3>
  <button class=”mt-4 bg-sky-500 hover:bg-sky-600 active:scale-95 text-white px-4 py-2 rounded-lg transition“>
    Click Me!
  </button>
</div>

تحلیل کلاس‌های جدید:
1. hover:scale-105: هنگام هاور، کارت ۵ درصد بزرگتر می‌شود.
2. active:scale-95: لحظه کلیک، کارت کمی کوچک می‌شود (حس فشرده شدن دکمه).
3. duration-300: سرعت انیمیشن را روی ۳۰۰ میلی‌ثانیه تنظیم می‌کند.

درس قبلی

بازگشت به دوره

درس بعدی