Кнопки социальных сетей с использованием CSS спрайтов (оптимизация изображений). Кнопки социальных сетей с использованием CSS спрайтов (оптимизация изображений) Как сделать кнопки-ссылки на профили в социальных сетях

• изменение размера не влияет на качество,
• отлично отображаются на всех девайсах, в том числе и с Retina-дисплеями,
• применение практически любых стилей применимых к тексту, таких как фон, цвет, тени и т.п.,
• простота реализации;

1. RONDO SOCIAL ICON FONT

2. Fontello - icon fonts generator

3. Mono Social Icons Font

4. Pixeden - Social Icon Pack

Здравствуйте, уважаемые читатели блога сайт. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно , да и будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из , о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).

А также я посчитал уместным и по Емайлу.

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

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

Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и . Нам такое расточительство не подходит, тем более, что уже давно .

Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).

Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 , поэтому мой спрайт выглядит так ( , правда, туда еще затесался, но это не беда):

Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из . В моем случае он называется sidebar.php. Html код при этом получается крайне простой:

Ну, и самое интересное. С помощью мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.

Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Октябрь 29, 2019 Запись была обновлена

Юрий Немец

Эффекты кнопок социальных сетей для сайта

Как Вы думаете, можно ли совместить кнопки социальных сетей и изображения? Чтобы и то и другое смотрелось очень красиво и креативно. Да, можно это сделать очень интересным способом. И даже не одним, а несколькими. А если быть точнее, то в статье Вы найдете 12 способов сделать классные эффекты для кнопок социальных сетей при наведении на изображение. В некоторых случаях необходимо не просто наведение, а еще и клик мыши, что также добавляет интерактива. Необычный способ выделить свой сайт, используя именно такие эффекты при наведении на изображение.

Все 12 примеров смотрите и скачивайте по ссылке ниже:

Скачать

Кстати, по поводу эффектов при наведении, на сайте по этой теме есть еще парочка статей:

Понравился эффект — используйте!

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

(наведите на изображение)

Довольно привлекательный способ выделить самые важные изображения как на сайте так на одностраничном продающем сайте. Но, как я уже писал, эффектов значительно больше (12!).

Шаг 1 — HTML

Для иконок, которые Вы видите на кнопках социальных сетей, используется FA (Font Awesome). Подключаются эти иконки одной строкой между блоками :

После того, как Вы скачали все исходники, необходимо выбрать понравившийся эффект. Мой эффект находится в файле index.html . В этом же файле находятся и все необходимые стили для того, чтобы создать эффект при наведении.

Вся необходимая структура есть. Осталось задать только стили в CSS. Поэтому переходим ко 2-му и, одновременно, последнему шагу.

Шаг 2 — CSS

Стили находятся в каждом HTML файле между блоками . То есть в каждом файле с разными эффектами, в этом блоке вверху документа находятся соответствующие стили.

Вам необходимо взять эти стили и поместить их в Ваш файл стилей:

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

Внимание! После того, как Вы вставите CSS код в свой файл стилей, кнопки могут отображаться не совсем так, как на примере. Это может быть связано с тем, что в Вашем файле стилей заданы другие стили для элементов и классов, которые используются в демо.

Вывод

Как правило, креатив всегда приветствовался. Я думаю здесь каждый для себя сможет выбрать один эффект из 12 и использовать в дальнейшем в собственных проектах.

Хорошую вещь я откопал. Интерфейсные иконки, заключенные в один спрайт. Если кто не знает, что такое спрайт - это одна картинка, в которой есть несколько изображений, отображающиеся на сайте отдельно посредством 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 как раз соответствуют формату наших иконок.

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