یادگیری CSS: تصاویر
✅ سرفصل و جزئیات آموزش
CSS یک مجموعه ابزار برای دستکاری تصاویر است. چه بخواهید جلوههای بصری ویژهای ایجاد کنید و چه صرفاً بخواهید به بهترین شکل از پهنای باند موجود استفاده کنید، گزینههای متنوعی در CSS برای کنترل تصاویر در اختیار شماست که اجازه میدهد راهکارهای گرافیکی قابل استفاده مجدد بسازید. در این دوره که برای توسعهدهندگان فرانتاند طراحی شده، مدرس Carrie Dils تکنیکهای پایه و پیشرفته CSS برای تصاویر را پوشش میدهد.
از تنظیمات ابتدایی جاگذاری و اندازهگیری تصاویر درون کانتینرها و شبکهها شروع کنید و سپس به ساخت شکل های سفارشی با clip paths و ماسکها بپردازید. جلوههای ترکیب، فیلترها و انیمیشنها را برای افزودن تاثیر ویژوال کاوش کنید. همچنین روشهای بهینهسازی را بیاموزید که تصاویر واکنشگرا و با عملکرد بهتر در مرورگرهای مختلف ارائه میدهند.
یادگیری CSS: تصاویر
-
کار با تصاویر در CSS 0:00:48
-
آنچه باید بدانید 0:00:44
-
استفاده از GitHub Codespaces همراه این دوره 0:03:07
-
نشانهگذاری مدرن تصاویر 0:08:29
-
حذف فضای زیر تصویر 0:03:55
-
Fit کردن تصویر داخل هر کانتینر 0:05:28
-
Fit کردن و جایگذاری تصویر پسزمینه در کانتینر 0:06:07
-
ایجاد تصاویر مربع و متناسب 0:06:58
-
Fit کردن تصویر داخل یک grid cell 0:04:37
-
Fit کردن تصویر داخل یک flexbox 0:08:26
-
گوشههای گرد با استفاده از border-radius 0:04:49
-
شکل های سفارشی با استفاده از clip-path 0:00:55
-
ساخت دایره و بیضی با clip-path 0:07:22
-
ساخت شکل ها با خطوط صاف با استفاده از polygon 0:05:17
-
ساخت مستطیل با clip-path 0:03:18
-
ساخت مسیرهای سفارشی با clip-path 0:03:17
-
ساخت شکل های سفارشی با SVG 0:07:07
-
استفاده از جایگزین clip-path: بررسی mask-image 0:02:31
-
ایجاد افکت حذف متن با background-clip 0:01:44
-
فیلترگذاری و ترکیب 0:01:04
-
بررسی خصوصیت filter 0:05:55
-
ترکیب فیلترها 0:01:40
-
استفاده از فیلترهای سفارشی SVG 0:04:02
-
mix-blend-mode 0:01:31
-
آزمایش حالتهای ترکیبی (blend modes) 0:02:55
-
background-blend-mode 0:01:27
-
Translate، مقیاسدهی، چرخش و دستکاری پرسپکتیو 0:07:12
-
افکت های انیمیشنی با transitions 0:04:35
-
انیمیشنهای keyframe برای افکت های تصویری 0:06:28
-
نکات مهم در استفاده از انیمیشنها 0:02:39
-
ارائه تصاویر پاسخگو 0:01:54
-
بهینهسازی عملکرد 0:01:16
-
تضمین سازگاری بین مرورگرها 0:02:25
-
مراحل بعدی 0:00:51
مشخصات آموزش
یادگیری CSS: تصاویر
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:پیشرفته
- تعداد درس:34
- مدت زمان :2:10:53
- حجم :322.0MB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی