فلش‌کارت‌های آموزشی پیاده‌سازی Microinteractionهای رابط کاربری با CSS Transitions

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره پیاده‌سازی Microinteractionهای رابط کاربری با CSS Transitions

موضوع کلی: طراحی و پروتوتایپینگ

موضوع میانی: کاربرد میکرواینترکشن برای بهبود UX

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر میکرواینترکشن‌ها و اهمیت آن‌ها در UX
• 2. بررسی نمونه‌های موفق میکرواینترکشن در طراحی‌های مدرن
• 3. آشنایی با CSS Transitions: مبانی و مفاهیم کلیدی
• 4. ویژگی `transition-property` و تعیین خواص قابل انتقال
• 5. مقداردهی به `transition-duration` و کنترل سرعت انتقال
• 6. تابع `transition-timing-function`: کنترل شتاب و کاهش سرعت
• 7. انواع `transition-timing-function` و کاربردهای آن‌ها
• 8. استفاده از `transition-delay` برای ایجاد تاخیر در انتقال
• 9. میکرواینترکشن‌های hover با CSS Transitions
• 10. انتقال رنگ پس‌زمینه با hover
• 11. انتقال opacity با hover برای نمایش/پنهان کردن عناصر
• 12. انتقال scale با hover برای ایجاد افکت بزرگنمایی
• 13. انتقال transform با hover برای جابجایی عناصر
• 14. ایجاد انیمیشن‌های ساده با تغییر width و height
• 15. میکرواینترکشن‌های focus با CSS Transitions
• 16. تغییر حاشیه (border) با focus
• 17. انتقال box-shadow با focus
• 18. میکرواینترکشن‌های active با CSS Transitions
• 19. ایجاد افکت فشردن با انتقال transform در حالت active
• 20. انتقال رنگ متن با active
• 21. انتقال background-color با active
• 22. میکرواینترکشن‌های تغییر وضعیت (checked/unchecked)
• 23. انتقال scale برای دکمه‌های toggle
• 24. انتقال opacity برای checkbox ها
• 25. انتقال rotate برای آیکون‌ها هنگام تغییر وضعیت
• 26. انیمیشن‌های لودینگ ساده با CSS Transitions
• 27. ایجاد نوار پیشرفت (progress bar) با CSS Transitions
• 28. انتقال position برای نمایش پیام‌های موفقیت/خطا
• 29. میکرواینترکشن‌های اسکرول با CSS Transitions
• 30. افزودن انیمیشن به نوار اسکرول
• 31. انتقال opacity هنگام اسکرول
• 32. استفاده از `transition` به صورت shorthand
• 33. ترکیب Transitionها برای ایجاد افکت‌های پیچیده‌تر
• 34. بهینه‌سازی CSS Transitions برای بهبود عملکرد
• 35. تست و بررسی سازگاری Transitionها در مرورگرهای مختلف
• 36. حل مشکلات رایج در پیاده‌سازی CSS Transitions
• 37. استفاده از Transitionها در کنار دیگر ویژگی‌های CSS
• 38. ساخت یک میکرواینترکشن کامل: دکمه با افکت چندگانه
• 39. طراحی میکرواینترکشن برای فرم‌ها و فیلدهای ورودی
• 40. میکرواینترکشن‌های مربوط به منوها و لیست‌ها
• 41. انتقال position برای نمایش/پنهان کردن منو
• 42. انتقال opacity برای آیتم‌های لیست هنگام hover
• 43. میکرواینترکشن‌های مربوط به تصاویر
• 44. انتقال scale برای zoom کردن تصاویر
• 45. انتقال transform برای ایجاد افکت parallax
• 46. میکرواینترکشن‌های مربوط به آیکون‌ها
• 47. انتقال rotate برای چرخش آیکون‌ها
• 48. انتقال transform برای تغییر شکل آیکون‌ها
• 49. میکرواینترکشن‌های مربوط به کارت‌ها (cards)
• 50. انتقال box-shadow برای ایجاد افکت برجسته کردن کارت
• 51. انتقال transform برای flip کردن کارت
• 52. میکرواینترکشن‌های مربوط به نوار ابزار (toolbar)
• 53. انتقال position برای نمایش/پنهان کردن ابزارها
• 54. انتقال opacity برای آیکون‌های نوار ابزار هنگام hover
• 55. میکرواینترکشن‌های مربوط به دکمه‌های رادیویی
• 56. انتقال scale برای دکمه‌های رادیویی هنگام انتخاب
• 57. انتقال border-color برای دکمه‌های رادیویی هنگام انتخاب
• 58. میکرواینترکشن‌های مربوط به اسلایدرها
• 59. انتقال transform برای جابجایی اسلایدر
• 60. انتقال background-color برای نشان دادن مقدار انتخاب شده
• 61. میکرواینترکشن‌های مربوط به modal ها
• 62. انتقال opacity برای نمایش/پنهان کردن modal
• 63. انتقال transform برای scale up کردن modal
• 64. میکرواینترکشن‌های مربوط به اعلانات (notifications)
• 65. انتقال position برای نمایش اعلانات
• 66. انتقال opacity برای fade in/out اعلانات
• 67. میکرواینترکشن‌های مربوط به ابزارهای drag and drop
• 68. انتقال opacity برای نشان دادن محل قرارگیری آیتم
• 69. انتقال scale برای بزرگنمایی آیتم در حال drag
• 70. بهبود دسترسی‌پذیری (Accessibility) میکرواینترکشن‌ها
• 71. تست میکرواینترکشن‌ها با استفاده از ابزارهای توسعه مرورگر
• 72. میکرواینترکشن‌های پیشرفته با استفاده از CSS Variables
• 73. میکرواینترکشن‌های پیشرفته با استفاده از CSS Custom Properties