Еще один урок с использованием CSS спрайтов. Мы будем использовать кнопки социальных сетей. Используя данную технику можно значительно оптимизировать изображения на Вашем сайте.

Просмотр Скачать

Онлайн ресурсы для создания CSS спрайтов, например http://spritepad.wearekiss.com/ или http://www.spritecow.com/. Впрочем, вы без труда найдете те, что подходят вам. Здесь я буду использовать уже готовые  CSS спрайты. Вот они:

Структура html 

<div class="box">
    <div class="click"></div>
	<a href="http://vk.com" target="blank" title="ВКонтакте"><div class="vk"></div></a>
	<a href="http://yandex.ru" target="blank" title="Яндекс"><div class="ya"></div><a/>
	<a href="http://mail.ru" target="blank" title="Мой Мир"><div class="ma"></div><a/>
</div>

В общий контейнер div помещены контейнеры div социальных кнопок с переходом.

CSS структура для использования спрайтов

body{
	background: url('fon.png');
	color: #1aa5ca;
	}

.box
{
	margin: 250px;
	padding: 25px;
	background: #;
	text-indent: -9999px;
	display: inline-block;
	
}

.click{
	background: url('click.png');
	width: 200px;
	height: 86px;
	display: block;
}

.vk{
	background: url('vc.png');
	width: 51px;
	height: 52px;
	margin: 10px;
	background-position: 0 0px;
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s; /* Firefox 4 */
	-webkit-transition: opacity 0.5s; /* Safari and Chrome */
	-o-transition: opacity 0.5s; /* Opera */
	opacity: 0.6;
	float: left;
}

.vk:hover  {
	background: url('vc.png');
	width: 51px;
	height: 52px;
	background-position: 0 -51px;
	opacity: 1;
}

.ya{
	background: url('ya.png');
	width: 50px;
	height: 50px;
	margin: 10px;
	background-position: 0 0px;
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s; /* Firefox 4 */
	-webkit-transition: opacity 0.5s; /* Safari and Chrome */
	-o-transition: opacity 0.5s; /* Opera */
	opacity: 0.6;
	float: left;
}

.ya:hover  {
	background: url('ya.png');
	width: 50px;
	height: 50px;
	background-position: 0 -50px;
	opacity: 1;
}

.ma{
	background: url('ma.png');
	width: 51px;
	height: 52px;
	margin: 10px;
	background-position: 0 0px;
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s; /* Firefox 4 */
	-webkit-transition: opacity 0.5s; /* Safari and Chrome */
	-o-transition: opacity 0.5s; /* Opera */
	opacity: 0.6;
	float: left;
}

.ma:hover  {
	background: url('ma.png');
	width: 51px;
	height: 52px;
	background-position: 0 -51px;
	opacity: 1;
}

Указываем background-position: 0 0px;. Заметьте, я ставлю opacity 0.6, немного прозрачности. При наведении opacity: 1;, все это происходит за (0,5s) transition: opacity 0.5s;. При наведении изменилась позиция изображения background-position: 0 -51px;. 

Используя данную технику можно значительно оптимизировать изображения (меньше обращений к серверу).

P.S. Если будут вопросы пишите!