آموزش CSS Image Sprites

12 جولای 2021

Sprites تصویر

Sprite تصویر مجموعه ای از تصاویر است که در یک تصویر واحد قرار می گیرد.

بارگیری یک صفحه وب با تصاویر بسیار طولانی مدت طول می کشد و چندین درخواست سرور ایجاد می کند.

استفاده از sprites تصویری باعث کاهش تعداد درخواست های سرور و صرفه جویی در پهنای باند می شود.


Sprites تصویر – یک مثال ساده

به جای استفاده از سه تصویر جداگانه ، ما از این تصویر واحد استفاده می کنیم (“img_navsprites.gif”):

تصاویر ناوبری

با CSS می توانیم فقط بخشی از تصویر مورد نیاز خود را نشان دهیم.

در مثال زیر CSS مشخص می کند که کدام قسمت از تصویر “img_navsprites.gif” نشان داده شود:

مثال

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

مثال توضیح داده شده:

  • <img id="home" src="img_trans.gif">– فقط یک تصویر شفاف کوچک را تعریف می کند زیرا ویژگی src نمی تواند خالی باشد. تصویر نمایش داده شده تصویر پس زمینه ای است که ما در CSS مشخص کرده ایم
  • width: 46px; height: 44px; – بخشی از تصویر را که می خواهیم استفاده کنیم مشخص می کند
  • background: url(img_navsprites.gif) 0 0; – تصویر پس زمینه و موقعیت آن را تعریف می کند (چپ 0 پیکسل ، 0 پیکسل بالا)

این ساده ترین راه برای استفاده از spritit های تصویری است ، اکنون می خواهیم آن را با استفاده از پیوندها و افکت های شناور گسترش دهیم.


Image Sprites – یک لیست پیمایش ایجاد کنید

ما می خواهیم از تصویر sprite (“img_navsprites.gif”) برای ایجاد یک لیست پیمایش استفاده کنیم.

ما از یک لیست HTML استفاده خواهیم کرد ، زیرا می تواند یک لینک باشد و همچنین از یک تصویر پس زمینه پشتیبانی می کند:

مثال

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

مثال توضیح داده شده:

  • #navlist {position: relative؛} – موقعیت برای تنظیم موقعیت مطلق در داخل تنظیم شده است
  • #navlist li {margin: 0؛ padding: 0؛ list-style: none؛ position: absolute؛ top: 0؛} – حاشیه و padding روی 0 تنظیم می شوند ، سبک list حذف می شود و همه موارد لیست به طور مطلق قرار می گیرند
  • #navlist li، #navlist a {height: 44px؛ display: block؛} – ارتفاع همه تصاویر 44px است

اکنون موقعیت و سبک را برای هر قسمت خاص شروع کنید:

  • #home {سمت چپ: 0px ؛ عرض: 46px؛} – تا انتها به سمت چپ قرار دارد و عرض تصویر 46px است
  • #home {background: url (img_navsprites.gif) 0 0؛} – تصویر پس زمینه و موقعیت آن را تعریف می کند (چپ 0 پیکسل ، 0 پیکسل بالا)
  • #prev {سمت چپ: 63px؛ عرض: 43px؛} – 63px در سمت راست قرار دارد (# عرض خانه 46px + مقداری فضای اضافی بین موارد) و عرض 43px است.
  • #prev {background: url (‘img_navsprites.gif’) -47px 0؛} – تصویر پس زمینه 47 پیکسل را در سمت راست تعریف می کند (عرض صفحه 46 پیکسل + تقسیم خط 1 پیکسل)
  • # بعدی {سمت چپ: 129px؛ عرض: 43px؛} – موقعیت 129px در سمت راست قرار دارد (شروع # پیشین 63px + # عرض پیشین 43px + فضای اضافی است) و عرض 43px است.
  • #next {background: url (‘img_navsprites.gif’) -91px 0؛} – تصویر پس زمینه 91 پیکسل را در سمت راست تعریف می کند (# عرض خانه 46 پیکسل + تقسیم خط 1 پیکسل + # عرض پیشین 43 پیکسل + تقسیم خط 1 پیکسل)


Image Sprites – Hover Effect

اکنون می خواهیم یک اثر شناور به لیست پیمایش خود اضافه کنیم.

نکته::hover انتخاب را می توان بر روی همه عناصر، نه تنها بر روی لینک استفاده می شود.

تصویر جدید ما (“img_navsprites_hover.gif”) شامل سه تصویر ناوبری و سه تصویر برای استفاده برای جلوه های شناور است:

تصاویر ناوبری

از آنجا که این یک تصویر منفرد است و نه شش پرونده مجزا ، هنگامی که کاربر بر روی تصویر حرکت می کند تاخیری در بارگیری وجود نخواهد داشت .

ما فقط سه خط کد برای اضافه کردن اثر شناور اضافه می کنیم:

مثال

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

مثال توضیح داده شده:

  • #home a: hover {background: url (‘img_navsprites_hover.gif’) 0 -45px؛} – برای هر سه تصویر شناور ما موقعیت پس زمینه یکسانی را تعیین می کنیم ، فقط 45 پیکسل پایین تر

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.