دوره آموزشی
دوبله زبان فارسی
تکنیکهای مدرن CSS بدون استفاده از JavaScript
✅ سرفصل و جزئیات آموزش
در این دوره، تکنیکهایی فقط با CSS برای ایجاد پنلهای آکاردئونی، پنجرههای مودال، منوهای همبرگری و طرحهای رنگی روشن/تاریک را آموزش میبینید. در حال حاضر، این تکنیکها همگی به نوعی به JavaScript وابسته هستند. با این حال، با بهبود عناصر HTML، خواص CSS و پشتیبانی مرورگرها، این روشها دیگر نیازمند JavaScript نیستند. در این دوره با مدرس Jen Kramer همراه شوید تا با جدیدترین و پیشرفتهترین تکنیکها آشنا شوید.
تکنیکهای مدرن CSS بدون استفاده از JavaScript
-
دنیای در حال تغییر UI و CSS 0:00:46
-
کار با CodePen 0:02:48
-
معرفی عناصر <details> و <summary> 0:03:38
-
ایجاد یک آکاردئون که به صورت پیشفرض باز است 0:02:47
-
ایجاد سری یکپارچهای از آکاردئونها با استفاده از صفت name 0:02:10
-
استایلدهی به آکاردئونها 0:06:41
-
تغییر فلش با استفاده از marker:: 0:04:00
-
چالش: تغییر نشانگر marker:: بین حالت باز و بسته 0:01:24
-
راهحل: تغییر نشانگر marker:: بین حالتهای باز و بسته 0:02:25
-
متحرک سازی نشانگر 0:07:56
-
متحرک سازی پنل جزئیات 0:07:03
-
راه اندازی ساختار اولیه پنجره مودال و استایلدهی به دکمه 0:05:59
-
افزودن ویژگی های popover و popovertarget و استایلدهی به پنجره مودال 0:06:02
-
پیکربندی دکمه بستن در Popover 0:03:54
-
انیمیشن پنجره مودال و پسزمینه 0:05:37
-
طرحهای رنگی روشن/تاریک چیستند؟ 0:01:49
-
راه اندازی یک طرح رنگی با استفاده از ویژگی color-scheme 0:03:10
-
کار با تابع ()CSS light-dark 0:05:34
-
تغییر طرح رنگی از یک حالت به حالت دیگر بدون استفاده از JavaScript 0:07:48
-
تغییر تصاویر برای تطابق با طرحهای رنگی با استفاده از <picture> 0:04:22
-
چالش: طرحهای رنگی روشن/تاریک با SVGs 0:03:02
-
راهحل: طرحهای رنگی روشن/تاریک با SVGs 0:02:18
-
ساخت یک صفحه با آکاردئونها، پنجرههای مودال و طرح رنگی روشن/تاریک 0:03:17
-
راهحل Jen 0:05:33
-
گامهای بعدی 0:01:06
مشخصات آموزش
تکنیکهای مدرن CSS بدون استفاده از JavaScript
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:پیشرفته
- تعداد درس:25
- مدت زمان :1:41:09
- حجم :318.0MB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy