آموزش کدنویسی خلاق: متحرک سازی SVG با کد CSS ساده
Creative Coding: Animating SVG with Simple CSS Code
اگر تا به حال آرزو داشته اید که گرافیک خود را زنده کنید، وقت آن رسیده است که دست به کار شوید. کدنویسی خلاقانه سرگرم‌کننده را با - طراح برنامه‌نویسی که در حال حاضر در Adobe کار می‌کند و یکی از سازمان‌دهندگان کارگاه‌های The Awwwesomes کاوش کنید. در این کلاس های ، گام به گام نحوه متحرک سازی گرافیک های برداری ذخیره شده در فرمت SVG با استفاده از انیمیشن های ساده CSS را خواهید آموخت.
اگر تجربه ای در زمینه کدنویسی ندارید نگران نباشید! شما نیز لذت خواهید برد و می توانید تمرینات را انجام دهید. این دوره برای افرادی با سطوح مختلف کدنویسی (تازه کارها، مبتدیان و طرفداران CSS) تنظیم شده است.
در پایان، می‌توانید طرح‌ها را مستقیماً در مرورگر وب خود زنده کنید. درست مانند .
تمرین باعث استادی می شود، بنابراین دوره شامل مجموعه ای از تمرینات است.
این دوره برای:
- افرادی که طراحی کدنویسی را دوست دارند،
- طراحانی که مایلند آثار برداری خود را با کد متحرک کنند،
- همه کسانی که دوست دارند برای ایجاد چیزهایی در رایانه و وب.
برای پروژه کلاس، همه تشویق می شوند که یک گرافیک برداری با فرمت SVG موجود در بسته تمرینی را انتخاب کنند و انیمیشن خود را ایجاد کنند. طراحان می توانند از آثار هنری SVG خود استفاده کنند.
فایل های دوره را دانلود کنید ('class-project.zip'، در زیر 'فایل های پیوست') و انیمیشن های CSS خود را در فایل های SVG انتخابی اعمال کنید. شما تصمیم می گیرید که چه چیزی متحرک شود.
با به اشتراک گذاشتن قطعه کد، اسکرین شات یا ویدیو و غیره یا پیوند به Codepen در پروژه خود، کار خود را به ما نشان دهید. اگر به دنبال کمک هستید، هر گونه سوالی را در بخش "انجمن" بپرسید.
موفق باشید!
باشد که انیمیشن‌های CSS و SVG همراه شما باشند! :)
درس ها Lessons
-
خوش آمدی! معرفی کلاس ها Welcome! Intro to the classes
-
Codepen - ابزار مفید Codepen - useful tool
-
متحرک سازی بخش های انتخاب شده از گرافیک SVG Animating selected parts of SVG graphics
-
پروژه های کلاسی Class Projects
-
کد SVG SVG code
-
اهداف کلاس ها Goals of the classes
-
معرفی SVG Intro to SVG
-
مواد Materials
-
ابزار Tools
-
جاسازی SVG در سند HTML Embedding SVG in HTML document
-
انیمیشن های CSS CSS Animations
-
معرفی CSS (فقط برای غیر کدنویس ها) Intro to CSS (only for non-coders)
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.
https://donyad.com/d/c291
Aga Naplocha
کدنویس و طراح خلاق
سلام، من آقا هستم! من یک طراح برنامه نویسی با بیش از 9 سال تجربه، مستقر در ورشو، لهستان هستم.
من دوست دارم دانش و تجربه خود را به اشتراک بگذارم، به همین دلیل است که ابتکار خود را تقویت می کنم - The Awwwesomes - ابتکاری که افراد را تشویق می کند تا شروع به یادگیری کدنویسی و طراحی وب سایت های awwwesome کنند!
خبرنامه من:
-
می توانید به من مراجعه کنید:
- - https://www.instagram.com/theawwwesomes/
-
آخرین کلاس های من:
پرطرفدارترین کلاس ها:
نمایش نظرات