دوره آموزشی تصاویر در CSS
2 ساعت 11 دقیقهپیشرفته2025-04-29
مدرسین

Carrie Dils
Development, WordPress
جزئیات دوره
CSS فقط برای استایل دادن به متن و باکسها نیست! این دوره بهت یاد میده چطور با CSS تصاویر سایتت رو مثل یک طراح حرفهای دستکاری کنی و جلوههای بصری جذابی خلق کنی. از تغییر اندازه و موقعیت تصویر توی باکس گرفته تا ساخت شکلهای سفارشی با Clip Path و ماسکها.
توی این آموزش، مدرس "کری دیلز" بهت نشون میده چطور تصاویر رو توی شبکهها و کانتینرها به بهترین شکل قرار بدی، از افکتهای ترکیب رنگ و فیلترها استفاده کنی، و انیمیشنهایی بسازی که تجربه کاربری سایتت رو ارتقا بدن. همچنین یاد میگیری چطور تصاویر رو بهینه کنی تا سایتت سریعتر و واکنشگرا باشه و تو همه مرورگرها عالی نمایش داده بشه.
این دوره مخصوص توسعهدهندههای فرانتاند طراحی شده تا مهارتهایشون تو زمینه تصاویر با CSS کاملاً حرفهای بشه.
🎯 اهداف یادگیری:
تصاویر رو طوری تغییر بدی که دقیقاً توی کانتینر خودش جا بگیره و درست موقعیت بگیره.
با استفاده از Clip Path و ماسکها، شکلهای سفارشی و خلاقانه بسازی.
از فیلترها و blend modeها استفاده کنی تا ظاهر تصاویر رو تغییر بدی و افکتهای جالب ایجاد کنی.
با ترنزیشن، ترنسفورم و انیمیشن، تصاویرت رو متحرک و تعاملی کنی.
تصاویر سایتت رو بهینه و واکنشگرا کنی تا تو تمام مرورگرها و دستگاهها عملکرد خوبی داشته باشن.
توی این آموزش، مدرس "کری دیلز" بهت نشون میده چطور تصاویر رو توی شبکهها و کانتینرها به بهترین شکل قرار بدی، از افکتهای ترکیب رنگ و فیلترها استفاده کنی، و انیمیشنهایی بسازی که تجربه کاربری سایتت رو ارتقا بدن. همچنین یاد میگیری چطور تصاویر رو بهینه کنی تا سایتت سریعتر و واکنشگرا باشه و تو همه مرورگرها عالی نمایش داده بشه.
این دوره مخصوص توسعهدهندههای فرانتاند طراحی شده تا مهارتهایشون تو زمینه تصاویر با CSS کاملاً حرفهای بشه.
🎯 اهداف یادگیری:
تصاویر رو طوری تغییر بدی که دقیقاً توی کانتینر خودش جا بگیره و درست موقعیت بگیره.
با استفاده از Clip Path و ماسکها، شکلهای سفارشی و خلاقانه بسازی.
از فیلترها و blend modeها استفاده کنی تا ظاهر تصاویر رو تغییر بدی و افکتهای جالب ایجاد کنی.
با ترنزیشن، ترنسفورم و انیمیشن، تصاویرت رو متحرک و تعاملی کنی.
تصاویر سایتت رو بهینه و واکنشگرا کنی تا تو تمام مرورگرها و دستگاهها عملکرد خوبی داشته باشن.
مهارت ها
Web StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOne-Off
سرفصل ها
۰. مقدمه
- 01 - کار با تصاویر در CSS
- 02 - آنچه باید بدانید
- 03 - استفاده از فضای کد گیتهاب با این دوره
۱. تنظیم و موقعیتیابی اولیه تصویر
- 04 - نشانهگذاری تصویر مدرن
- 05 - حذف فضای زیر تصویر
- 06 - قرار دادن یک تصویر در داخل هر ظرفی
- 07 - جاگذاری و قرار دادن تصویر پس زمینه در یک ظرف
- 08 - ایجاد تصاویر مربع و متناسب
- 09 - قرار دادن یک تصویر در داخل یک سلول شبکه
- 10 - قرار دادن یک تصویر درون یک flexbox
۲. ماسکهای کلیپ، مسیرها و شکلهای سفارشی
- 11 - گوشههای گرد با border-radius
- 12 - اشکال سفارشی با استفاده از clip-path
- 13 - ایجاد دایره و بیضی با استفاده از clip-path
- 14 - ایجاد اشکال با خطوط مستقیم با استفاده از چندضلعی
- 15 - ایجاد مستطیل با استفاده از clip-path
- 16 - ایجاد مسیرهای سفارشی با clip-path
- 17- ایجاد اشکال سفارشی با SVG
- 18 - استفاده از جایگزینی برای clip-path - mask-image
- 19 - ایجاد جلوه حذفی متن با background-clip
۳. فیلتر کردن و ترکیب کردن
- 20 - فیلتر کردن و ترکیب کردن
- 21 - بررسی ویژگی فیلتر
- 22 - ترکیب فیلترها
- 23- استفاده از فیلترهای سفارشی SVG
- 24 - حالت ترکیب-ترکیب
- 25 - آزمایش با حالتهای ترکیبی
- 26 - حالت ترکیبی پسزمینه
۴. تبدیلها و انیمیشنها
- 27 - انتقال، تغییر مقیاس، چرخش و دستکاری پرسپکتیو
- 28 - جلوههای متحرک با انتقالها
- 29 - انیمیشنهای کیفریم برای جلوههای تصویری
- 30 - نکات مهم در استفاده از انیمیشنها
۵. بهینهسازی تصویر و عملکرد
- 31 - ارائه تصاویر واکنشگرا
- 32 - بهینهسازی عملکرد
- 33 - اطمینان از سازگاری با مرورگرهای مختلف
نتیجهگیری
- 34 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی هوش مصنوعی عملی: ساخت پایگاه داده تولید نقد فیلم تحت وب با استفاده از هوش مصنوعی مولد، HTML، CSS و PHP
- دوره آموزشی زیباییشناسی طراحی برای تجربههای وب
- دوره آموزشی HTML و CSS: ساخت فرمها
- دوره آموزشی یادگیری SFTP
- دوره آموزشی تکنیکهای مدرن CSS بدون نیاز به JavaScript
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی یادگیری جامع HTML
- دوره آموزشی سرور HTTP آپاچی: نصب، پیکربندی و مدیریت