آموزش وب سایت خود را با 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
Sheelah Brennan
توسعه دهنده وب/UI
سلام! من Sheelah هستم، یک توسعه دهنده وب/UI جلویی.
من به‌عنوان برنامه‌نویس به‌صورت تمام‌وقت از راه دور کار می‌کنم. در اوقات فراغت، من عاشق ساختن نمونه های اولیه CSS، جاوا اسکریپت و SVG در CodePen هستم. من از به اشتراک گذاشتن دانش خود در این راه لذت می برم!
من را پیدا کنید و در این آدرس سلام کنید:
https://twitter.com/sheelah_b
https://instagram.com/ramblingfloweristahttps://sheelahb.com
نمایش نظرات