CSS: تصاویر - میتالرن

مدرس Carrie Dils

انتشار 2025/04/29

مدت زمان 2h 10m

سطح مناسب همه

فایل تمرینی ندارد

آموزش CSS: Images

CSS ابزاری برای دستکاری تصویر است. این که آیا شما می خواهید جلوه های بصری متمایز ایجاد کنید یا به سادگی از پهنای باند موجود استفاده کنید ، گزینه های دستکاری تصاویر در CSS به شما امکان می دهد راه حل های گرافیکی قابل استفاده مجدد ایجاد کنید. در این دوره ، طراحی شده برای توسعه دهندگان وب جلویی ، مربی کری DILS تکنیک های ضروری CSS را برای تصاویر ، از اتصالات اساسی و موقعیت یابی گرفته تا جلوه های پیشرفته و بهینه سازی پوشش می دهد. با یادگیری نحوه قرار دادن تصاویر در ظروف و شبکه ها شروع کنید و به دنبال آن ایجاد شکل های سفارشی با مسیرهای کلیپ و ماسک ها انجام دهید. ترکیب ، فیلترها و انیمیشن ها را برای افزودن تأثیر بصری و همچنین نحوه استفاده از تکنیک های بهینه سازی برای ارائه تصاویر پاسخگوتر و اجرا در مرورگرها کاوش کنید.

Cascading Style Sheets (CSS)

Introduction

Working with images in CSS ()

What you should know ()

Using GitHub Codespaces with this course ()

1. Basic Image Fitting and Positioning

Modern image markup ()

Removing space underneath an image ()

Fitting an image inside any container ()

Fitting and positioning a background image in a container ()

Creating square and proportionate images ()

Fitting an image inside a grid cell ()

Fitting an image inside a flexbox ()

2. Clip Masks, Paths, and Custom Shapes

Rounded corners with border-radius ()

Custom shapes using clip-path ()

Creating circles and ellipses with clip-path ()

Creating straight-lined shapes with polygon ()

Creating rectangles with clip-path ()

Creating custom paths with clip-path ()

Creating custom shapes with SVG ()

Using an alternative to clip-path: mask-image ()

Creating a text knockout effect with background-clip ()

3. Filtering and Blending

Filtering and blending ()

Looking at the filter property ()

Combining filters ()

Using custom SVG filters ()

Mix-blend-mode ()

Experimenting with blend modes ()

Background-blend-mode ()

4. Transformations and Animations

Translate, scale, rotate, and manipulate perspective ()

Animated effects with transitions ()

Keyframe animations for image effects ()

Important notes on using animations ()

5. Image Optimization and Performance

Delivering responsive images ()

Optimizing performance ()

Ensuring cross-browser compatibility ()

Conclusion

Next steps ()

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.

مسیرهای یادگیری آموزش CSS: تصاویر

یکی از مهمترین مشکلات افرادی که از آموزش های آنلاین استفاده می‌ کنند این است به دلیل تعداد زیاد این آموزش ها، کاربر دچار سردرگمی شده و نمی داند از کدام آموزش بهتر است شروع کند و یا با کدام آموزش ها مهارت های خود را ارتقا دهد. داشتن یک برنامه آموزشی گام به گام میتواند کاربران را از این مشکلات رها کند. در واقع مسیرهای یادگیری مجموعه ای از آموزش ها هستند که به ترتیب اولویت در کنار هم قرار گرفته اند تا کاربران را از این سردرگمی ها نجات دهند. این مسیرها در موضوعات مختلفی دسته بندی شده‌اند که در زیر، لیستی از همه دسته بندی مسیرهایی که توسط سایت لیندا ارائه شده اند را می توانید مشاهده کنید.

آموزش CSS: Images در 1 مسیر آموزشی قرار دارد. تخصص مورد نظر خود را انتخاب کنید، با مسیر یادگیری آن همراه شوید و حرفه ای شوید.

برگه های سبک آبشاری (CSS) یک مهارت اصلی برای توسعه دهندگان وب و طراحان وب است. بیاموزید که چگونه الگوی Decorator در قلب CSS به شما امکان می دهد استایل ها را از طریق انتخابگرها اعمال کنید. انواع گزینه‌های طرح‌بندی را کاوش کنید و بیاموزید که چگونه سایت‌ها و برنامه‌ها را با تایپوگرافی و انیمیشن بدرخشید.

آموزش CSS: تصاویر ، ایستگاه شماره 5 در مسیر یادگیری CSS را یاد بگیرید ، است.