آموزش Image Sprites در CSS

Image Sprites در CSS چیست؟

بطور کلی به مجموعه ای از چندین تصویر / عکس که درون یک تصویر واحد قرار میگیرند Image Sprites می گوییم ، یعنی در واقع اینجوری بگیم به چندین تصویر کوچک شده که در کنار همدیگر در یک تصویر واحد قرار دارند عکس اسپریت شده می گوییم.

خب حالا به چه درد میخوره این Image Sprites ؟! بیشترین فایده ای که میتونه برامون داشته باشه یکی افزایش سرعت بارگذاری صفحه وبمون هست و دیگری کم کردن تعداد درخواست ها به سمت سرور می باشد.

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

خب حالا بریم تا یک نمونه از Image Sprites با همدیگه ببینیم، تصویر زیر نمونه ای از یک تصویر اسپریت شده می باشد ، پس یعنی الان ۱ عدد تصویر داریم ولی داخل همین ۱عدد تصویر ، تعدادی تصویر، بخش یا قسمت یا هرچی که شما اسمشو بزارید داریم.

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

خب همونطور که میبینید تصویر بالا درواقع تصویر اصلی و واحد من هس، خب شاید من دلم بخواد در گوشه ای از سایتم مثلا لوگوی فیسبوک قرمز رنگ ( f ) رو به نمایش درآورم یا مثلا در گوشه دیگه میخوام لوگوی توئیتر ( t ) رو به نمایش درآورم.

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

خب حالا من میخوام با استفاده از دستورات CSS از سمت چپ در ردیف ۴ لوگوی فیسبوک قرمز رنگ رو به نمایش در آورم، بریم ببینیم چجوری میتونیم اینکارو انجام بدیم. لطفا در ادامه و تا پایان این جلسه با من همراه باشید.

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

مثال شماره ۱ : استفاده در تگ DIV ( نمایش ۳ عدد از لوگوهای موجود در تصویر اصلی )

<style>

div.t1{
 width:46px;
 height:50px;
 background-image:url('demo-img-spr.png');
 background-position: -47px -142px;
 background-repeat:no-repeat;
}

div.t2{
 width:46px;
 height:46px;
 background-image:url('demo-img-spr.png');
 background-position:-190px 0;
 background-repeat:no-repeat;
}

div.t3{
 width:46px;
 height:46px;
 background-image:url('demo-img-spr.png');
 background-position:-95px -95px;
 background-repeat:no-repeat;
}

</style>

<style>

div.t1{

width:46px;

height:50px;

background-image:url('demo-img-spr.png');

background-position: -47px -142px;

background-repeat:no-repeat;

}

div.t2{

width:46px;

height:46px;

background-image:url('demo-img-spr.png');

background-position:-190px 0;

background-repeat:no-repeat;

}

div.t3{

width:46px;

height:46px;

background-image:url('demo-img-spr.png');

background-position:-95px -95px;

background-repeat:no-repeat;

}

</style>

مثال های بیشتر از Image Sprites در CSS

مثال شماره ۱ : ایجاد یک منو ( Navigation Bar ) با استفاده از تکنیک Image Sprites در CSS

<body>

<ul id="navlist">
  <li id="m1"><a href="files/user.html"></a></li>
  <li id="m2"><a href="files/car.html"></a></li>
</ul>

</body>

<body>

</ul>

</body>

مثال شماره ۲ : ایجاد یک لیست از آیتم ها با استفاده از تکنیک Image Sprites در CSS – روش دیگری برای قرار دادن عکس / تصویر بجای گلوله های مشکی آیتم های یک لیست وجود دارد که پیشنهاد میکنم از آن روش استفاده نمایید.

<body>

<ul id="mylist">
 <li id="item1">Salam</li>
 <li id="item1">Khobi?</li>
 <li id="item1">Salam</li>
 <li id="item1">Khobi?</li>
</ul>

</body>

<body>

<li id="item1">Salam</li>

<li id="item1">Khobi?</li>

<li id="item1">Salam</li>

<li id="item1">Khobi?</li>

</ul>

</body>

بیشتر بخوانیم:

آموزش Image Sprites در CSS

Image Sprites در CSS چیست؟

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

مثال های بیشتر از Image Sprites در CSS

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Image Sprites در CSS چیست؟

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

مثال های بیشتر از Image Sprites در CSS

مطالب زیر را حتما مطالعه کنید

آموزش انیمیشن‌سازی با CSS

نحوه اضافه کردن کد PHP در وردپرس

دوره رایگان طراحی فروشگاه اینترنتی!

آموزش ایجاد لیست کشویی وابسته به هم در HTML

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

DOM چیست و چه کاربردی دارد؟

دیدگاهتان را بنویسید لغو پاسخ