در این مقاله سعی داریم به طور کلی به نحوه ساخت افکت انیمیشن برای متن در CSS بپردازیم. همانطور که می‌دانید زبان CSS یکی از اصلی‌ترین پایه‌های برای تولید صفحات وب است. چه در حوزه فرانت فعالیت دارید و چه بک‌اند باید آشنایی لازم را با این زبان داشته باشید. از سی‌اس‌اس برای بهتر کردن ظاهر صفحات وب استفاده می‌شود. در حقیقت صفحات اچ‌تی‌ام‌ال در حالت دیفالت هم می‌توانند به کاربران نمایش داده شوند ولی کمی ظاهرشان مناسب نیست. از این رو می‌توانید از CSS برای انجام این کار استفاده کنید. به طور کلی یادگیری قواعد CSS کار ساده‌ای است. مشکلی که اکثر دانشجویان و دانش‌آموزان در حین یادگیری این زبان به آن برخورد می‌کنند تکنیک‌ها است. هم‌چنین آن‌ها نمی‌توانند المان‌هایی با شکل‌های مختلف را تولید کنند. از این رو در این مقاله به طور کلی یک تمرین بسیار عالی را ارائه کرده‌ایم که با استفاده از آن می‌توانید به راحتی اقدام به تولید یک افکت انمیشنی در صفحات وب کنید. پس با ما همراه باشید. افکت انیمیشن برای متن در CSS در کجا کاربرد دارد؟ قطعا تا به حال به این نوع افکت در صفحات وب برخورد کرده‌اید. معمولا از این.. ... ادامه مطلب

در این مقاله قصد داریم به تکنیک Hover Effect در CSS که معمولا مورد استفاده قرار می‌گیرد اشاره کوتاهی داشته باشیم. همانطور که می‌دانید بعد از یادگیری css داشتن تمرین مهم‌ترین بخش است. بهتر است یک سری تکنیک‌ها را در این زبان تمرین کنیم. تمرین‌های مختلفی وجود دارد که می‌توانید با ایجاد آن‌ها به یادگیری بپردازید. تمرینی که در این مقاله گفته می‌شود نیز بسیار برای کسانی که به تازگی فرانت‌اند را شروع کرده‌اند مناسب است. اگر شما هم دوست دارید به این تکنیک مسلط شوید در ادامه با ما همراه باشید. تکنیک Hover Effect در CSS مناسب چه کسانی است؟ همانطور که کمی قبل‌تر نیز گفته شد این مقاله برای کسانی مناسب است که به تازگی یادگیری CSS را شروع کرده‌اند و دوست دارند با تمرین کردن بیشتر، مهارت خودشان را تا حد لازم افزایش دهند. از این شکل از Hover برای منو سایت‌ها و هم‌چنین گزینه‌هایی که در طراحی وجود دارند استفاده کنید. معمولا زمانی که افراد با مباحث پایه‌ای در HTML , CSS آشنا می‌شوند نمی‌توانند به خوبی چنین پروژه‌هایی را ایجاد کنند. در حقیقت مشکل این نیست که آن‌ها به لحاظ مباحث پایه‌ای با کدنویسی در H.. ... ادامه مطلب

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

در جلسه اول از آموزش انیمیشن‌سازی با CSS به طور کلی به آموزش کار با translate پرداختیم. اما در این جلسه قصد داریم به آموزش کار با scaleX در css بپردازیم. همانطور که می‌دانید انیمیشن‌سازی در css به یک کار بسیار محبوب تبدیل شده است. اکثر UIکارها به این تکنیک‌ها مسلط هستند و دوست دارند از طریق صفحات جذاب‌تری را طراحی کنند. با استفاده از انیمیشن‌سازی در CSS شما می‌توانید صفحات جذاب‌تر اما با دردسر کمتری تولید کنید. در این جلسه به آموزش ()scaleX و ()scaleY و ()scale می‌پردازیم که از جمله مباحث مهم در انیمیش‌سازی هستند. اگر علاقه‌مند به این موضوع هستید با ما همراه باشید. از Scale در چه مواردی استفاده می‌شود؟ از خاصیت translate زمانی استفاده می‌شد که می‌خواستیم یک عنصر را در جهت خاصی حرکت دهیم. به عنوان مثال 20 پیکسل به سمت راست یا پایین ببریم. اما با استفاده از خاصیت Scale شما می‌توانید عناصر مختلف صفحه را در جهت مشخصی به عنوان مثال چپ یا راست کوچک و یا بزرگ کنید. به عبارتی می‌توانید سایز عناصر را با یک سری اعداد تغییر دهید. هم‌چنین می‌توانید عناصر را قرینه کنید. استفاده از این تکنیک در .. ... ادامه مطلب