آموزش تکنیک‌های مدرن CSS بدون نیاز به جاوااسکریپت - آخرین آپدیت

مقدمه Introduction

• کار با CodePen Working with CodePen

• دنیای در حال تغییر UI و CSS The changing world of UI and CSS

1. ساخت آکاردئون بدون جاوااسکریپت 1. Creating Accordions without JavaScript

• متحرک‌سازی مارکر (Marker) Animating the marker

• متحرک‌سازی پنل جزئیات Animating the details panel

• معرفی تگ‌های <details> و <summary> Introducing <details> and <summary>

• چالش: تغییر وضعیت مارکر بین حالت باز و بسته Challenge: Changing the ::marker between open and closed states

• تغییر فلش با استفاده از ::marker Changing the arrow with ::marker

• راه حل: تغییر وضعیت مارکر بین حالت باز و بسته Solution: Changing the ::marker between open and closed states

• استایل‌دهی به آکاردئون‌ها Styling the accordions

• ساخت مجموعه‌ای یکپارچه از آکاردئون‌ها با استفاده از اتریبیوت name Creating an integrated series of accordions using the name attribute

• ساخت آکاردئونی که در ابتدا باز باشد Creating an accordion that's initially open

2. ساخت پنجره‌های مودال بدون جاوااسکریپت 2. Creating Modal Windows without JavaScript

• افزودن اتریبیوت‌های popover و popovertarget و استایل‌دهی به پنجره مودال Adding the popover and popovertarget attributes and styling the modal window

• متحرک‌سازی پنجره مودال و پس‌زمینه Animating the modal window and background

• راه‌اندازی ساختار اولیه پنجره مودال و استایل‌دهی دکمه Setting up the initial modal window markup and styling the button

• پیکربندی دکمه بستن در popover Configuring the close button in the popover

3. ساخت طرح‌های رنگی روشن/تاریک بدون جاوااسکریپت 3. Creating Light/Dark Color Schemes without JavaScript

• چالش: طرح‌های رنگی روشن/تاریک با SVGها Challenge: Light/dark color schemes with SVGs

• راه حل: طرح‌های رنگی روشن/تاریک با SVGها Solution: Light/dark color schemes with SVGs

• کار با تابع light-dark() در CSS Working with the CSS light-dark() function

• تنظیم طرح رنگی با استفاده از color-scheme Setting up a color scheme with color-scheme

• طرح‌های رنگی روشن/تاریک چیستند؟ What are light/dark color schemes?

• تغییر تصاویر متناسب با طرح رنگی با استفاده از <picture> Switching images to match color schemes with <picture>

• تغییر از یک طرح رنگی به طرح دیگر بدون جاوااسکریپت Switching from one color scheme to another without JavaScript

4. پروژه نهایی: پیاده‌سازی آموخته‌ها 4. Capstone: Apply What You've Learned

• راه حل Jen Jen's solution

• ساخت صفحه‌ای شامل آکاردئون، پنجره مودال و حالت روشن/تاریک Create a page with accordions, modal windows, and a light/dark color scheme

جمع‌بندی Conclusion

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