подписки на обновления

CSS спрайты на примере установки на блог кнопок-ссылок «подписка на обновления»

подписки на обновленияПродолжаем социализировать наши сайты.Читателям часто удобно получать обновления блогов прямо в их любимую социальную сеть. Давайте дадим им такую возможность. Для этого нужно зарегистрироваться в этих самых соц.сетях. Можно создать профиль администрации или автора сайта, а можно публичную страницу компании или проекта. В дальнейшем нужно будет регулярно публиковать в новостные ленты профилей новости и обновления сайта, чтобы ваши подписчики могли с ними ознакомится. Это, кстати, удобно делать с помощью установленных нами ранее кнопок «поделиться статьёй». Ссылки на социальные профили оформим с помощью приёма CSS sprite или спрайты на CSS.

Что такое CSS спрайты и спрайты в общем?

Спрайты — набор маленьких картинок, которые объединены в одну. Это делается для того, чтобы не загружать 10-20 маленьких легковесных картинок с сервера на компьютер пользователя, а отдать их одним потоком, объединив в один файл. Спрайты в веб-дизайн пришли из игровой индустрии, там они использовались для создания анимированной 2D графики, например стреляющих монстров и т.п.

пример спрайтов в играхВ дизайне сайтов тоже применяют приём, при котором различные иконки объединяют в один файл, например вот так:

пример спрайта для сайтаКак можно увидеть в этом примере в один файл собрали не только иконки соц.сетей, но и другие элементы дизайна, такие как стрелочки, кнопки «мне нравится» и т.п. Но объединять абсолютно всю графику, которая используется на сайте в один спрайт не совсем правильно. Лучше поделить элементы на группы и подгружать только необходимые на определённом типе страниц.

принцип работы css спрайтов

На этой картинке я постарался схематически показать принцип работы css спрайтов. В случае когда блок больше фоновой картинки, то она по умолчанию помещается в левый верхний угол, если в css стилях задано no-repeat. Но мы можем менять положение фоновой картинки относительно левого верхнего угла блока. Особенно это полезно, если блок, например, по размеру равен отдельной иконке. У нас семь иконок размером 32х32 каждая. Они расположены по горизонтали, соответственно по вертикали нам положение фона изменять не нужно. Задаём положение фонового рисунка -32 px получаем в блоке иконку Твиттера, -64 px — иконку Фейсбук и т.д.

Как сделать кнопки-ссылки на профили в социальных сетях?

После регистрации в соответствующих сообществах и в FeedBurn я получил ссылки на профили, адрес моей RSS ленты и ссылку на форму подписки для получения обновлений по почте. Затем я их объединил в следующий код и вставил его в текстовый виджет в панели администрирования WordPress:

<div class="spmenu">
<A HREF="http://feeds.feedburner.com/seorubl" rel='external nofollow' title="Подписаться на RSS ленту"> <span class="sprite_rss">&nbsp;</span>&nbsp;</A>
<A HREF="https://twitter.com/Seorubl" rel='external nofollow' title="Следовать в Twitter"> <span class="sprite_twitter">&nbsp;</span>&nbsp;</A>
<A HREF="https://plus.google.com//102967354858915717090?rel=author" rel='external nofollow' title="Подписаться на G+ ленту"> <span class="sprite_gplus">&nbsp;</span>&nbsp;</A>
<A HREF="http://facebook.com/seorubl" rel='external nofollow' title="Читать в Facebook"> <span class="sprite_fbook">&nbsp;</span>&nbsp;</A>
<A HREF="http://feedburner.google.com/fb/a/mailverify?uri=seorubl&amp;loc=ru_RU" rel='external nofollow' title="Получать обновления на почту"> <span class="sprite_email">&nbsp;</span>&nbsp;</A>
</div>

В анкоре ссылок в этом коде используется тег <span>: <span>&nbsp;</span>. Именно он и является тем самым блоком, в котором отображается нужная иконка. Сдвиг фонового изображения задаётся в файле стилей style.css через свойство background-position:

/* Кнопки подписки на обновления*/

.spmenu {
	padding: 0px;
	margin: 0px;
	color: #4682B4; 
	text-align: left;
	font-size: 100%;
	}

.spmenu a, .spmenu a:hover {
	cursor: pointer;
	color: #1E90FF;
	text-decoration: none;
	font-size: 100%;
	}

.spmenu span  {
	display: inline-block; width: 32px; height: 32px; 
	background: url("images/icons.png") no-repeat;
	}

.spmenu span.sprite_gplus {background-position: 0px 0px;}
.spmenu span.sprite_twitter {background-position: -32px 0px;}
.spmenu span.sprite_fbook {background-position: -64px 0px;}
.spmenu span.sprite_rss {background-position: -96px 0px;}
.spmenu span.sprite_email {background-position: -128px 0px;}

Таким образом для каждого элемента <span> внутри класса «spmenu» задаётся фоновое изображение icons.png, которое представляет из себя набор иконок. Заметьте, что <span> является строчным встроенным элементов по спецификации HTML, поэтому, чтобы задать ему строгие размеры (ширину и высоту), мы должны изменить способ его отображения на блочный в CSS свойствах (строчка: display: inline-block;). Размеры блока 32х32 как раз соответствуют формату наших иконок.

Часто вместо <span> используют теги <i>, <img>, <em> и т.п., я считаю этот подход неправильным. Зачем изменять стили стандартных тегов, если есть универсальный <span>. А тег <img> вообще создаёт лишний запрос к серверу, а мы как раз, применяя спрайты, пытаемся сократить число этих запросов.

Где взять иконки для спрайта?

  1. Нарисовать самому.
  2. Поискать в поисковике среди картинок.
  3. В Сети есть специальные подборки иконок, которые часто раздаются бесплатно.
  4. Многие соц.сети и сервисы выставляют на сайтах официальные логотипы и иконки, которые можно использовать в своих приложениях.
  5. Чтобы сделать файл спрайтов иконок соц.сетей автоматически, можно воспользоваться сервисом share42.com. Выбираем иконки в нужном порядке, сохраняем архив со скриптом, распаковываем и видим картинку icons.png — готовый файл спрайтов.

Спрайты кроме отображения иконок полезны при разработке анимированного меню, когда при наведении на его пункт, он либо затемняется, либо загорается. Тогда в файле спрайтов хранят два набора кнопок и по событию «наведение мыши» динамически при помощи JS меняют положение фонового рисунка.

Обещанное вначале заметки меню кнопок-ссылок на каналы получения обновлений сделано, на этом заканчиваю статью. Подписывайтесь на обновления, самое интересное только начинается.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *