آموزش وب سایت خود را با HTML، CSS و انیمیشن های وب متمایز کنید
Make Your Website Stand Out with HTML, CSS and Web Animations
آیا به دنبال افزودن کمی خلاقیت و منحصر به فرد بودن به وب سایت خود هستید؟ با HTML، CSS، و انیمیشن‌های وب، هر چیزی ممکن است!
در این کلاس، من به شما نشان خواهم داد که چگونه با معرفی برخی از عناصر طراحی اضافی، عمدتاً با استفاده از HTML و CSS، صفحه اصلی وب سایت یا برنامه وب خود یا صفحات فرود را یک درجه بالا ببرید. همچنین برخی از انیمیشن‌های مبتنی بر CSS را به‌عنوان راهی برای افزودن کمی جذابیت بصری بررسی خواهیم کرد.
با استفاده از CodePen، یاد خواهید گرفت که چگونه:
- گرادیان های پس زمینه لایه ای ایجاد کنید
- با استفاده از انیمیشن‌های CSS، متن قهرمان صفحه اصلی یا صفحه فرود را متمایز کنید
- افکت‌های فتوشاپ مانند حالت‌های ترکیبی و فیلترها را به متن و تصاویر پس‌زمینه اضافه کنید
- متن را دور یک دایره یا شکل دیگری بپیچید
- لبه های زاویه دار را به بخش های صفحه اضافه کنید
- لایه بندی تصاویر مانند PNG و SVG برای اعمال انیمیشن های منحصر به فرد
بعلاوه، من نکات و منابعی را برای انتخاب بهبود طراحی مناسب برای وب سایت شما، بر اساس اهداف سایت شما، به اشتراک خواهم گذاشت.
چه یک فریلنسر باشید که به دنبال ایجاد سایت‌های مؤثرتر برای مشتریان هستید، یا یک فرد مزدور به دنبال ایجاد یک سایت تجاری مؤثرتر، تکنیک‌هایی را برای معرفی برخی پیشرفت‌های طراحی که جذاب‌تر و جذاب‌تر را ارائه می‌دهند، یاد خواهید گرفت. تجربه به یاد ماندنی برای بازدیدکنندگان سایت.
توجه: برای بهترین تجربه مشاهده، تماشای ویدیوها در حالت تمام صفحه توصیه می شود. اگر صفحه نمایش شما محدود است، به پیوندهای CodePen ارائه شده برای مشاهده کد منبع برای درس ها مراجعه کنید.
برای پروژه کلاس، 2 یا بیشتر از تکنیک های پوشش داده شده در دوره را انتخاب کنید و آنها را در پروژه وب خود پیاده سازی کنید. شما بسیار تشویق می شوید که از CodePen برای این پروژه استفاده کنید تا بتوانید لینک پروژه تکمیل شده خود را به راحتی در گالری پروژه به اشتراک بگذارید. منابع کلاس و پیوندهای درس ضمیمه شده را حتماً بررسی کنید. اگر می‌خواهید نقطه شروعی داشته باشید، راحت از قلم شروع استفاده کنید (از گزینه "fork" در CodePen برای ایجاد کپی خود استفاده کنید.
سعی کنید از منطقه راحتی خود خارج شوید! اگر معمولاً با انیمیشن ها کار نمی کنید، سعی کنید یک انیمیشن CSS را در پروژه خود قرار دهید. اگر معمولاً طرح‌بندی CSS را آزمایش نمی‌کنید، سعی کنید بلوکی از محتوا را با استفاده از شکل CSS یا لبه زاویه‌دار اضافه کنید.
من تمام پروژه‌های ارسالی را بررسی می‌کنم و به طور مرتب انجمن بحث کلاس را بررسی می‌کنم تا به هر سؤالی که پیش می‌آید پاسخ دهم.
قلم شروع نهایی پروژه
پیوندهای درس
درس شماره 1: همپوشانی متن در پس‌زمینه گرادیان -
درس شماره 2: متن قهرمان متحرک -
درس شماره 3: اشکال CSS -
درس شماره 4: لبه های زاویه دار -
درس شماره 5: فیلترهای CSS با تصویر پس زمینه -
درس شماره 6: حالت های ترکیبی CSS در متن همپوشانی -
درس شماره 7 (پاداش): انیمیشن SVG -
درس ها Lessons
-
نتیجه Conclusion
-
لبه های زاویه دار Angled Edges
-
امتیاز: انیمیشن SVG، قسمت اول Bonus: SVG Animation, Part I
-
ملاحظات سایت Site Considerations
-
متن قهرمان متحرک Animated Hero Text
-
اشکال CSS CSS Shapes
-
فیلترهای CSS CSS Filters
-
معرفی Introduction
-
جایزه: SVG، انیمیشن، قسمت دوم Bonus: SVG, Animation, Part II
-
حالت های ترکیبی CSS CSS Blend Modes
-
مقدمه ای بر CodePen Introduction to CodePen
-
گرادیان های پس زمینه Background Gradients
نمایش نظرات
نظری ارسال نشده است.
https://donyad.com/d/6b6bca
آموزش سبک خلاق خود را بیابید! طراحی برای توسعه زیبایی شناسی شما
Find Your Creative Style! Sketching to Develop Your Aesthetic
" تکنیک‌های جدید را کاوش کنید، با ابزارها و رنگ‌ها بازی کنید و سبک تصویرسازی خود را از طریق این کلاس طراحی جذاب و سرگرم‌کننده بسازید! پیدا کردن زیبایی خود .."
آموزش الگوی گل آبرنگ لایه لایه ساده
simple layered watercolour floral pattern
"در این کلاس شما یاد می گیرید که چگونه الگوهای گل های سرگرم کننده ای را نقاشی کنید که آرامش بخش هستند و به راحتی ایجاد می شوند! با استفاده از رنگ های آبرنگ، تکنیک مرطوب را روی خیس اعمال خواهید کرد..."
آموزش از جوهر هند تا هنر وکتور: ایجاد گلهای دیجیتال قطعه به قطعه
From India Ink to Vector Art: Creating Digital Flowers Piece by Piece
"نمای کلی کلاس: گاهی اوقات من فقط می خواهم آزادانه و بدون محدودیت با جوهر هند بازی و نقاشی کنم. بدون نیاز به دانستن اینکه دقیقاً چه شکلی خواهد داشت ایجاد کنید. .."
آموزش Canva برای ایجاد ویدیو: با استفاده از Canva فیلم ها و انیمیشن های جذاب ایجاد کنید
Canva for Video Creation: Create Engaging Videos & Animation Using Canva
"به "Canva for Video Creation: Create Engaging Videos amp; خوش آمدید. انیمیشن با استفاده از Canva" - دوره آموزشی نهایی که مهارت های ایجاد ویدیوی شما را به سمت جدید می برد.
Sheelah Brennan
توسعه دهنده وب/UI
سلام! من Sheelah هستم، یک توسعه دهنده وب/UI جلویی.
من به‌عنوان برنامه‌نویس به‌صورت تمام‌وقت از راه دور کار می‌کنم. در اوقات فراغت، من عاشق ساختن نمونه های اولیه CSS، جاوا اسکریپت و SVG در CodePen هستم. من از به اشتراک گذاشتن دانش خود در این راه لذت می برم!
من را پیدا کنید و در این آدرس سلام کنید:
https://twitter.com/sheelah_b
https://instagram.com/ramblingfloweristahttps://sheelahb.com
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.