دوره مجازی طراحی وب (جلسه 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 توجه

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

ثبت نام در آموزش طراحی سایت با HTML5 , CSS3

comment دیدگاه کاربران
علی یوسفی replyپاسخ

انشالله که بهتر باشن و شما و خانواده گرامی هم پایدار. کماکان منتظر دوره جی کوئری

mrzbluestar replyپاسخ

استاد دوره جاوا اسکریپت را سریعتر شروع کنین
با تشکر فراوان

لقمان آوند

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

pcbrain replyپاسخ

سلام مهندس . دوره اندروید برگزار میکنید ؟

لقمان آوند

سلام
فعلا برنامه ای برای این مورد نداریم .

shahriar rad replyپاسخ

انشاالله همیشه شاد و خندان و سلامت باشین

محمدصدرا نجاتی replyپاسخ

استاد دوره سی شارپ چی شد ؟ کی شروع میشه ؟

لقمان آوند

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

Mahdi replyپاسخ

جلسه بعدی رو کی قرار میدین ؟

لقمان آوند

سلام
ایشالله امروز آخرین جلسه منتشر میشه
ممنون از همراهیتون

pcbrain replyپاسخ

مهندس این اخرین جلسه است ؟

لقمان آوند

جلسه جمع بندی هم هست به جز این که منتشر شده قبلا

محسن محمدرضاپورطبری replyپاسخ

با سلام
استاد گرامی
سوالی داشتم
اینکه کدام یک از دوره های می تونه به من کمک کنه که پلاگین ووکامرس رو بتونم ویرایش کنم و صفحات محصول رو ادیت کنم و شخصی سازی کنم؟

لقمان آوند

سلام
از جناب علیمحمدی بپرسید

sana_esi replyپاسخ

سلام به استاد آوند عزیز
استاد من می خوام از ویژگی transition استفاده کنم ،که چند تا مشکل دارم
1-من توی مثال های که سرچ زدم اکثر ا روی hover یک تگ اعمال شده من میخوام وقتی صفحه اسکرول شد این خصوصیت اعمال بشه و میخوام بدونم چه حالتهای دیگه ای میتونیم استفاده کنیم
2-وقتی به تگم کلاس میدم و روی کلاس از این ویژگی استفاده می کنم روی تگ موردنظراعمال نمیشه فقط زمانی که نام تگ را همراه نام کلاس می نویسم اعمال میشه مشکل از کجاست
باتشکراز شما

لقمان آوند

سلام
ویژگی transition لزوما و فقط برای حالت هاور نیست. این ویژگی تغیر حالت بین مقدار ویژگی های css رو با حالت زیبایی انجام میده.
من توصیه می کنم css3 transition examples رو توی گوگل سرچ کنید و مثال های مختلف رو ببینید که کاربردش براتون جا بیفته در حالت های مختلف.
مورد دومی رو که گفتید متوجه نشدم دقیقا …

Ali B replyپاسخ

ببخشید به نظر شما الان که چند سال از انتشار این دوره گذشته پشتیبانى مرورگرها از این نوع لایه بندى در حدى هست که استفاده از اون رو جدى شروع کنیم؟

لقمان آوند

سلام
بله الان تقریبا اکثر مرورگرهای مطرح پشتیبانی خوبی دارند. فریمورک بوت استرپ هم در نسخه 4 این مدلی استفاده میکنه.

soheil1985 replyپاسخ

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

لقمان آوند

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

soheil1985

سپاس

hossein shabani replyپاسخ

سلام
از آنجا که این دوره در حدود4سال قبل ضبط شده و اینکه در آن گفته شد از grid و felxbox استفاده نمی شود به علت عدم پشتیبانی مرورگر ها .
آیا الان طراحی به این سمت رفته که به جای float از این دستور ها استفاده شود؟

Bakan mohammad replyپاسخ

دوره js جناب دکتر لقمان اوند فوق العاده بود تا حالا خیلی دوره حضوری و غیر حضوری تو زمینه های مختلف شرکت کردم اما تدریس ایشان خیلی دوست داشتم. اگر امکانش هست دوره های فرانت اند از ایشان مخصوص ریکت هم بیشتر برگزار کنین با تشکر

نسرین حقی replyپاسخ

سلام
سپاس از دوره ی خوبتون
چه جوری می تونم آیکون ها اختصاصی خودم رو به فونت تبدیل کنم؟

محمدرضا replyپاسخ

سلام ببخشید شما CSS-SPRITE را آموزش دادین مگه نباید برای آیکون ها از لایبری فونت آسوم استفاده کرد؟
سوال بعد اینکه توی TRANSITION فرق transition-duration و transition-delay چی هست؟

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.