Mojo Share — все социальные кнопки на CSS3 с иконочным шрифтом в одном месте

Доброго времени суток уважаемые хабравчане. Начну издалека… Share кнопки — это очень важно. Большинство из нас с Вами использует либо стандартные кнопки определенной социальной сети, либо один из этих сервисов: Блок «Поделиться» от Яндекса, AddThis, ShareThis и новоиспеченный Pluso. Если рассматривать все эти способы с точки зрения кастомизации и дизайна, то достойнее всего, на мой взгляд, это реализовали в Pluso. Все остальное почти ничем не отличается друг от друга. Рассматривая основной функционал (непосредственно шаринг), отличается баганутостью только Pluso, где можно легко накрутить счетчики, нажимая кнопки помногу раз. Я не буду сравнивать качество сбора статистики этих сервисовхотя Pluso явно не фаварит, поскольку не компетентен в этом вопросе. Вернемся к кастомизации кнопок. Как таковой, во всяком случае удобной, ее нет. А если говорить про дизайн, то кнопки не адаптированы под Retina дисплеи, что сразу бросается в глаза. Поэтому я решил создать проект на GitHub, который состоит из иконочного шрифта MojoSocial и файла стилей MojoShare.

9f0a4daa65238090aaf9ab2d0a648b97

Сейчас в проекте более 40 векторных иконок. Все кнопки построены на CSS3 с использованием градиентов из фирменных цветов каждого отдельного сервиса. Плюс несколько стилистических классов, определяющих дизайн кнопки. А пользоваться этим удобно, потому что файл стилей на LESS.

LESSHat

Хочется сразу же сказать о великолепном LESSHat. Кто не знаком и работает с LESS будет очень рад, поскольку это почти Compass, только для LESS!

Очень большой LESS mixin с полноценным кроссбраузерным CSS градиентом

Шрифт MojoSocial

Шрифт сгенерирован не менее великолепным IcoMoon. С помощью этого сервиса текущий набор иконок в .SVG можно легко редактировать. В шрифте я также использую часть Entypo (намного симпатичнее известного в Bootstrap Glyphicons) и несколько иконок хабраюзеров Grawl (Grands icons) и hands (IconPack). Некоторые иконки взяты мною с официальных сайтов.

4696e2fbf5d8dceeab5954acac4c5168

Шрифту очень нужны иконки: Surfingbird, Mozilla Persona, Я.ру, AppStore, Google Play и, думаю, в скором времениМозгохранилища. Буду очень благодарен, если кто-то даст мне их.

MojoShare.less

Сначала описал все значения фирменного цвета для градиента каждого из сервисов

@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 являются стилистическими и определяют дизайн кнопки:

8e7c16d178d487d5fe07bbc76ccebb7b
Как это выглядит в 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>

GitHub

Mojo Ribbon

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

P.S да я понимаю, что значительным неудобством является чистка лишнего кода, но для этого я могу посоветовать с недавнего времени популярный Сsstrashman. Он не только убирает неиспользуемый код, но и грамотно сокращает CSS.