CSS спрайты на примере установки на блог кнопок-ссылок «подписка на обновления. Симпатичные интерфейсные иконки, заключенные в один спрайт Спрайты социальных сетей

Представляем вашему вниманию ТОП-30 лучших наборов иконок социальных сетей для вашего сайта, блога, интернет-магазина или другого веб-ресурса.

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

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

Обычно иконки размещаются в футере веб-сайта или блога.

Приветствуется использование до 5-6 значков.

Old Bottle Crowns Icon Set

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

Качественная прорисовка элементов и яркое оформление обязательно привлекут посетителей веб-ресурса ознакомиться и с вашими страницами в социальных сетях.

Набор состоит из 20-ти значков, каждый из которых оформлен как отдельный рисунок в формате PNG.

Vintage Social Media Stamps

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

Форматы файлов – PNG, PSD. Разрешение каждого значка - 256x256px.

Wooden Social

Сет состоит из десяти значков для социальных медиа.

Также, присутствует рисунок для RSS- ленты и подписки на рассылку по электронной почте.

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

Формат по умолчанию – PNG.

SocialMate

Набор универсален и подходит для использования на любом сайте или в веб-проекте.

Для персонального редактирования файлов к каждому элементу приложен оригинальный файл PSD.

Разрешение картинок составляет 128x128px, 64x64px и 32x32p.

Vector 3D Social Icons

3D иконки от Vector представляют полный набор элементов для футера вашего сайта, который распространяется совершенно бесплатно.

Яркий и запоминающийся дизайн привлечет новых подписчиков для ваших страниц в соцсетях.

Формат файлов – PNG (плюс оригинальный документ PSD). Разрешение - 256x256px.

Social Sketches

Social Sketches – это бесплатный набор оригинальных иконок-стикеров для кликабельных ссылок на соцсети.

Уникальный вид изображений привлечет внимание пользователей ресурса.

Содержимое набора:

16 значков;
6 разных разрешений для каждого элемента (32px, 48px, а также 64px, 128px, 256px, и 512px);
Стандартный формат PNG.

Socialize

Socialize - это набор из 12 круглых аккуратных иконок для соцсетей. Заметьте, для каждого сайта предлагается сразу несколько изображений.

Таким образом, можно выбрать наиболее подходящий элемент под стиль вашего сайта или блога.

Изображения векторного типа сохранены в формате SVG.

Somacro

Somacro – это 45 качественных иконки для всех популярных социальных медиа, включая , Facebook , Twitter , Steam , а также платежные системы Paypal, Webmoney.

Большое количество иконок позволят оформить футеры крупного-интернет магазина или персонального сайта в одном стиле.

Разрешение файлов - 500×500 пикселей. Каждая картинка доступна с рамкой или без рамки, что в итоге составляет 90 разных файлов.

Bulb Social Media Icons

Bulb Icons – это популярный набор значков для ресурсов с научной тематикой.

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

Рис.9

Transparent Social Media Icons

Иконка отлично сочетается с любым сайтом, независимо от его дизайна и тематики.

Подойдет набор для любителей минимализма.

Единственное, картинки могут слиться со слишком светлым фоном.

Доступные размеры: 48, 56, 72, 96, 128, 256 и 512 px. Количество изображений в архиве – 40.

Circle Flat Icons Retina-ready

Каждая картинка имеет яркую цветовую гамму и отображает стиль каждой из социальных сетей.

В наборе присутствует 65 уникальных изображений для сайтов, популярных программ, игровых площадок других инструментов.

Social Media Icon Stickers

Яркие иконки для сайтов от Vectezy станут отличным инструментом для привлечения пользователей на социальные страницы вашей компании.

Картинки можно использовать независимо от общего оформления веб-страниц.

Они будут смотреться одинаково хорошо как на темном, так и на светлом фонах.

Shaded Social Media Icons

Набор Shaded Social Media Icons содержит 40 изображений с эффектом тени.

Яркое оформления отлично подойдет для использования на сайтах со светлым оформлением.

