6
تشکر

چندین تصویر در یک تصویر

CSS3

CSS3

در مطلب “راهکارهای افزایش لود صفحات وب” به تکنیکی اشاره کردیم که باعث افزایش لود صفحات وب میشد. این تکنیک به این صورت بود که چنیدن تصویر که به هم مربوط هستند و از عناصر وبسایت هستند را در یک تصویر بزرگتر قرار میدادیم و آن فقط تصویر را بارگذاری میکردیم که باعث کاهش درخواست های HTTP و در نتیجه افزایش سرعت لود صفحات میشد. در این مطلب به نحوه استفاده از این تکنیک میپردازیم.

icons1

icons1

از همان عکس گوگل برای اینکار استفاده میکنیم تا ملموس تر باشد. همانطور که مبینید در تصویر بالا دو عکس ذره بین وجود دارد. یکی خاکستری زمانی که ماوس روی آن نرفته است و دیگری قرمز برای زمانی که ماوس روی آن رفته است. قرار است اینکار را با استفاده از این عکس انجام دهیم.

خوب ابتدا کدهای HTML را قرار میدهیم.

<div class="icons1 zoom"></div>

این دایو دارای دو کلاس است. کلاس اصلی شامل icons است. در این کلاس ما عکس بالا را به عنوان بکگراند تعریف میکنیم. مانند کد زیر:

.icons1{
    background: url(icons1.png) no-repeat;
}

این کلاس عمومی است یعنی هر عنصری که قرار است از یکی از تصاویر بالا استفاده کند کلاس بالا را به آن میدهیم.

حالا میتوان با استفاده از خاصیت background-position در عکس بالا مانور داد و به هر مکان از عکس که خواسته باشیم رفت. مانند کد زیر:

.zoom{
    width: 16px;
    height: 16px;
    background-position: -1px -133px;
}

در کد بالا ابتدا ما عرض و ارتفاع دایو را px16 تعیین کردیم که برابر با اندازه آیکون ذره بین است. سپس در خط چهارم از خاصیت background-position مکان آیکون ذره بین را در تصویر مشخص کردیم. که پارامتر اول X و پارامتر دوم Y است. این مکان را باید خودتان پیدا کنید. میتوان از Developer Tools گوگل کروم و یا افزونه FireBug برای پیدا کردن مکان مورد نظر استفاده کرد.

خوب قرار بود زمانی که ماوس روی آن رفت آیکون ذره بین قرمز نمایش داده شود. کاری ندارد. فقط کافی است در رویداد hover خاصیت background-position را اصلاح کرد:

.zoom:hover{
    background-position: -21px -133px;
}

با استفاده از اینکار میتوان بسیاری از آیکون های کوچک سایت را که از عناصر وبسایت هستند در یک تصویر قرار داد. به این ترتیب حتی درصد کش شدن آن تصویر بیشتر میشود. در صحت این تکنیک بس که بسیاری از سایت های بزرگ مانند گوگل از این تکنیک استفاده میکنند.

دانلود دمو

 

  • آرش می‌گه:

    عالی بود. خیلی کاربردی و جالبه. مرسی

  • amin می‌گه:

    مرسی جالب بود

  • javid khanlo می‌گه:

    محسن جان خیلی عالی بود


  • نظرات این مطلب بسته است.