آموزش تصویری استفاده از خاصیت های ترانزیشن و ترنسفورمر در CSS
پنج شنبه 13 اردیبهشت 1397 1:16 PM
همانطور که می دانید از CSS برای فرمت دهی و طرح بندی، تعریف سبک متن (مانند نوع قلم، رنگ و اندازه‌ها)، اندازه جدول و جنبه های دیگری از صفحات وب که قبلا فقط در فایل HTML یک صفحه قابل تعریف بوده است استفاده می شود. CSS دارای خاصیت ها و افکت های مختلفی است که تنها با نوشتن قطعه کدهای ساده می توانند به ظاهر وب سایت شما دید ویژه ای اضافه کنند.
به وسیله خاصیت Transition در CSS، می توانید تغییر اندازه، شکل، رنگ، موقعیت و ... یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری، انیمیشن سازی کنید. به عنوان مثال فرض کنید، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید و هنگامی که کاربر موس خود را از روی آن می برد، به انداز قبلی و کوچک خود بر گردد.
خاصیت Transform در سی اس اس، این امکان را به ما می دهد که یک متن یا یک بخش را به شکل مورد علاقه ی خود بچرخوانیم، به عنوان مثال می توانید یک متن را در سایت خود با چرخش نشان دهید.
این افکت ها از قابلیت های منحصر به فرد در CSS می باشند که تنها با نوشتن یک قطعه کد ساده امکانپذیر خواهند بود.
در دوره آموزشی CSS: Transitions and Transforms شما با قابلیت های اساسی و کلیدی در انتقال و جابه جایی آبجکت ها در صفحات وب و با استفاده از سی اس اس آشنا می شوید.
عناوین آموزشی:
- درک اصول انتقال
- کار با انتقال های دو بعدی و سه بعدی
- متحرک سازی تغییرات رنگ
- محو کردن اشیاء
- تغییر اندازه عناصر صفحه و فونت
- استفاده از چند خاصیت انتقال به صورت همان زمان
- درک مفهوم keyframe ها و انیمیشن ها
- کار کردن در z-index
- اضافه کردن تعاملی جاوا اسکریپت
- ساختن انتقال در Dreamweaver
- و ...
باتشکر از ادمین گرامی وب سایت راسخون
