Хорошую вещь я откопал. Интерфейсные иконки, заключенные в один спрайт. Если кто не знает, что такое спрайт - это одна картинка, в которой есть несколько изображений, отображающиеся на сайте отдельно посредством css. Не знаю, понятно ли я объяснил, но вы на примере этой сборке можете узнать, что такое спрайт.

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

Давно я не выкладывал иконки, наверное потому, что все иконки, которые были мне нужны уже были на моем сайте:)) но вот понадобились иконки в одном спрайте и я нашел эти и делюсь ими с Вами. Кстати отличительная черта и самый существенный плюс спрайта, это то, что если загрузилась картинка спрайт один раз, то все элементы этого спрайта больше не будут подгружатся и соответственно будут уменьшать скорость html страницы. Обычно спрайты используют для кнопок, которые меняются при наведении. Иногда бывает такое, что кнопка в обычном состоянии и кнопка при наведении - это две разные картинки и вы могли заметить на каких-либо сайтах, когда наводишь на кнопку, изображение появляется не сразу - оно подгружается. Со спрайтом такой проблемы не будет. Еще один плюс спрайтов - экономия места. Скажем у вас есть какой то плагин, типа слайдера, и к нему идут несколько десятков изображений (уголки рамок, сами рамки, стрелки, буллиты, икокни соц сетей и так далее). Так вот, когда они все заключены в одну картинку, это намного удобнее и аккуратнее смотрится, если бы они валялись в папке с изображениями по отдельности.

Что изображено на этих иконках

По обычаю расскажу, какие изображения есть среди этих иконок, чтобы вы могли найти нужную иконки по поиску, который у меня находитсья в главном меню наверху сайта: замок, робот, алмаз или драгоценный камень, монитор, подарок, микрофон, ракета, мороженное, человек, часы, ножницы, иконки всяких социальных сетей и сервисов, гаечные ключи, лук, кошелек, ipad, арбуз, кошелек, джойстик игровой, калькулятор, клоун, лампочка, лук, мусорное ведро или корзина, письмо, глобус, бургер, авто, облако, фотоаппарат и многое многое другое. Всего порядка 100-а изображений.

Подключаются эти иконки очень просто:

1. Подключаем css файл sprite.css таким образом: создаем папку css в корне вашего сайта, закидываем туда этот файл css, а на странице, где будут отображаться иконки между тегами вставляем следующий код:

3. В месте, где вы хотите поставить иконку, вставляем код:

4. Вы можете пользоваться моей демо, там есть все представленные иконки и с помощью google chrome просмотрщика элемента определить название иконки и вставить вместо "название иконки". Допустим, иконка с изображением часов имеет такой код:

Ну я думаю, что разобраться, как вставлять эти икокни из спрайта не сложно, тем более я уже все объяснил:)) Приятного пользования!

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

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

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

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

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

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

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

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

В анкоре ссылок в этом коде используется тег : . Именно он и является тем самым блоком, в котором отображается нужная иконка. Сдвиг фонового изображения задаётся в файле стилей 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;}

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

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