Архив можно скачать в двух вариациях.

Первая имеет свободную лицензию, вторая – содержит исходники и продается за 3 доллара.

Доступные разрешения - 48, 56, 72, 96, 128 и 256 px. Формат - PNG.

Simple Line Icons

Все изображения доступны только в белом цвете, поэтому набор нужно использовать на футерах с темным фоном.

Доступны не только значки популярных сайтов, но и картинки для платежных систем, Wi-Fi и многие другие.

Iconmonstr

Iconmonstr – это целый ресурс, на котором разработчик регулярно публикует свои уникальные значки для сайтов.

Среди более чем 500 картинок вы найдете черно-белые иконки для любого сайта или инструмента.

Скачать все файлы можно бесплатно.

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

Social Media Long Shadow Icon Set

Набор Social Media Long Shadow Icon Set содержит 35 файлов для разных социальных сетей. Каждая иконка имеет форму квадрата, выполнена в цветовой гамме обозначаемого ресурса и прекрасно подойдет для сайтов любой направленности.

Архив содержит только файлы в формате PNG.

Material Design Social Icons

8 векторных иконок в формате SVF позволят вам не только дополнить свой сайт привлекательными кликабельными ссылками, но и внести свои коррективы в файл. Вы можете изменить разрешение, добавить тень, поменять цвет, настроить прозрачность и многое другое.

Изображения доступны для сайтов Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+.

Picons Social

Picons Social – это профессиональный набор иконок соцсетей с более чем 60 разными изображениями.

Выполнены все картинки в черно-белом формате и имеют приятный и «легкий» дизайн.

Отлично подходят для универсального использования на сайтах со светлым оформлением.

В архиве доступны сразу несколько форматов для каждого значка:

.PSD;
.EPS;
.PDF;
.PNG;
.EMF.

Circle & Round Social Media Icons

16 иконок для социальных медиа станут отличным дополнением для вашего сайта.

Яркое оформление позволит красиво выделить поле ссылок на страницы в других ресурсах.

Размер каждого изображения – 58и 40 пикселей.

Также, присутствуют исходники для редактирования в Photoshop.

Flat Minimalistic Social Media Icons

Архив содержит 85 минималистических необъемных иконок для соцсетей.

Каждая из картинок имеет 4 разных стиля, что позволяет выбрать наилучшее оформление, которое впишется в дизайн веб-страницы.

Иконки имеют сразу два формата – PNG и SVG.

Доступны цветные и чёрно-белые версии.

Hex Social Media Icons

Данный набор иконок выполнен в виде шестиугольников.

Разработчик передал цветовую гамму каждой соцсети.

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

Всего доступно 32 уникальных оформления.

Flat Social Media Icon Vector Pack

Есть иконки как для видеохостингов, RSS, платежных систем, разделов сайта блоггера.

Также, в наборе присутствуют иконки для обозначения HTML5, CSS.

Формат файлов - Png. Разрешение – 58 пикселей.

Advanced Flat Social Media Icons

Каждый значок имеет эффект тени и выполнен в яркой цветовой гамме.

Доступные размеры - 72, 96, 128, 256 и 512 px.

Каждый элемент доступен в оформлении для светлых и темных тонов сайта.

iOS Style Social Media Icons

Скачивайте архив с сайта разработчика и получайте исходники для персонального редактирования содержимого.

Доступные форматы - .EPS и.AI.

Grunge Flat Social Icons

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

Каждый файл доступен в формате PSD.

Geometric Social Media Icons

Бесплатные иконки для социальных медиа, которые выполнены в геометрическом стиле, станут удачным дополнением для магазина косметики, парфюмерии, блога.

Стандартная цветовая гамма иконок выполнена в светлых полутонах.

Также, вы можете выбрать более яркие или темные варианты стилизации.

Все они доступны в одном архиве.

Rogie Social Media Icons

Набор значков от известного веб-иллюстратора подчеркнет индивидуальность веб-ресурса и привлечет еще больше подписчиков в ваши социальные медиа.

