دوره آموزشی تصاویر در 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
سرفصل ها
مقدمه
- کار با تصاویر در CSS
- آنچه باید بدانید
- استفاده از فضای کد گیتهاب با این دوره
تنظیم و موقعیتیابی اولیه تصویر
- نشانهگذاری تصویر مدرن
- حذف فضای زیر تصویر
- قرار دادن یک تصویر در داخل هر ظرفی
- جاگذاری و قرار دادن تصویر پس زمینه در یک ظرف
- ایجاد تصاویر مربع و متناسب
- قرار دادن یک تصویر در داخل یک سلول شبکه
- قرار دادن یک تصویر درون یک flexbox
ماسکهای کلیپ، مسیرها و شکلهای سفارشی
- گوشههای گرد با border-radius
- اشکال سفارشی با استفاده از clip-path
- ایجاد دایره و بیضی با استفاده از clip-path
- ایجاد اشکال با خطوط مستقیم با استفاده از چندضلعی
- ایجاد مستطیل با استفاده از clip-path
- ایجاد مسیرهای سفارشی با clip-path
- ایجاد اشکال سفارشی با SVG
- استفاده از جایگزینی برای clip-path - mask-image
- ایجاد جلوه حذفی متن با background-clip
فیلتر کردن و ترکیب کردن
- فیلتر کردن و ترکیب کردن
- بررسی ویژگی فیلتر
- ترکیب فیلترها
- استفاده از فیلترهای سفارشی SVG
- حالت ترکیب-ترکیب
- آزمایش با حالتهای ترکیبی
- حالت ترکیبی پسزمینه
تبدیلها و انیمیشنها
- انتقال، تغییر مقیاس، چرخش و دستکاری پرسپکتیو
- جلوههای متحرک با انتقالها
- انیمیشنهای کیفریم برای جلوههای تصویری
- نکات مهم در استفاده از انیمیشنها
بهینهسازی تصویر و عملکرد
- ارائه تصاویر واکنشگرا
- بهینهسازی عملکرد
- اطمینان از سازگاری با مرورگرهای مختلف
نتیجهگیری
- مراحل بعدی