فلش‌کارت‌های آموزشی ایجاد افکت‌های بصری خلاقانه در طراحی وب با CSS

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

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

عنوان دوره: دوره ایجاد افکت‌های بصری خلاقانه در طراحی وب با CSS

موضوع کلی: طراحی و توسعه وب

موضوع میانی: تکنیک‌های پیشرفته CSS

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

• 1. مقدمه‌ای بر طراحی وب خلاقانه
• 2. مبانی CSS برای افکت‌های بصری
• 3. آشنایی با خواص CSS برای انیمیشن
• 4. مفهوم Transform در CSS
• 5. کاربرد Transform برای ایجاد افکت‌های هندسی
• 6. مفهوم Transition در CSS
• 7. تنظیم زمان‌بندی و شتاب در Transition
• 8. ایجاد افکت‌های هاور (Hover) با Transition
• 9. کاربرد Pseudo-classes در افکت‌های بصری
• 10. Pseudo-elements برای دستکاری عناصر
• 11. ایجاد افکت‌های سایه (Box-shadow)
• 12. تنظیمات پیشرفته Box-shadow
• 13. ایجاد افکت‌های حاشیه (Border)
• 14. استفاده از Border-radius برای گوشه‌های گرد
• 15. تکنیک‌های برش گوشه با CSS
• 16. پیاده‌سازی افکت برش گوشه در تصاویر
• 17. تنظیمات دقیق برش گوشه
• 18. کاربرد Clip-path برای اشکال سفارشی
• 19. ایجاد اشکال هندسی پیچیده با Clip-path
• 20. استفاده از Masking برای افکت‌های تصویری
• 21. تکنیک‌های Masking با تصاویر و گرادینت‌ها
• 22. ایجاد افکت‌های نورپردازی با CSS
• 23. شبیه‌سازی درخشش با Box-shadow و Pseudo-elements
• 24. مفهوم Animation در CSS
• 25. ساخت Keyframes برای انیمیشن‌های سفارشی
• 26. تنظیمات پیشرفته Animation
• 27. چرخش عناصر با Animation
• 28. تغییر مقیاس عناصر با Animation
• 29. تغییر موقعیت عناصر با Animation
• 30. ترکیب Transform و Animation
• 31. ایجاد افکت‌های پارالاکس (Parallax) با CSS
• 32. تکنیک‌های ایجاد افکت پارالاکس با Scroll
• 33. استفاده از Background-attachment در پارالاکس
• 34. ایجاد افکت‌های اسکرول‌باری سفارشی
• 35. تکنیک‌های نمایش محتوا با اسکرول
• 36. افکت‌های انتقال (Transitions) بین صفحات
• 37. استفاده از Viewport Units برای طراحی واکنش‌گرا
• 38. مفهوم Flexbox برای چیدمان انعطاف‌پذیر
• 39. کاربرد Flexbox در ایجاد افکت‌های بصری
• 40. مفهوم Grid برای چیدمان شبکه‌ای
• 41. کاربرد Grid در طراحی‌های پیچیده
• 42. استفاده از Filters در CSS برای تصاویر
• 43. تنظیمات Grayscale، Sepia، Hue-rotate
• 44. ایجاد افکت‌های Blur و Brightness
• 45. کاربرد Blend Modes برای ترکیب عناصر
• 46. ترکیب تصاویر با Blend Modes
• 47. ایجاد افکت‌های متنی خلاقانه
• 48. انیمیشن متن با CSS
• 49. کاربرد `text-shadow` برای افکت‌های متنی
• 50. ایجاد افکت‌های سه بعدی با CSS
• 51. تکنیک‌های `transform-style: preserve-3d`
• 52. ایجاد مکعب‌های سه بعدی با CSS
• 53. چرخش مکعب سه بعدی
• 54. افکت‌های کتاب ورق‌زن با CSS
• 55. پیاده‌سازی افکت‌های اسلاید با CSS
• 56. استفاده از `overflow` برای افکت‌های مخفی
• 57. ایجاد افکت‌های شناور (Floating)
• 58. انیمیشن عناصر شناور
• 59. طراحی دکمه‌های تعاملی خلاقانه
• 60. افکت‌های هاور روی دکمه‌ها
• 61. تکنیک‌های ایجاد دکمه‌های برجسته
• 62. استفاده از SVG در طراحی وب
• 63. ادغام SVG با CSS برای افکت‌های پویا
• 64. انیمیشن SVG با CSS
• 65. طراحی آیکون‌های متحرک با SVG و CSS
• 66. ایجاد افکت‌های ورود (Enter) عناصر
• 67. انیمیشن عناصر هنگام اسکرول
• 68. استفاده از Intersection Observer API
• 69. کاربرد `will-change` برای بهینه‌سازی عملکرد
• 70. تکنیک‌های بهینه‌سازی انیمیشن‌های CSS
• 71. مدیریت انیمیشن‌ها با JavaScript (اشاره)
• 72. ایجاد افکت‌های تصویری با CSS Variables
• 73. استفاده از CSS Custom Properties
• 74. تغییر دینامیک افکت‌ها با CSS Variables
• 75. طراحی افکت‌های گرید تصویری
• 76. استفاده از `object-fit` برای تصاویر در گرید
• 77. ایجاد افکت‌های کارت (Card) تعاملی
• 78. انیمیشن پس‌زمینه با گرادینت‌های متحرک
• 79. تکنیک‌های ایجاد گرادینت‌های پویا
• 80. استفاده از `background-clip` برای افکت‌های متنی
• 81. ایجاد افکت‌های شیشه‌ای (Glassmorphism)
• 82. تنظیمات `backdrop-filter` برای Glassmorphism
• 83. کاربرد `box-decoration-break`
• 84. ایجاد افکت‌های ذرات (Particles) با CSS (اشاره)
• 85. طراحی فوترهای خلاقانه با افکت‌های بصری
• 86. ایجاد هدرهای جذاب با انیمیشن
• 87. استفاده از `clip-path` برای ماسک کردن ویدئو
• 88. افکت‌های ویدیویی با CSS
• 89. کاربرد `filter: drop-shadow()`
• 90. ایجاد افکت‌های براق (Glow)
• 91. تکنیک‌های ایجاد افکت‌های موجی
• 92. استفاده از `animation-delay` برای هماهنگ‌سازی
• 93. طراحی عناصر با `outline` سفارشی
• 94. ایجاد افکت‌های اسکرول‌باری پیشرفته
• 95. استفاده از `scroll-behavior: smooth`
• 96. کاربرد `::marker` برای لیست‌ها
• 97. طراحی افکت‌های نشانه‌گذاری سفارشی
• 98. ایجاد افکت‌های نواری (Ribbon)
• 99. تکنیک‌های ایجاد افکت‌های پله‌ای
• 100. استفاده از `transform` برای زاویه‌سازی