Все картинки выполнены отдельно в цветной и черно-белой гаммах.

Доступны изображения для игровых площадок, облачных хранилищ и соцсетей.

Adobe Muse Icons

Векторные иконки от Adobe – это один из лучших вариантов для оформления футера в стиле минимализма.

В наборе доступно 60 картинок популярных сайтов, мобильных операционных систем, облачных хранилищ, платежных систем и других популярных веб-ресурсов.

120 Hand Drawn Social Media Icons

Скачав этот набор, вы получите 120 уникальных рисованных иконок для социальных медиа.

Каждое изображение имеет удачных дизайн и четкую прорисовку линий.

Хорошо впишется в оформление сайта DIY-тематики или любых других посвященных творчеству ресурсов.

Доступные форматы – PNG и SVG.

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

Структура html

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

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

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

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

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

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

Сервисы, которые я использовал на сайтах клиентов и на своём блоге — и . Эти сервисы позволяют достаточно легко реализовать поставленную задачу.

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.

А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в . Все стили сведены к минимуму. Плюс простой каркас html.

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

Очень простая установка. Достаточно вставить html код блока в исходный код страницы сайта, загрузить спрайт, добавить css стили и установка закончена. Вам лишь необходимо будет подправить путь к файлу с изображениями кнопок.
Этот пункт скорей и не плюс и не минус в сторону собственного блока социальных кнопок. Фишка в том, что у собственного блока нет счётчика нажатий на кнопки. И это можно посчитать за минус. Но, с другой стороны, есть возможность поставить на каждую кнопку и вы точно будет знать сколько раз нажимали на кнопки и делились вашими статьями в социальных сетях ваши посетители.
Статистика, собираемая сервисами, по вашему сайту больше не будет передаваться третьим лицам.

Вставка блока социальных кнопок в исходный код

Мы же рассмотрим классический вариант, когда кнопки расположены после статьи.

Сделать это можно либо открыв файл, отвечающий за вывод статей (single.php ) и в исходный код добавить блок социальных кнопок. Либо это можно сделать через файл функции темы (functions.php ).

Я покажу оба варианта, а вы для себя выберите подходящий.

Вставка блока в исходный код single.php

Предупреждение: Пред началом всех действий сделайте резервную копию файла single.php!

Открываем административную панель Вордпресс – «Внешний вид» — «Редактор» — «Одна запись (single.php)» .

В исходном коде ищите место, где заканчивается вывод статьи, и начинаются комментарии или постраничная навигация. Именно в это место нужно будет вставить html код блока социальных кнопок.

Внимательно смотрите на скриншот, ориентируйтесь на коды, отвечающие за вывод статьи и комментариев . И вставляйте приведённый ниже код.

Конечно, в ваших шаблонах будут некоторые отличия, но уверен, вы разберётесь, сложного в этом ничего нет. И к тому же у вас есть резервная копия, бояться нечего.

А вот и сам html код блока социальных кнопок:

Пояснения по коду: это один блок ДИВ с классом.share, в котором содержатся ссылки на социальные сети. Ссылка открывается в отдельном всплывающем окне, за это отвечает вот эта функция onClick=window.open . Подстановка ссылки на статью осуществляется вот этим кодом . Каждая ссылка имеет свой класс, через который присваивается изображение кнопки.

На этом вставка через исходный код закончена. И далее нужно подключить css стили.

Вставка блока в исходный код single.php через функции темы

Предупреждение: пред началом работ, — сделайте резервную копию файла functions.php!

Для того чтобы использовать это вариант, нужно открыть файл functions.php и в самом конце добавить этот код:

