مباحث پیشرفته CSS - transition , animation ، sprites و ...

دسته بندی: آموزش
زمان مطالعه: ۱ دقیقه
۱۹ فروردین ۱۳۹۴

در این جلسه از دوره آموزش طراحی وب خواهیم پرداخت به مباحث پیشرفته زبان 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
:: توجه

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

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

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

محمدرضا

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

نسرین حقی

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

Bakan mohammad

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

hossein shabani

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

Milad Hassani

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

soheil1985

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

soheil1985

سپاس

لقمان آوند

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

Ali B

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

لقمان آوند

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

sana_esi

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

لقمان آوند

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

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

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

لقمان آوند

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

pcbrain

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

لقمان آوند

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

Mahdi

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

لقمان آوند

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

محمدصدرا نجاتی

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

لقمان آوند

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

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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