دوره مجازی طراحی وب (جلسه 26): مباحث پیشرفته CSS - transition , animation ، sprites و ...

- visibility ۲۱ mode_comment

در این جلسه از دوره آموزش طراحی وب خواهیم پرداخت به مباحث پیشرفته زبان CSS و موارد جالبی رو به شما خواهیم آموخت . ابتدا به معرفی لایه بندی های grid و flexbox خواهیم پرداخت. سپس ویژگی های transition، transform و animation ها در css رو آموزش میدیم و در انتها به  معرفی و استفاده از تکنیک css sprites خواهیم پرداخت .

عموم مطالب ارائه شده در این جلسه عبارتند از :

  • معرفی سیستم لایه بندی grid در css3 و کاربردهای آن
  • معرفی سیستم لایه بندی felxboxدر css3 و کاربردهای آن
  • آموزش ایجاد شکل های مختلف (دایره، بیضی، مثلث و ...) با CSS
  • آموزش transition و ویژگی های مربوط به آن در CSS
  • آموزش transform و ویژگی های مربوط به آن در CSS
  • آموزش Animation و ویژگی های مربوط به آن در CSS
  • نحوه ایجاد انیمیشن در CSS و استفاده از آن
  • معرفی timing-function های معروف برای سرعت اجرای انیمیشن ها
  • معرفی تکنیک CSS Sprites و استفاده از آن
  • تشریح فواید ویژه استفاده از CSS Sprites
info توجه

این مطلب یک جلسه از دوره آموزش طراحی وب می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در دوره آموزش طراحی وب

comment دیدگاه کاربران
soheil1985

سلام استاد
یک سوال
1- تو مبحث CSS Sprites اگر سایز تصویری که سیو کردیم مثلا 200 پیکسل در 200پیکسل بود ولی خواستیم نمایشش تو وب سایت رو مثلا 100 در 100 پیکسل بزرایم ، چطوری باید تغغیر سایز تصویر رو بهش بفهمونیم؟
2- در بحث بک گراند مثلا یک تیکه عکس به عرض 2 پیکسل میزنیم و اون رو repeat-x می کنیم. اینو چطوری می شه تو CSS Sprites استفاده کرد؟ و اصلا میشه یا نه؟
سپاس

لقمان آوند

۱- از sprite در این حالت استفاده نکنید.
۲- این مورد رو هم با sprites نمیشه انجام داد. می تونید به جاش از css gradient ها استفاده کنید و نیازی به عکس ندارید در این حالت. اینو ببینید.

soheil1985

سپاس

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2