نمایش چندین نماد با استفاده از یک تصویر در CSS Sprites

بازدید : 57

امروزه استفاده از تصاویر و نمادهای متعدد در وب‌سایت‌ها امری عادی و البته برای انتقال مفهوم مورد نظر ضروری شده است. یکی از راه‌های کاهش درخواست‌های سرور یا فراخوان و بالطبع افزایش سرعت بارگزاری وب‌سایت، ذخیره تمام آیکون‌های وب در یک تصویر واحد و استفاده از CSS است تا فقط بخشی از تصویر مورد نیاز در مکان مورد نظر در صفحه نمایش داده شود. تکنیکی که معمولاً توسط طراحان برای نمایش نمادهای یک تصویر استفاده می‌شود معروف به CSS sprites است.

نمایش چندین نماد با استفاده از یک تصویر در CSS Sprites

ما در مثال خود از نمادهای گرانژ grunge استفاده خواهیم کرد البته شما می‌توانید از هر تصویر دیگری استفاده کنید.

آیکون‌های وب، جهت نمایش در صفحه

آیکن‌هایی که برای نمایش از طریق CSS استفاده خواهیم کرد


راه اندازی

ابتدا باید ابعاد تصویر را بدست بیاوریم. ابعاد تصویر ما ۲۰۴ پیکسل عرض و ۱۳۶  پیکسل ارتفاع دارد. یک محاسبه ساده ریاضی به ما می‌گوید قد هر آیکون ۶۸ پیکسل (۲ ÷ ۱۳۶) و پهنای آن نیز ۶۸ پیکسل (۳ ÷ ۲۰۴) است.

با استفاده از CSS، هر نماد را در برچسب div خود نمایش می دهیم. برای این کار از مقادیر سمت چپ و بالا از ویژگی موقعیت پس زمینه(background-position) استفاده خواهیم کرد. ویژگی موقعیت پس زمینه، موقعیت اولیه یک تصویر پس زمینه را تعریف می‌کند. می توانید مشخصات خاصیت تصویر پس زمینه را در w3c.org پیدا کنید. من ترجیح می‌دهم قبل از نوشتن CSS، هرکدام از نمادهای بالا و چپ را نشان دهم. این کار را بسیار راحت می‌کند. در اینجا تصویر با مختصات ترسیم شده برای شما وجود دارد.

این مختصات، بالا و چپ را نشان می‌دهد تا تصویر با استفاده از CSS نمایش داده شود.

این مختصات بالا و چپ را نشان می‌دهد تا تصویر با استفاده از CSS نمایش داده شود.


اعداد داخل تصویر بالا مختصات دکارتی یا قطبی نیستند. آنها نوع خاصی از مختصات هستند که پایین‌ترین و بالاترین حاشیه تصویر داده شده را تعیین می‌کنند. حاشیه‌های منفی تصویر را به سمت بالا و چپ تغییر می‌دهد و اولین مقدار عرض تصویر را مشخص می‌کند یعنی تصویر را از کدام عرض نمایش بدهیم و مقدار اول آن صفر هست و هرچه به سمت راست برویم عدد را باید به صورت منفی بنویسیم و دومین مقدار هم ارتفاع عکس را نمایش می‌دهد، یعنی ار کدام ارتفاع عکس را نمایش بدهیم و هر چقدر به سمت پایین برویم باید به آن یه عدد منفی بدهیم. بنابراین مختصات ۶۸- ، ۱۳۶- هنگام استفاده در CSS با مقدار background-position:-136px -68px  حاشیه تعیینی را ایجاد می‌کند تا تصویر در گوشه سمت چپ بالای نماد صفحه نشان داده شود. بنابراین با در نظر داشتن این موضوع، اکنون می‌توانیم ظروف خود را برای نمادها بسازیم.

وقتی در حال توسعه هستم می‌خواهم CSS خود را به توابع منطقی تبدیل کنم. در این حالت می خواهم یک کلاس برای ظروف ایجاد کنم که شامل آیکون باشد. چیزی شبیه این باید درست انجام شود.

.icon {
height:68px;
width:68px;
background-image:url('images/web_icons.png'); /*your location of the image may differ*/
}

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

.person {background-position:0px 0px;}
.info {background-position:-68px 0px;}
.upload {background-position:-136px 0px;}
.document {background-position:0px -68px;}
.check {background-position:-68px -68px;}
.cart {background-position:-136px -68px;}

آخرین مرحله برای نمایش این‌ها، ایجاد ظروف است، باید شش ظرف جداگانه ایجاد کنیم و کلاس‌های مناسب را اضافه کنیم.
ما از تگ div برای نمایش آیکون‌ها استفاده می‌کنیم.


<div class="icon person">
</div>
<div class="icon info">
</div>
<div class="icon upload">
</div>
<div class="icon document">
</div>
<div class="icon check">
</div>
<div class="icon cart">
</div>

در مثال بالا، کلاس icon. ،من یک صفت به کلاس داده‌ام تا ویژگی‌های آنرا (attribute) نشان دهد. استفاده از کلاس یک روش عالی برای نشان دادن مقادیر در CSS بدون نیاز به تکرار کد است.
تصویر زیر به شما نشان میدهد که با استفاده از این کد ایکون‌ها در مرورگر چگونه نمایش داده خواهند شد.

محل قرارگیری آیکون در مرورگر با کد CSS

نتیجه

با استایل‌دهی در CSS می‌توانید بخش‌های مجزای یک تصویر را در قسمت‌های مختلف صفحه بدون محدودیت به راحتی نمایش دهید. با استفاده ویزگی‌های فلوت و آبسولت پوزیشن می‌توانید محل‌های قرارگیری را تعیین کنید. وبا دادن hover: وقتی مکان نما روی آن عنصر قرار گرفت، از تغییر تصویر استفاده کنید.

امروزه سایت‌های زیادی وجود دارند که از CSS sprites در "طراحی وب" استفاده گسترده میکنند. در اصل برای بسیاری از گرافیک‌های صفحه اصلی خود از یک تصویر بزرگ استفاده می‌کنند. علاوه بر فراخوان کمتر می‌تواند به عنوان نوعی رمزگزاری درآینده استفاده شود.

مطالب پیشنهادی:

مهارت‌های مورد نیاز طراحی وب پیشرفته در آینده

برای طراحی وب کدامیک مناسب است Flash ، HTML5 یا Javascript؟ 

اشتباهات معمول در طراحی UI که وب‌سایت شما را ناکام می‌گذارد