—»     —»   Создаем собственные иконки социальных сетей на CSS3
  Раздел: Руководства   Нет комментариев  

Создаем собственные иконки социальных сетей на CSS3



Практически на всех сайтах, блогах, журналах и корпоративных сайтах в интернете сегодня можно наткнуться на кнопки публикации контента в социальные сети. Будь то интересная статья, профиль, работа в портфолио, кнопка «Like» или «Follow». Это руководство посвящено тому, как можно самостоятельно поэтапно создать кнопки социальных сетей. Итак, давайте приступим!

Этап 1 – Разрабатываем кнопки

Чтобы начать разработку наших кнопок социальных сетей, давайте сначала создадим саму кнопку. Добавьте этот простой код HTML.

<html>
<head>
</head>
<a class="share__btn" href="#">Tweet</a>
</div>
<a class="share__btn" href="#">Like</a>
</div>
<a class="share__btn" href="#">+1</a>
</div>
</html>

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

body {
font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 42px 40px;
}

a {
text-decoration: none;
}

.share {
display: inline-block;
margin-right: 20px;
}
.share__count {
background-color: #fff;
border: solid 1px #a5b1bd;
border-radius: 3px;
/* add in vendor rules */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #424a4d;
float: left;
font-weight: bold;
margin-right: 10px;
padding: 4px 10px;
position: relative;
text-align: center;
}

Создаем собственные иконки социальных сетей на CSS3

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

.share_size_large > .share__count {
display: block;
float: none;
font-size: 18px;
margin-right: 0;
margin-bottom: 12px;
padding: 10px 0;
}

.share__btn {
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
/* add in vendor rules */
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: bold;
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

Этап 2 – Стилизуем кнопку Share (Поделиться)

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

Давайте добавим нижеприведенный HTML-код к нашим кнопкам публикации контента. Теперь важно помнить о том, что стиль к кнопкам посредством CSS-кода мы добавим позже. Если вы хотите сделать кнопки в стиле Facebook, то добавьте “type_facebook”. Если же вам нужен стиль Twitter, то используйте “type_twitter”. Вы всегда можете оформить цвета и стили разных кнопок, руководствуясь вашим профилем в социальной сети.

.share_size_large > .share__btn {
padding: 5px 0;
width: 100%;
}

.share_type_twitter > .share__btn {
background-color: #4099FF;
}

.share_type_facebook > .share__btn {
background-color: #3B5999;
}

.share_type_gplus > .share__btn {
background-color: #F90101;
}

Создаем собственные иконки социальных сетей на CSS3

Этап 3 – Создаем счетчик

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

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

.share__count:before, .share__count:after {
content: '';
display: block;
height: 0;
top: 50%;
position: absolute;
right: -14px;
width: 0;
margin-top: -6px;
}

.share_size_large > .share__count:before, .share_size_large > .share__count:after {
content: '';
display: block;
height: 0;
left: 50%;
position: absolute;
top: auto;
width: 0;
}

Этап 4 – Завершаем стилизацию кнопок

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

.share__count:before {
border: solid 7px transparent;
border-color: transparent transparent transparent #a5b1bd;
}

.share_size_large > .share__count:before {
border-color: #a5b1bd transparent transparent transparent;
bottom: -14px;
margin-left: -7px;
}

.share__count:after {
border: solid 6px transparent;
border-color: transparent transparent transparent #fff;
right: -12px;
margin-top: -5px;
}

.share_size_large > .share__count:after {
margin-left: -6px;
bottom: -12px;
border-color: #fff transparent transparent transparent;
}

Создаем собственные иконки социальных сетей на CSS3

Этап 5 – Добавляем работающий счетчик

Так как мы уже завершили разработку дизайна наших кнопок и счетчиков, пришло время заняться «начинкой» счетчиков. Для этого мы воспользуемся PHP. Сейчас, если вам нужно, чтобы счетчик работал правильно, получите API счетчиков публикаций, отметок Like и комментариев для Facebook/Twitter/Google Plus, и замените URL в параметре file_get_contents на URL к вашему API.

PHP-код представлен ниже, просто не забудьте назвать ваш файл social.php, если вы не хотите использовать предложенный нами код.

'; $fbend = '';
$fbpage = $facebook;
$fbparts = explode($fbbegin,$fbpage);
$fbpage = $fbparts[1];
$fbparts = explode($fbend,$fbpage);
$fbcount = $fbparts[0];
if($fbcount == '') { $fbcount = '0'; }
}
function twit_count() {
global $tcount;
$twit = file_get_contents('http://api.twitter.com/YOURPOST/PAGE');
$begin = ''; $end = '';
$page = $twit;
$parts = explode($begin,$page);
$page = $parts[1];
$parts = explode($end,$page);
$tcount = $parts[0];
if($tcount == '') { $tcount = '0'; }
}
?>

Так как мы создали social.php, теперь мы можем связать наши кнопки социальных сетей со счетчиком. Поместите этот небольшой отрывок PHP-кода на место ненастоящих цифр счетчика, которые расположены рядом с вашей кнопкой. Не забудьте заменить fbcount корректным названием в PHP-файле.

Процесс создания счетчика для Google+ немного отличается. Просто добавьте следующий код туда, где вы хотите отображать цифру счетчика. Есть вероятность, что счетчик Google+ вам захочется сделать немного шире. Таким образом, он будет выглядеть лучше, так как счетчик Google+ немного отличается от счетчиков Twitter и Facebook API.

Создаем собственные иконки социальных сетей на CSS3

Завершение

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

* Скачать файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: иконки, социальные сети, CSS
Опубликовал Design FactoRy   Прочитано (раз): 7226   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930