کتاب صوتی CSS for SVG Graphics

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

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

عنوان دوره: دوره CSS for SVG Graphics

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

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

• 1. مقدمه‌ای بر گرافیک SVG
• 2. چرا از SVG استفاده کنیم؟ مزایا و کاربردها
• 3. ساختار فایل SVG: ریشه و تگ‌های پایه
• 4. فضای نام SVG و HTML
• 5. مرورگرها و پشتیبانی از SVG
• 6. آشنایی با Viewport و viewBox در SVG
• 7. استفاده از SVG به صورت درون‌خطی (Inline SVG)
• 8. استفاده از SVG به عنوان شیء (Object, Embed, Iframe)
• 9. استفاده از SVG به عنوان تصویر (Img tag)
• 10. آشنایی با ابزارهای تولید و ویرایش SVG
• 11. مقدمه‌ای بر CSS: زبان استایل‌دهی
• 12. ساختار دستورات CSS: Selector, Property, Value
• 13. انواع Selectorها در CSS: Type, Class, ID
• 14. Selectorهای ترکیبی و گروهی
• 15. اعمال CSS به سه روش: Inline, Internal, External
• 16. سلسله مراتب CSS (Cascade) و اولویت‌ها
• 17. وراثت (Inheritance) در CSS
• 18. مفهوم Box Model در CSS (پیش‌زمینه برای SVG)
• 19. واحدهای اندازه‌گیری در CSS (px, em, rem, %, vw, vh)
• 20. معرفی DevTools برای بازرسی CSS
• 21. اعمال CSS به SVG: تفاوت‌ها و شباهت‌ها با HTML
• 22. Selectorهای SVG: انتخاب عناصر SVG با CSS
• 23. استایل‌دهی Inline به عناصر SVG
• 24. استفاده از Internal CSS (`<style>`) در SVG
• 25. استفاده از External CSS در SVG: لینک‌دهی
• 26. محدودیت‌ها و ملاحظات اعمال CSS به SVG
• 27. Specificity در CSS برای عناصر SVG
• 28. ارث‌بری در SVG و CSS
• 29. استفاده از کلاس‌ها و IDها در SVG
• 30. معرفی خصوصیات استایل‌دهی پیش‌فرض SVG
• 31. استایل‌دهی به `<rect>`: ساخت مستطیل و مربع
• 32. خصوصیات `x`, `y`, `width`, `height`, `rx`, `ry`
• 33. استایل‌دهی به `<circle>`: ساخت دایره
• 34. خصوصیات `cx`, `cy`, `r`
• 35. استایل‌دهی به `<ellipse>`: ساخت بیضی
• 36. خصوصیات `cx`, `cy`, `rx`, `ry`
• 37. استایل‌دهی به `<line>`: رسم خط
• 38. خصوصیات `x1`, `y1`, `x2`, `y2`
• 39. استایل‌دهی به `<polyline>`: رسم چندخطی
• 40. استایل‌دهی به `<polygon>`: رسم چندضلعی
• 41. خصوصیت `fill`: پر کردن شکل‌ها
• 42. استفاده از رنگ‌های Hex, RGB, HSL, Named Colors
• 43. خصوصیت `fill-opacity`: شفافیت پرکننده
• 44. خصوصیت `stroke`: رنگ خط دور شکل
• 45. خصوصیت `stroke-width`: ضخامت خط دور
• 46. خصوصیت `stroke-opacity`: شفافیت خط دور
• 47. خصوصیت `stroke-linecap`: شکل سر خط (butt, round, square)
• 48. خصوصیت `stroke-linejoin`: شکل گوشه‌های خط (miter, round, bevel)
• 49. خصوصیت `stroke-dasharray`: خط‌چین کردن خط
• 50. خصوصیت `stroke-dashoffset`: جابجایی الگوی خط‌چین
• 51. معرفی `<path>`: قدرتمندترین عنصر SVG
• 52. دستورات `M`, `L`, `H`, `V` در Path
• 53. دستورات `C`, `S`, `Q`, `T` برای منحنی‌ها
• 54. دستور `A` برای کمان‌ها
• 55. دستور `Z` برای بستن مسیر
• 56. استایل‌دهی به `<path>` با CSS
• 57. خصوصیت `fill-rule` برای مسیرهای پیچیده
• 58. خصوصیت `paint-order`: ترتیب رنگ‌آمیزی
• 59. خصوصیت `vector-effect`: مقیاس‌بندی خطوط (non-scaling-stroke)
• 60. گروه‌بندی عناصر با `<g>` و استایل‌دهی گروهی
• 61. اضافه کردن متن با `<text>` و `<tspan>`
• 62. خصوصیات `x`, `y`, `dx`, `dy`, `rotate` برای متن
• 63. استایل‌دهی فونت با CSS: `font-family`, `font-size`, `font-weight`
• 64. خصوصیت `text-anchor`: تراز افقی متن
• 65. خصوصیت `dominant-baseline`: تراز عمودی متن
• 66. معرفی Transform در SVG و CSS
• 67. تابع `translate()`: جابجایی عناصر
• 68. تابع `rotate()`: چرخش عناصر
• 69. تابع `scale()`: تغییر مقیاس عناصر
• 70. توابع `skewX()`, `skewY()` و `matrix()`: تحولات پیچیده‌تر
• 71. ایجاد گرادیان خطی با `<linearGradient>`
• 72. استایل‌دهی و استفاده از `stop` در گرادیان خطی
• 73. ایجاد گرادیان شعاعی با `<radialGradient>`
• 74. استایل‌دهی و استفاده از `stop` در گرادیان شعاعی
• 75. ایجاد الگوها با `<pattern>` و اعمال آن با CSS
• 76. آشنایی با Filters در SVG و CSS
• 77. فیلترهای از پیش تعریف شده CSS (blur, brightness, contrast و ...)
• 78. استفاده از عنصر `<filter>` در SVG
• 79. فیلترهای Primitives پایه: `feGaussianBlur`, `feDropShadow`
• 80. ساخت فیلترهای ترکیبی پیچیده
• 81. Clipping با `<clipPath>` برای برش اشکال
• 82. اعمال Clipping با خصوصیت `clip-path`
• 83. Masking با `<mask>` برای ایجاد شفافیت‌های پیچیده
• 84. اعمال Masking با خصوصیت `mask`
• 85. استایل‌دهی برای حالت‌های تعاملی: `hover`, `active`, `focus`
• 86. مقدمه‌ای بر CSS Transitions
• 87. استفاده از `transition-property`, `duration`, `timing-function`, `delay`
• 88. انیمیشن‌سازی خصوصیات SVG با CSS Transitions
• 89. مقدمه‌ای بر CSS Animations و `@keyframes`
• 90. انیمیشن‌سازی خصوصیات SVG با CSS Animations
• 91. Responsive SVG: استفاده از `viewBox` و `preserveAspectRatio`
• 92. استفاده از Media Queries برای SVG
• 93. مدیریت ابعاد SVG با CSS
• 94. دسترس‌پذیری (Accessibility) در SVG: استفاده از `<title>`, `<desc>`
• 95. استفاده از Role و Aria attributes برای SVG
• 96. بهینه‌سازی فایل‌های SVG: کاهش حجم
• 97. بهترین روش‌ها برای سازماندهی CSS در پروژه‌های SVG
• 98. مشکلات رایج و راه‌حل‌ها در CSS و SVG
• 99. ادغام SVG با JavaScript برای تعاملات پیشرفته
• 100. پروژه‌های عملی و منابع پیشرفته (جمع‌بندی دوره)