CSS Sprite یکی از تکنیکهای مهم در طراحی وب است که به شما کمک میکند سرعت بارگذاری سایت را افزایش دهید و مدیریت تصاویر را سادهتر کنید.
🎯 CSS Sprite چیست؟
- Sprite یعنی ترکیب چند تصویر کوچک (مثل آیکونها) در یک فایل تصویری واحد.
- به جای اینکه برای هر آیکون یک فایل جداگانه بارگذاری شود، همه آیکونها در یک تصویر قرار میگیرند.
- با استفاده از ویژگی
background-positionدر CSS، بخش مورد نظر از تصویر نمایش داده میشود.
✅ چرا استفاده کنیم؟
- کاهش تعداد درخواستهای HTTP → سرعت بیشتر بارگذاری سایت
- مدیریت سادهتر تصاویر (یک فایل به جای چندین فایل)
- امکان طراحی حالتهای مختلف (مثل hover) در یک تصویر واحد
🛠️ مراحل استفاده از Sprite
1. آمادهسازی تصویر
یک فایل واحد (مثلاً sprites.png) بسازید که همه آیکونها در آن قرار داشته باشند.
مثال: خانه، پروفایل، تنظیمات.
2. ساختار HTML
<nav>
<ul class="ui-menu">
<li class="ui-home"><a href="#">خانه</a></li>
<li class="ui-profile"><a href="#">پروفایل</a></li>
<li class="ui-settings"><a href="#">تنظیمات</a></li>
</ul>
</nav>
3. استایلدهی پایه در CSS
.ui-menu a {
display: block;
width: 50px;
height: 50px;
background-image: url("../images/sprites.png");
text-indent: -9999px; /* پنهان کردن متن */
}
4. تعیین موقعیت هر آیکون
.ui-home a { background-position: 0 0; }
.ui-profile a { background-position: 0 -50px; }
.ui-settings a { background-position: 0 -100px; }
5. افکت Hover
در فایل Sprite، نسخه رنگی آیکونها در سمت راست قرار دارد.
.ui-home a:hover { background-position: -50px 0; }
.ui-profile a:hover { background-position: -50px -50px; }
.ui-settings a:hover { background-position: -50px -100px; }
📚 مرور سریع
- Sprite = ترکیب چند تصویر در یک فایل واحد
- استفاده از
background-positionبرای نمایش بخشهای مختلف تصویر - کاهش درخواستهای HTTP → افزایش سرعت سایت
- امکان طراحی حالتهای hover در همان فایل
🎉 تمرین پیشنهادی
یک Sprite ساده با ۴ آیکون بسازید (خانه، جستجو، پیام، تنظیمات).
برای هر آیکون حالت hover طراحی کنید و در CSS با background-position آنها را مدیریت کنید.