Содержание
Доброго времени суток уважаемые хабравчане. Начну издалека… Share кнопки — это очень важно. Большинство из нас с Вами использует либо стандартные кнопки определенной социальной сети, либо один из этих сервисов: Блок «Поделиться» от Яндекса, AddThis, ShareThis и новоиспеченный Pluso. Если рассматривать все эти способы с точки зрения кастомизации и дизайна, то достойнее всего, на мой взгляд, это реализовали в Pluso. Все остальное почти ничем не отличается друг от друга. Рассматривая основной функционал (непосредственно шаринг), отличается баганутостью только Pluso, где можно легко накрутить счетчики, нажимая кнопки помногу раз. Я не буду сравнивать качество сбора статистики этих сервисовхотя Pluso явно не фаварит, поскольку не компетентен в этом вопросе. Вернемся к кастомизации кнопок. Как таковой, во всяком случае удобной, ее нет. А если говорить про дизайн, то кнопки не адаптированы под Retina дисплеи, что сразу бросается в глаза. Поэтому я решил создать проект на GitHub, который состоит из иконочного шрифта MojoSocial и файла стилей MojoShare.
Сейчас в проекте более 40 векторных иконок. Все кнопки построены на CSS3 с использованием градиентов из фирменных цветов каждого отдельного сервиса. Плюс несколько стилистических классов, определяющих дизайн кнопки. А пользоваться этим удобно, потому что файл стилей на LESS.
LESSHat
Хочется сразу же сказать о великолепном LESSHat. Кто не знаком и работает с LESS будет очень рад, поскольку это почти Compass, только для LESS!
Шрифт MojoSocial
Шрифт сгенерирован не менее великолепным IcoMoon. С помощью этого сервиса текущий набор иконок в .SVG можно легко редактировать. В шрифте я также использую часть Entypo (намного симпатичнее известного в Bootstrap Glyphicons) и несколько иконок хабраюзеров Grawl (Grands icons) и hands (IconPack). Некоторые иконки взяты мною с официальных сайтов.
Шрифту очень нужны иконки: Surfingbird, Mozilla Persona, Я.ру, AppStore, Google Play и, думаю, в скором времениМозгохранилища. Буду очень благодарен, если кто-то даст мне их.
Сначала описал все значения фирменного цвета для градиента каждого из сервисов
@FacebookC1: #324b8a; @FacebookC2: #4466a8; @TwitterC1: #0191ce; @TwitterC2: #01afdb;
После создал соответствующие классы и коды символов для каждого сервиса
.Facebook {
background-color: @FacebookC1;
.background-image(linear-gradient(bottom, @FacebookC1, @FacebookC2));
border:1px solid darken(@FacebookC1, 15%);
&:before {
content: "\e000";
}
}
.Twitter{
background-color: @TwitterC1;
.background-image(linear-gradient(bottom, @TwitterC1, @TwitterC2 ));
border:1px solid darken(@TwitterC1, 15%);
&:before {
content: "\e001";
}
}
Планировалось сделать все намного проще только для своих нужд. Приведенный ниже код был изначально, поэтому сейчас выглядит как-то нелепо. Но после обновления все будет выглядеть грамотно. Основной класс MojoShare присвается для блока, чтобы не дублировать его для каждой кнопки. Классы .auth и .share — просто пользовательские классы для большой кнопки авторизации и малой кнопки поделиться, определяют основные стилистические свойства: размер, шрифт, размер шрифта и тд.
.MojoShare a {
/* User style */
display: inline-block;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
margin: 10px 0 0 0;
border-radius: 10px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
color: #ffffff;
/* Default style */
cursor: pointer;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
background-repeat: no-repeat;
text-decoration: none;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0 2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
&:hover {
background-position: 0 -30px;
}
&:before {
font-family: "MojoSocial";
};
}
.auth {
@width: 280px;
@height: 50px;
@fontSize: 120%;
width: @width;
height: @height;
padding: 0 10px;
line-height: @height;
font-size: @fontSize;
&:before {
/* User style */
margin-right: 10px;
/* Default style */
font-size: @fontSize*1.3;
display: block;
float: left;
}
}
.share {
@width: auto;
@height: 40px;
@fontSize: 100%;
width: @width;
height: @height;
padding: 0 10px;
line-height: @height;
font-size: @fontSize;
&:before {
font-size: @fontSize*1.3;
display: block;
float: left;
margin-right: 10px;
}
}
Клаccы square, circle и minimalism являются стилистическими и определяют дизайн кнопки:
Как это выглядит в HTML:
<div class="MojoShare"> <a href="" class="Facebook share square">Share</a> <a href="" class="Twitter share circle">Share</a> <a href="" class="VK share square minimalism">Share</a> </div>
Mojo Ribbon
В этот проект я добавил Mojo Ribbon, поскольку гитхабовская ленточка тоже является социальной кнопкой смайл, а также для того, чтобы продемонстрировать возможности LESS.
P.S да я понимаю, что значительным неудобством является чистка лишнего кода, но для этого я могу посоветовать с недавнего времени популярный Сsstrashman. Он не только убирает неиспользуемый код, но и грамотно сокращает CSS.