/* Вставка соцкнопок*/ add_action("comments_template","soc_button"); function soc_button() { ?> И будьте внимательны после вставки кода у вас не должно быть пробелов и других символов. Либо только закрытие php кода?>. В противном случае сайт перестанет работать.

Пояснения по коду: место, где будут выставлены кнопки социальных сетей, определяется через API ключ comments_template . По этому ключу определяется место перед комментариями. Сам код соцкнопок заключён в обратные теги открытия и закрытия php. В коде я их обозначил красным цветом. в этом вся хитрость вставки html кода в php, через функции темы.

На этом и это способ окончен, переходим к загрузке изображений на сайт.

Загрузка изображения кнопок на сервер

Для примера я подготовил несколько спрайтов с изображениями социальных кнопок. Скачать их можете .

Спрайт, который я использую в качестве примера, весит всего 3,97 кб и содержит только необходимые кнопки. А раз это спрайт, то и запрос к базе всего одни, а не для каждой кнопки в отдельности.

Скачиваете изображения или готовите свои и загружаете их на свой сайт. Думаю с этим проблем возникнуть не должно. Далее, ссылка на этот спрайт потребуется для оформления кнопок через стили css.

Подключение стилей CSS

Этот шаг можно конечно, выполнить самым первым, но я предпочитаю вначале выполнить всю сложную техническую работу, а уже после приступить к приятным мелочам с css стилями.

Итак, открываем файл style.css, отвечающий за дизайн вашего сайта. И вставляем вот эти стили:

Share a { display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test..png ") no-repeat scroll 0px 0px transparent;} .share a.vkontakte { background: url("http://test..png ") no-repeat scroll -168px 0px transparent; } .share a.google { background: url("http://test..png ") no-repeat scroll -252px 0px transparent; } .share a.livejournal { background: url("http://test..png ") no-repeat scroll -336px 0px transparent; } .share a.twitter { background: url("http://test..png ") no-repeat scroll -42px 0px transparent; } .share a.mail { background: url("http://test..png ") no-repeat scroll -294px 0px transparent; } .share a.odnoklassniki { background: url("http://test..png ") no-repeat scroll -126px 0px transparent; } .share a.pinterest { background: url("http://test..png ") no-repeat scroll -210px 0px transparent; } .share a.liveinternet { background: url("http://test..png ") no-repeat scroll -378px 0px transparent; } .share a.evernote { background: url("http://test..png ") no-repeat scroll -420px 0px transparent; } .share a.bookmark { background: url("http://test..png ") no-repeat scroll -462px 0px transparent; } .share a.email { background: url("http://test..png ") no-repeat scroll -504px 0px transparent; } .share a.print { background: url("http://test..png ") no-repeat scroll -546px 0px transparent; } .share a.digg { background: url("http://test..png ") no-repeat scroll -588px 0px transparent; } .share a.spring { background: url("http://test..png ") no-repeat scroll -630px 0px transparent; }

Пояснения по коду: класс.share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.

На этом весь процесс создания своего блока социальных кнопок – закончен. Можно смело переходить к проверке.

А ещё у меня есть видеоурок, в котором весь процесс показан наглядно, полюс показана работа самих кнопок. Смотрите и внедряйте на своих сайтах и блогах.

Вот теперь всё. С поставленной задачей справился. Всем желаю удачи и до встречи в новых статьях и видеоуроках.

Приветствую вас на моем блоге. Сегодня я хотел бы вам показать пошагово, как можно сверстать на html и css кнопки социальных сетей. Начнем с полного нуля и в конце получим нужный результат. Вперед!

Разметка и базовые стили

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

Добавим пока что вот такие стили:

Share {
width: 280px;
margin: 0 auto;
padding: 10px;
background: #D3CDEE;
}
.share i {
margin-right: 15px;
color: black;
text-transform: uppercase;
}

Мы немного оформили сам контейнер для ссылок (размеры, отступы, фон) и надпись.

Оформляем иконки

Social {
display: inline-block;
width: 40px;
height: 40px;
background: #bdc3c7;
vertical-align: middle;
margin-right: 10px;
}

Свойством display: inline-block мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.

Хорошо, а для чего нам vertical-align: middle ? Это свойство выровняет текст в контейнере так, что он будет ровно по центру по вертикали. Также зададим нашим ячейкам какой-нибудь фон, чтобы визуально видеть их уже на этом этапе. Получилась заготовка. Самое время наконец добавить иконочки.

Финальный этап

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

Короче, нам нужно такое изображение. У меня оно примерно 120 на 40.

В css-стили добавляем следующие правила:

Social-vk{
background: url(icon.png);
}
.social-fb{
background: url(icon.png) -40px 0;
}
.social-tw{
background: url(icon.png) -78px 0;
}

Получаем на выходе полностью оформленный блок с иконками.

Вы поняли, как мы это получили? Если нет, то объясняю. Каждая ссылка блок имеет размер 40 на 40. Соответственно, когда мы задаем для него фоновое изображение 120 на 40, то блок просто не может вместить его полностью, и в результате вмещает столько, сколько может.

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

Записав в фоне так: background: url(icon.png) -40px 0 , мы явно указываем, что для блока social-fb , фоновая картинка должна отобразиться именно с указанного положения – сорока пикселей по ширине влево и по высоте без смещения, потому что оно не нужно. Вот так вот все просто, на самом деле.

Что еще можно сделать?

Может быть, вы еще как-то дополнительно хотите оформить блок социальных сетей. Есть несколько идей. Во-первых, можно добавить всем иконкам скругление углов.

Social{
Border-radius: 5px;
}

Во-вторых, можно добавить им рамку.

Border: 3px solid purple;

По дизайну нам в данном случае подойдет фиолетовая, мне кажется. Также вы можете скруглить углы у самого контейнера с ссылками.

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

Итог

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

На этом я сегодняшнюю статья-урок заканчиваю. В следующий раз создадим на css еще что-нибудь

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

Юрий Немец

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

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

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

Скачать

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

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

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

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

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

Шаг 1 — HTML

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

1	<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class = "image-effect-fall-back" > <div class = "share-layer" > <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa-vk" > Вконтакте </ a > <a href = "#" class = "share-button share-via-facebook" > <i class = "fa fa-facebook" > Facebook </ a > <a href = "#" class = "share-button share-via-twitter" > <i class = "fa fa-twitter" > Twitter </ a > </ div > <div class = "image-layer" > <img src = "images/tree.jpg" width = "500" alt = "California surf" > </ div > </ div >

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

Шаг 2 — CSS

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

.image-effect-fall-back { width : 500px ; height : 300px ; position : relative ; margin : 0 auto ; -webkit-perspective : 800px ; perspective : 800px ; } .image-effect-fall-back .image-layer{ position : absolute ; top : 0 ; left : 0 ; height : 300px ; -webkit-transition : 0.6s; transition : 0.6s; z-index : 1 ; } .image-effect-fall-back :hover .image-layer{ -webkit-transform : rotateX(70deg) ; transform : rotateX(70deg) ; overflow : visible ; } .image-effect-fall-back .image-layer img { height : 100% ; } .image-effect-fall-back .image-layer :before { content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba(0 , 0 , 0 , 0.5 ) ; box-shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opacity : 0 ; -webkit-transition : all 0.5s; transition : all 0.5s; -webkit-transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; -webkit-transform-origin : bottom ; -ms-transform-origin : bottom ; transform-origin : bottom ; } .image-effect-fall-back :hover .image-layer :before { opacity : 0.3 ; } .image-effect-fall-back .share-layer{ position : absolute ; bottom : 100px ; left : 0 ; width : 100% ; height : 100px ; opacity : 0 ; z-index : 10 ; -webkit-transition : 0.6s; transition : 0.6s; -webkit-transform : rotateX(70deg) ; transform : rotateX(70deg) ; } .image-effect-fall-back :hover .share-layer { opacity : 1 ; -webkit-transform : rotateX(0deg) translateY(-70px ) ; transform : rotateX(0deg) translateY(-70px ) ; } /*стили для всех кнопок*/ .share-button{ display : inline-block; text-decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; } /*цвет кнопок социальных сетей*/ .share-via-vk { background-color : #4C75A3 ; } .share-via-facebook { background-color : #3b5998 ; } .share-via-twitter { background-color : #00aced ; }

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

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

Вывод

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