آموزش CSS: کار با تصاویر - آخرین آپدیت

مقدمه Introduction

• کار با تصاویر در CSS Working with images in CSS

• استفاده از GitHub Codespaces در این دوره Using GitHub Codespaces with this course

• پیش‌نیازها و موارد ضروری What you should know

1. جای‌گذاری و اندازه مناسب تصاویر 1. Basic Image Fitting and Positioning

• مارک‌آپ مدرن تصاویر Modern image markup

• اندازه مناسب تصویر در Flexbox Fitting an image inside a flexbox

• اندازه مناسب تصویر در سلول‌های Grid Fitting an image inside a grid cell

• ایجاد تصاویر مربعی و متناسب Creating square and proportionate images

• حذف فضای خالی زیر تصویر Removing space underneath an image

• جای‌گذاری و تنظیم تصویر پس‌زمینه در کانتینر Fitting and positioning a background image in a container

• اندازه مناسب تصویر در هر نوع کانتینر Fitting an image inside any container

2. ماسک‌ها، مسیرها و اشکال سفارشی 2. Clip Masks, Paths, and Custom Shapes

• ایجاد اشکال با خطوط مستقیم با Polygon Creating straight-lined shapes with polygon

• ایجاد مسیرهای سفارشی با Clip Path Creating custom paths with clip-path

• ایجاد اشکال سفارشی با SVG Creating custom shapes with SVG

• ایجاد افکت متن توخالی با Background Clip Creating a text knockout effect with background-clip

• گوشه‌های گرد با Border Radius Rounded corners with border-radius

• ایجاد دایره و بیضی با Clip Path Creating circles and ellipses with clip-path

• استفاده از جایگزین Clip Path: ماسک تصویر Using an alternative to clip-path: mask-image

• اشکال سفارشی با استفاده از Clip Path Custom shapes using clip-path

• ایجاد مستطیل با Clip Path Creating rectangles with clip-path

3. فیلترها و حالت‌های ترکیبی 3. Filtering and Blending

• تجربه با حالت‌های ترکیبی (Blend Modes) Experimenting with blend modes

• استفاده از فیلترهای سفارشی SVG Using custom SVG filters

• حالت Mix Blend Mode Mix-blend-mode

• ترکیب فیلترها Combining filters

• حالت Background Blend Mode Background-blend-mode

• بررسی ویژگی Filter Looking at the filter property

• فیلترینگ و ترکیب رنگ‌ها Filtering and blending

4. تغییر شکل‌ها و انیمیشن‌ها 4. Transformations and Animations

• جلوه‌های متحرک با Transitions Animated effects with transitions

• انیمیشن‌های Keyframe برای افکت‌های تصویری Keyframe animations for image effects

• جابجایی، مقیاس، چرخش و مدیریت پرسپکتیو Translate, scale, rotate, and manipulate perspective

• نکات مهم در استفاده از انیمیشن‌ها Important notes on using animations

5. بهینه‌سازی و عملکرد تصاویر 5. Image Optimization and Performance

• ارائه تصاویر ریسپانسیو (واکنش‌گرا) Delivering responsive images

• تضمین سازگاری با مرورگرهای مختلف Ensuring cross-browser compatibility

• بهینه‌سازی عملکرد و سرعت Optimizing performance

جمع‌بندی Conclusion

• گام‌های بعدی Next steps