Кнопки социальных сетей с использованием CSS спрайтов (оптимизация изображений)
Еще один урок с использованием 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. Если будут вопросы пишите!