دوره آموزشی طراحی وب: SVG Rollovers با CSS

23 دقیقهمتوسط2014-08-11

مدرسین

Chris Converse

Applies design and UX principles to technology

جزئیات دوره

یاد بگیرید که چگونه رنگ و قابلیت دید SVG را با CSS تغییر دهید. در این قسمت از دوره "طراحی وب"، نویسنده کریس کونورس نشان می‌دهد که چگونه ویژگی‌های عناصر SVG را با CSS خارجی کنترل کنید و گرافیک‌های خود را هنگام باز کردن موس تغییر دهید. علاوه بر این، یاد می‌گیرید که چگونه چندین گرافیک SVG را گروه‌بندی کنید و آن‌ها را با یک حالت رول‌اور واحد کنترل کنید. فایل‌های تمرینی این دوره برای همه اعضا رایگان است، پس وارد دوره شوید و هم‌زمان با آن پیش بروید.

اهداف یادگیری:
تغییر رنگ گرافیک‌های SVG با CSS
استفاده از CSS برای کنترل دید گرافیک‌ها
ایجاد حالت‌های rollover برای گرافیک‌های SVG
گروه‌بندی چندین گرافیک SVG و کنترل آن‌ها با یک حالت
استفاده از CSS خارجی برای تغییر ویژگی‌های SVG

مهارت ها

Web GraphicsCSSWeb StandardsWeb DesignFront-End Web DevelopmentLimited SeriesWeb DevelopmentOpen Source

سرفصل ها

0. مقدمه

01 - پیش نمایش پروژه نهایی
02 - در مورد فایل‌های تمرین

1. طراحی پاسخگو، اسکریپت‌های سفارشی، و تشخیص اسکرول

03 - گزینه‌هایی برای ترکیب CSS با SVG
04 - انتقال SVG به صورت درون خطی با HTML
05 - اضافه کردن کلاس‌ها به عناصر SVG
06 - ترکیب حالت‌های شناور CSS با SVG
07 - گروه بندی عناصر SVG
08 - کنترل عناصر SVG گروه بندی شده با CSS