فلش‌کارت‌های آموزشی جادوی رترو: خلق جلوه‌های نوستالژیک با DIV در CSS

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

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

عنوان دوره: دوره جادوی رترو: خلق جلوه‌های نوستالژیک با DIV در CSS

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

موضوع میانی: تکنیک‌های بصری و جلوه‌های ویژه در طراحی وب

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

• 1. مقدمه‌ای بر طراحی رترو و الهام‌گیری از دوره‌های گذشته
• 2. بررسی عناصر اصلی سبک‌های رترو (۸۰، ۹۰ میلادی و غیره)
• 3. پایه ریزی: تنظیم محیط توسعه برای جلوه‌های رترو
• 4. آشنایی با ساختار HTML و DIV برای طراحی رترو
• 5. CSS Reset و Normalization برای سازگاری مرورگرها
• 6. ایجاد بافت‌های (Texture) رترو با استفاده از CSS
• 7. استفاده از گرادیانت‌ها برای ایجاد جلوه‌های قدیمی
• 8. طراحی دکمه‌های رترو با CSS
• 9. طراحی فرم‌های رترو با CSS
• 10. ایجاد جلوه‌های نوری و سایه‌های رترو
• 11. استفاده از فونت‌های رترو و انتخاب مناسب آن‌ها
• 12. طراحی آیکون‌های رترو با CSS
• 13. انیمیشن‌های CSS برای ایجاد حس پویایی رترو
• 14. ایجاد جلوه‌های Glitch با CSS
• 15. پیاده‌سازی جلوه‌های VHS با CSS
• 16. شبیه‌سازی CRT (Cathode Ray Tube) با CSS
• 17. ایجاد جلوه‌های اسکن‌لاین (Scanlines) با CSS
• 18. طراحی رابط کاربری رترو با DIV و CSS
• 19. استفاده از تصاویر پس‌زمینه رترو و الگوها
• 20. بهینه‌سازی تصاویر برای طراحی رترو
• 21. ایجاد افکت‌های رنگی رترو (Sepia, Grayscale)
• 22. طراحی جعبه‌های متن رترو با CSS
• 23. ایجاد افکت‌های پارالاکس رترو
• 24. استفاده از CSS Filters برای جلوه‌های رترو
• 25. طراحی منوهای رترو با CSS
• 26. ایجاد افکت‌های تایپوگرافی رترو
• 27. طراحی عناصر تعاملی رترو (Hover Effects)
• 28. ساخت یک گالری تصاویر رترو با CSS
• 29. طراحی یک صفحه لودینگ رترو
• 30. پیاده سازی جلوه‌های رترو در طراحی ریسپانسیو
• 31. استفاده از Preprocessors (Sass/Less) برای مدیریت CSS رترو
• 32. ترفندهایی برای کاهش حجم CSS در طراحی رترو
• 33. بهبود عملکرد (Performance) وب‌سایت‌های رترو
• 34. معرفی کتابخانه‌ها و فریم‌ورک‌های CSS برای طراحی رترو
• 35. ایجاد یک قالب کامل وب‌سایت رترو (پروژه عملی)
• 36. بهینه‌سازی برای موتورهای جستجو (SEO) در طراحی رترو
• 37. تست و اشکال‌زدایی (Debugging) کدهای CSS رترو
• 38. ایده‌پردازی و طراحی یک پوستر رترو با CSS
• 39. طراحی کارت ویزیت رترو با CSS
• 40. طراحی بنر تبلیغاتی رترو با CSS
• 41. ایجاد جلوه‌های خاص رترو با Blend Modes
• 42. استفاده از CSS Variables برای سفارشی‌سازی آسان‌تر
• 43. طراحی رابط کاربری بازی‌های رترو با CSS
• 44. پیاده‌سازی جلوه‌های صدا (Sound Effects) رترو (با JavaScript)
• 45. استفاده از JavaScript برای افزایش تعاملات رترو
• 46. آشنایی با ابزارهای آنلاین برای ایجاد تصاویر و الگوهای رترو
• 47. منابع الهام‌بخش برای طراحی رترو