Приветствую Вас на блоге history-of-blog.ru. Эта статья посвящена теме CSS спрайтов, благодаря которым можно добиться классных эффектов в дизайне, при этом не перегружая блог. Наверняка многие блоггеры, когда что-то правили в шаблоне задавались вопросом: а как сделать так, чтобы изображение увеличивалось или менялось при наведении курсора? В этой статье мы ответим на этот вопрос.

Что такое css спрайт?

Спрайт – это прием, в котором несколько изображений объединяют и располагают на одном. Затем, благодаря стилям css указывают какую часть изображения показывать в том или ином случае (например при наведении или клике).

Пример спрайтов:

• Кнопка Rss  в сайдбаре.
• Кнопки “Отправить письмо”, “Я в контакте”, “Я в Twitter” в футере.

Вот пример изображения которое я использовал для спрайта в сайдбаре:

Для наглядности именно на примере этой картинки и будет написана данная статья.

Основным плюсом спрайта является то, что мы создаем одно изображение вместо двух, трех, четырех и так далее. Можно хоть все используемые графические элементы шаблона разместить на одной картинке, а благодаря css задать то, что нужно выводить в конкретном месте. В результате это, большое изображение, получается меньше, чем много маленьких, но это не главное. Главное в том, что браузер кэширует только один url адрес картинки, то есть происходит меньше запросов, соответственно повышается скорость загрузки сайта и не наблюдается различных мелких ляпов.

Вот еще один пример картинки спрайта для facebook:

В качестве визуальных задач, которые выполняет этот эффект являются:

• Изменение изображения при наведении курсора мыши.
• Увеличение изображения при наведении.

В моем случае картинка становится более темнее (контрастнее).

Если Вы хотите воспользоваться данным приемом, то ниже будет приведена подробная инструкция, начиная от создания картинки-спрайта в фотошопе и заканчивая прописывание стилей для нее.

Создаем картинку для спрайта в фотошопе

• Скачиваем изображение.

Мне нужно было создать кнопку, которая ведет на Rss ленту блога: http://feeds.feedburner.com/history-of-blog. Так как иконок Rss довольно много в интернете и можно выбрать такую, которая точно понравится, я решил просто скачать ее. Выбрал вот такую (разрешение 100×100 пикселей):

Обратите внимание: фон картинки должен быть прозрачным!

• Подготавливаем фотошоп.

Открываем картинку в фотошопе:

Если у вас нет линеек по бокам изображения, то включите их:  Просмотр -> Линейки.

• Увеличиваем изображение в два раза по вертикали.

Вся инструкция на картинке:

• Завершаем изображение:

Сохраняем картинку:

Файл -> Сохранить для Web устройств… Сверху выбираем формат PNG-24 и сохраняем.

Картинка готова!

Создаем картинку, которая меняется при наведении курсора

Выбираем то место место, куда хотим вставить картинку и вставляем туда следующую конструкцию:

<a href="http://feeds.feedburner.com/history-of-blog" target="_blank">
<div class="rss">
</div>
</a>

Ссылку вставлять необязательно, если этого не требуется.

Затем открываем файл style.css и в самом конце добавляем:

.rss {
	width:100px; height:100px; background:url(images/rss.png) no-repeat bottom center; float:left; margin-top:5px;
	}
	.rss:hover {
	background:url(images/rss.png) no-repeat top center; float:left;
	}

Данные стили используются мной, не факт что именно Вам они подойдут. Все частные случаи разобрать, увы, невозможно.

Дам некоторые пояснения:

• width – ширина картинки.
• height – половина высоты картинки.
• background – фон (url – адрес до картинки), no-repeat – без повторений, bottom center и top center – какую часть изображения выводить – нижнюю или верхнюю (именно в этом фишка спрайта).
• :hover – стиль при наведении.

Вот в принципе и все! Благодаря css спрайту мы сделали так, что изображение меняется при наведении курсора как это сделано здесь в сайдбаре.