توضیحات

در این دوره فوق العاده کاربردی قرار هست در مورد Transition ,Transform 3D, Transform و Animation در دنیای سی اس اس (CSS)  با هم دیگه صحبت کنیم و در قالب مینی پروژه های مختلف آنها رو با هم دیگه بهتر یاد بگیریم.این دوره برای کسانی که میخواهند یک قدم به دنیای حرفه ای فرانت اند (Front-End) نزدیک شوند هست.توی این دوره مبحث های پیشرفته از سی اس اس (CSS) را قرار هست باهم دیگه کار کنیم پس نیاز هست که شما با سی اس اس (CSS) آشنایی خوبی داشته باشید.

حتما ویدیو معرفی دوره را در پایین مشاهده کنید تا با محتوا و مینی پروژه های مختلف دوره آشنا شوید.

مباحثی که در این دوره گفته میشود شامل :
آشنایی با Transform

  • آشنایی با Transform
  • آشنایی با توابع translate , scale , rotate
  • آشنایی با تابع skew و تغییر مبدا مختصاتی عنصر

مینی پروژه گالری تصاویر

آشنایی  با Transform 3D

  • آشنایی با Transform 3D
  • آشنایی با perspective
  • آشنایی با translate, scale, rotate در 3D
  • آشنایی با backface-visibility

مینی پروژه card محصول

آشنایی  با Transition

  • آشنایی با Transition
  • پراپرتی transition-property
  • پراپرتی transition-duration
  • پراپرتی transition-timing-function
  • پراپرتی transition-delay

مینی پروژه افکت های لینک (link)

مینی پروژه افکت های دکمه (button)

مینی پروژه افکت های تصویر (image)

آشنایی  با Animation

  • آشنایی با Animation
  • keyframs@ و پراپرتی animation-name
  • پراپرتی های duration, timing-function, delay
  • پراپرتی های itration-count, direction
  • پراپرتی های fill-mode, play-state

مینی پروژه preloaders


پیش نیاز این دوره فوق العاده:

آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور
آموزش رایگان flexbox (فلکس باکس) پروژه محور (اختیاری)

دوره های پیشنهادی، بعد از گذراندن این دوره:


CSS طراحی وب Css Animtion Css Transition Css Transform طراحی سایت سی اس اس اچ تی ام ال css 3

مدرس دوره علی شیخ
مدت دوره 06:46:20
تعداد ویدیو 56

وضعیت دوره : درحال برگزاری
قیمت دوره : 229,000 183,000 تومان
% 20 تخفیف

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام
    استاد من میخوام این دوره رو خریداری کنم و این دوره قدیمی هست و اگر شما نسخه بروزرسانی شده این نسخه رو قرار بدید من میتونم به اون هم دسترسی داشته باشم (رایگان) ؟؟؟

    • سلام وقت بخیر.
      اگه این دوره بازتولید بشه بله در همین دوره اضافه میشه و دوستانی که از قبل خریداری کردن به ویدیو های جدید این دوره هم دسترسی دارند.

  • سلام

    اقا من این دوره رو خریدم و سوال دارم نمیدونم همینجا باید بپرسم یا جای دیگه.
    سوال: در مورد ویژگی

    transform-origin
    آیا فقط در مورد تابع rotate () قابل استفادس یا بقیه تابع ها هم میشه؟

    • سلام وقت بخیر.
      میتوانید برای دیگر موارد transform استفاده کنید.
      زیر قسمت مربوطه و یا توی تلگرام پشتیبانی وب پروگ پاسخ داده میشه اما اول سعی کنید سوالاتتون را سرچ کنید چون خیلی در آینده به شما کمک میکنه و از طرفی کلی مطلب دیگه هم توی سرچ یاد میگیرید و مورد بعدی هر آنچه به ذهنتون میاد را تست کنید.

  • سلام میکنم خدمت اقای شیخ عزیز ممنون بابت این دوره کاربردی خیلی کمک کرد دست شما درد نکنه واقعا خسته نباشید.یه سوالی که داشتم اینه که برای قوی تر شدن توی این بحث چی کار کنیم؟پروژه تمرینی از کجا گیر بیاریم؟

    • سلام وقت بخیر.
      ممنون از شما، خداروشکر که دوره براتون مفید بوده
      برای تمرین میتوانید سرچ کنید نمونه انیمیشن در css و مثال های مختلف را ببینید و یا اینکه جلوتر که میاید و قالب وب طراحی میکنید، از قالب ها و الگو های مختلف الهام و استفاده میکنید برای طراحی قالب و میتوانید انیمیشن های آنها را پیاده سازی کنید.

  • سلام استاد عزیز خسته نباشید
    میخواستم بدونم کسایی که مثلا از عضویت ویژه 1 ماهه استفاده میکنن میتونن از دوره های دیگه که عضویت ویژه دارن استفاده کنن یا اونارو دانلودشون کنن یا نه فقط همون دوره؟؟؟

    باتشکر

    • سلام وقت بخیر.
      در حال حاضر شما با خرید عضویت ویژه(یکماهه، چهارماهه، یکساله)، به تمام دوره های عضویت ویژه به مدت زمان مشخص دسترسی دارید.

  • سلام و خدا قوت برای سایت و آموزش ها و فن بیان خوبتون. خواستم بدونم چرا before &after استفاده میکنیم توی button ها؟ این هارو بیشتر برای گزاشتن چیزی قبل و بعد یه المان میدن!

    و اینکه تو باتن5 چرا فقط before داشت؟ نباید after می داشت چون بعد هاور بزرگ میشه؟

    • سلام وقت بخیر.
      ممنون از شما❤
      بله درست میفرمائید ما از before و after برای قرار دادن چیزی به قبل و بعد تگ میدیم.
      در اینجا هم ما همینکارو انجام میدیم. اما در نظر بگیرید چون position مربوط به before و after مقدار absolute رو میدیم به همین دلیل با top، left و ... هر کجای تگ خواستیم میتونیم اونو انتقال بدیم.
      توی دکمه شماره ۵ هم همین کارو انجام دادم، چون absolute هست و از طرفی width و height برابر با خوده تگ هست پس فرقی نمیکنه از before استفاده کنید یا after هر دوتاش کل تگ رو دربر میگیره

    • سلام خواهش میکنم.مراحمین❤
      این لینک رو مطالعه و تست کنید.
      https://css-tricks.com/transitions-only-after-page-load/