آموزش کامل Image Sprites در CSS

مقدمه

Image Sprites یک تکنیک بهینه‌سازی تصاویر در CSS است که باعث کاهش درخواست‌های HTTP و افزایش سرعت بارگذاری صفحه می‌شود. با استفاده از این روش می‌توانید چندین آیکون یا تصویر کوچک را در یک تصویر واحد قرار داده و با CSS آن‌ها را نمایش دهید. برای یادگیری کامل CSS و بهینه‌سازی تصاویر، پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی Image Sprites

Image Sprites شامل ترکیب چند تصویر کوچک در یک فایل و استفاده از ویژگی background-position برای نمایش بخش دلخواه تصویر است.

• کاهش تعداد درخواست‌های HTTP و افزایش سرعت بارگذاری
• استفاده از background-image برای نمایش تصویر
• کنترل موقعیت با background-position
• ایجاد افکت‌های هاور با تغییر موقعیت تصویر

مثال عملی با کد

تعریف Sprite برای آیکون‌ها:

.icon {
  width: 32px;
  height: 32px;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

نمایش آیکون اول:

.icon-home {
  background-position: 0 0;
}

نمایش آیکون دوم:

.icon-search {
  background-position: -32px 0;
}

افکت هاور روی آیکون:

.icon-home:hover {
  background-position: 0 -32px;
}

نکات مهم و توضیحات تکمیلی

• استفاده از Image Sprites باعث بهینه‌سازی و کاهش حجم بارگذاری صفحه می‌شود.
• تعیین دقیق width و height برای نمایش صحیح هر بخش ضروری است.
• می‌توان افکت‌های هاور را با تغییر background-position ایجاد کرد.
• در طراحی Responsive، باید اندازه تصاویر و موقعیت‌ها به درستی تنظیم شوند.

ادامه آموزش CSS

برای یادگیری کامل طراحی و استایل‌دهی منوها و Navigation Barها، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.