دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » دانلود فیلم CSS – نحوه استفاده از روش Image Sprites در CSS
دانلود فیلم CSS - نحوه استفاده از روش Image Sprites در CSS

دانلود فیلم CSS – نحوه استفاده از روش Image Sprites در CSS

در این جلسه از دانلود فیلم CSS نحوه استفاده از Image Sprites را آموزش داده ایم . Sprites یعنی تعدادی از تصاویر را در یک تصویر قرار دهیم و از آن در طراحی سایت استاده کنیم .

Image Sprites چیست ؟

همان طور که در پاراگراف اول توضیح دادم یعنی به جای این که برای هر قسمت از قالب سایت ، از یک تصویر استفاده کنیم میایم آن تصاویر را با استفاده از فتوشاپ در یک تصویر قرار می دهیم و از آن استفاده می کنیم .

حالا شاید براتون سوال باشه مگه مریضیم که تصاویر را در کنار هم قرار بدیم ؟؟؟
در جوابتون باید بگم برای این که حجم تصاویر را پایین بیاریم و همین طور سرعت لود صفحه را بالا ببریم از این روش استفاده می کنیم و در سئو سایت هم خیلی تاثیر داره.

حالا به تصویر زیر توجه کنید :

دانلود فیلم CSS - اسپرایت تصویر

دانلود فیلم CSS – اسپرایت تصویر

می خوایم اون دایره آبی رنگی که توی عکس هستش رو توی صفحه وب نمایش بدیم برای این کار از کد های زیر استفاده می کنیم :

کد HTML :

کد CSS :

اول با استفاده از HTML یک تگ Div تعریف می کنیم و به آن یک آی دی با مقدار Sprite می دهیم و در CSS از این آی دی استفاده می کنیم و برای آن با استفاده ویژگی Background یک تصویر در نظر می گیریم .
مهم ترین نکته در این جا استفاده از background-position است همان اعداد 67px- و 126px- هستند که اولین مقدار عرض تصویر را مشخص می کند یعنی تصویر رو از کدوم عرض نمایش بدیم و مقدار اولیش صفر هست و هرچه به سمت راست میریم عدد رو باید به صورت منفی بنویسیم  و دومین مقدار هم ارتفاع عکس را نمایش می دهد ، یعنی ار کدام ارتفاع عکس را نمایش بدیم و هر چقدر به سمت پایین میریم باید بهش یه عدد منفی بدیم .

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

برای دانلود فیلم CSS از لینک زیر استفاده کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

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



جواب سوال چیه ؟ *