Создание CSS спрайтов для уменьшения времени загрузки страницы.

Что такое CSS спрайты?

Это изображения объединённые в одно целое, которое загружается полностью один раз, а показывается частями, по мере необходимости.

Для чего нужны CSS спрайты?

Во-первых для уменьшения времени загрузки страницы. Так как при загрузке каждого изображения браузер делает запрос к серверу, после этого ждёт от него ответа и только потом загружает изображение. Если таких изображений 10 или больше, то соответсвенно время ожидания будет большим. А если их обьёдинить в одно, то ожидание ответа будет всего 1 раз, вместо 10.

Здесь будет описана процедура создания кнопки RSS с использованием спрайтов.

• Скачаем любую понравившуюся иконку (например 128х128) и откроем её в PhotoShop
• Продублируем слой на новом холсте и обесцветим его (или можно переименовать иконку, открыть ещё раз и обесцветить)
• После чего создадим новый документ (128х256) и перетащим на него обе иконки
• Сохраним

Получится небольшой спрайт высотой 128 и шириной 256 пикселей.

Теперь создадим блок со ссылкой:

<div>
<a class="rssbutton" href="/"> </a>
</div>

И определим ему CSS стили:

a.rssbutton {
display:block;       /*отображается блоком */
width:128px;      /* ширина блока */
height:128px;     /* высота блока  */
background:url('../images/rss-sprite.png') no-repeat;
background-position: 0 0;  /* отсчёт координат x и y  */
}

a:hover.rssbutton {
background-position:-128px 0;
}

В общем получается так:

• Высота и ширина нашего блока 128 на 128 пикселей
• Фон блока это начало изображения, координаты 0, 0
• Фон блока при наведении мышкой это край изображения, координаты -128, 0

В итоге такая кнопка:

Ещё один пример,кнопки добавления в социальные сервисы.

Скачиваем кнопки социальных сервисов, я ограничился тремя. Вконтакте, Facebook и Twitter.
Так же обьединяем их в PhotoShop'е и получаем картинку спрайт.

После этого делаем блок.

HTML код:

<div style="width: 252px; height: 100px; background: #1c1c1c;">
<p style="color:#eee;text-align:center;">
<strong>Поделись с друзьями!!!</strong>
</p>
<a href="#"><div class="vk"> </div></a>
<a href="#"><div class="fb"> </div></a>
<a href="#"><div class="tw"> </div></a>
<div style="clear:both;"></div>
</div>

И CSS классы:

.vk {
width:64px;
height:64px;
float:left;
background:url('../images/social-sprite.png');
background-position:0 0;
margin:0 10px;
}

.fb {
width:64px;
height:64px;
float:left;
background:url('../images/social-sprite.png');
background-position:-64px 0;
margin:0 10px;
}

.tw {
height:64px;
width:64px;
float:left;
background:url('../images/social-sprite.png');
background-position:-128px 0;
margin:0 10px;
}

В итоге получается такая панелька:

Желаю всем успехов в освоении!!!

P.S.: Пользователи не любят ждать! Поэтому делайте ваши сайты быстрыми!