Aug 26 2013 at 22:09

Кнопки «поделиться» только на Css и Html

Invite pending

Предисловие

Все большую и большую популярность начинает набирать верстка с минимальных использованием графики. Оно и понятно, ведь технологии html5/css3 позволяют это. Сегодня я покажу, как можно сделать социальные кнопки(кнопки расшарить) без использования картинок, лишь с небольшим допущением.

Постановка задачи

Без использования графики сделать кнопки «Поделиться ссылкой» для Хабра, которые максимально похожи на оригинальные.

Оригинал:

Картинка была специально обведена рамкой, чтобы не сливалась с дизайном самого Хабра.

Используемые технологии

Css3 — использовались такие свойства, как:

border-radius, 
background: linear-gradient,
box-shadow,
text-shadow,
transition

Html — тут все обычно, простая div-ная верстка

Разбор кнопок по слоям

Если хорошенько присмотреться к кнопкам, то можно заметить, что у них:

Рамка обводки закрашена линейным градиентом
Сама кнопка закрашена немного другим, но тоже линейным градиентом
Имеется блик, который также можно сделать div-ом
Некоторые буквы имеют тень

Схема:

Небольшое допущение картинки

Вы спросите меня: А как же можно сделать кнопку «Поделиться ссылкой в Twittere» без изображения?
Все очень просто, мы не будем использовать никакие сторонние изображения. Так как изображение логотипа Twittera — это небольшое изображение, примерно 11x11 пикселей, то мы его преобразуем в base64 и вставим прямо в css. Таким образом в нашем файле стилей css не будет обращения к изображению и мы экономим 1 get запрос к веб-серверу.


.tw-logo{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACsSURBVHjalJHBCgFRFIa/0WSLnaUnsJSFB7D3CkrJnndQys4jWAgr76JmJdlI9kqfzTWNYdT8dTvde/7vP6dupFJGlVC7QJTr9YEEOANTYAyAinpQ12oj3GP15qd2agrMwuNdXakTv9VTicP4JvAE6sCoYP1TdqVOSC/SMfhSAHX/Bxj+Alrq5od5q0Z5YKAu1WvG+FAXajUTmgI1da4m6iVMameN7xOV/enXAESQMWIcyuGSAAAAAElFTkSuQmCC");
    background-repeat:no-repeat;
    background-color: none;
    width: 12px;
    height: 11px;
    margin: 3px auto 0px auto;
}

Единственный минус ~~(проклятье всех верстальщиков)~~: Internet Explorer плохо дружит с этим…

Альтернативное решение

Также можно было бы тут использовать html5 canvas, но я отбросил это решение, так как это было бы намного сложнее, чем сейчас уже есть.

Создание Градиентной обводки и основного градиента

Для создания градиента в обводке и самом блоке было принято решение создавать div размером 19x19 пикселей и заполнять его линейным градиентом. Далее в нем создавать div размером 17x17 пикселей, и с помощью отступов создавать видимость обводки.
Пример одного такого блока:

.vk{
    background-image: linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -moz-linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -o-linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -webkit-linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -ms-linear-gradient(bottom, #3f6186, #6191bc);
}
.vk-gradient{
    background-image: linear-gradient(bottom, #456891, #5a87af);
    background-image: -moz-linear-gradient(bottom, #456891, #5a87af);
    background-image: -o-linear-gradient(bottom, #456891, #5a87af);
    background-image: -webkit-linear-gradient(bottom, #456891, #5a87af);
    background-image: -ms-linear-gradient(bottom, #456891, #5a87af);
    border-radius:3px;
    width: 17px;
    height: 17px;
    margin:1px;
}

Решение

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

Исходный код

Html

<div class="share">
<a href="" title="Опубликовать ссылку в Twitter" class="tw">
   <div class="tw-gradient">
       <div class="blick"></div>
       <div class="tw-logo"></div>
   </div>
</a>
<a href="" title="Опубликовать ссылку во ВКонтакте" class="vk">
   <div class="vk-gradient">
       <div class="blick"></div>
       <div class="vk-logo">
           <span class="vk-text">
               B
           </span>
       </div>
   </div>
</a>
<a href="" title="Опубликовать ссылку в Facebook" class="fb">
   <div class="fb-gradient">
       <div class="blick"></div>
       <div class="fb-logo">
           f
       </div>
   </div>
</a>
<a href="" title="Опубликовать ссылку в Google Plus" class="gp">
   <div class="gp-gradient">
       <div class="blick"></div>
       <div class="gp-logo">
           +
       </div>
   </div>
</a>
</div>

Css

.share{
    background-color:#fff;
}
.share a{
    opacity: 0.5;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -khtml-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
    overflow:hidden;
    vertical-align:top;
    width: 19px;
    height: 19px;
    display:inline-block;
    border-radius:3px;
    text-decoration:none;
}        
.share a:hover{
    opacity: 1;
}    
.blick{
    width: 15px;
    height: 1px;
    background-color:#fff;
    margin:1px auto -1px auto;
    opacity: 0.5;
    border-radius: 3px 3px 9px 9px;
}
.tw{
    background-image: linear-gradient(bottom, #2f7eb6, #47adda);
    background-image: -moz-linear-gradient(bottom, #2f7eb6, #47adda);
    background-image: -o-linear-gradient(bottom, #2f7eb6, #47adda);
    background-image: -webkit-linear-gradient(bottom, #2f7eb6, #47adda);
    background-image: -ms-linear-gradient(bottom, #2f7eb6, #47adda);
}
.tw-gradient{
    background-image: linear-gradient(bottom, #388fce, #48aedb);
    background-image: -moz-linear-gradient(bottom, #388fce, #48aedb);
    background-image: -o-linear-gradient(bottom, #388fce, #48aedb);
    background-image: -webkit-linear-gradient(bottom, #388fce, #48aedb);
    background-image: -ms-linear-gradient(bottom, #388fce, #48aedb);
    border-radius:3px;
    width: 17px;
    height: 17px;
    margin:1px;
}
.tw-logo{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALCAYAAABLcGxfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACsSURBVHjalJHBCgFRFIa/0WSLnaUnsJSFB7D3CkrJnndQys4jWAgr76JmJdlI9kqfzTWNYdT8dTvde/7vP6dupFJGlVC7QJTr9YEEOANTYAyAinpQ12oj3GP15qd2agrMwuNdXakTv9VTicP4JvAE6sCoYP1TdqVOSC/SMfhSAHX/Bxj+Alrq5od5q0Z5YKAu1WvG+FAXajUTmgI1da4m6iVMameN7xOV/enXAESQMWIcyuGSAAAAAElFTkSuQmCC");
    background-repeat:no-repeat;
    background-color: none;
    width: 12px;
    height: 11px;
    margin: 3px auto 0px auto;
}
.vk{
    background-image: linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -moz-linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -o-linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -webkit-linear-gradient(bottom, #3f6186, #6191bc);
    background-image: -ms-linear-gradient(bottom, #3f6186, #6191bc);
}
.vk-gradient{
    background-image: linear-gradient(bottom, #456891, #5a87af);
    background-image: -moz-linear-gradient(bottom, #456891, #5a87af);
    background-image: -o-linear-gradient(bottom, #456891, #5a87af);
    background-image: -webkit-linear-gradient(bottom, #456891, #5a87af);
    background-image: -ms-linear-gradient(bottom, #456891, #5a87af);
    border-radius:3px;
    width: 17px;
    height: 17px;
    margin:1px;
}
.vk-logo{
    width:11px;
    height:11px;
    background-color: #fff; 
    border-radius: 2px;
    margin: 3px auto 0px auto;
    overflow:hidden;
    box-shadow: 0px 1px 1px #666;
}
.vk-text{
    text-shadow:inset 0px 1px 1px #444;
    color: #496e92;
    padding:0px;
    font-size:10px;
    font-family:Arial;
    display:block;
    margin: -1px 0px 0px 2px;
}
.fb{
    background-image: linear-gradient(bottom, #3f5e9e, #5174bb);
    background-image: -moz-linear-gradient(bottom, #3f5e9e, #5174bb);
    background-image: -o-linear-gradient(bottom, #3f5e9e, #5174bb);
    background-image: -webkit-linear-gradient(bottom, #3f5e9e, #5174bb);
    background-image: -ms-linear-gradient(bottom, #3f5e9e, #5174bb);
}
.fb-gradient{
    background-image: linear-gradient(bottom, #4a68a8, #6087c0);
    background-image: -moz-linear-gradient(bottom, #4a68a8, #6087c0);
    background-image: -o-linear-gradient(bottom, #4a68a8, #6087c0);
    background-image: -webkit-linear-gradient(bottom, #4a68a8, #6087c0);
    background-image: -ms-linear-gradient(bottom, #4a68a8, #6087c0);
    border-radius:3px;
    width: 17px;
    height: 17px;
    margin:1px;
}
.fb-logo{
    margin: 0px auto 0px 6px;
    overflow:hidden;
    color:#fff;
    font-size:13px;
    font-family:Arial;
    font-weight:bold;
    text-shadow:0px 1px 1px #444;
}
.gp{
    background-image: linear-gradient(bottom, #bf3924, #e65a37);
    background-image: -moz-linear-gradient(bottom, #bf3924, #e65a37);
    background-image: -o-linear-gradient(bottom, #bf3924, #e65a37);
    background-image: -webkit-linear-gradient(bottom, #bf3924, #e65a37);
    background-image: -ms-linear-gradient(bottom, #bf3924, #e65a37);
}
.gp-gradient{
    background-image: linear-gradient(bottom, #cd3f28, #da5235);
    background-image: -moz-linear-gradient(bottom, #cd3f28, #da5235);
    background-image: -o-linear-gradient(bottom, #cd3f28, #da5235);
    background-image: -webkit-linear-gradient(bottom, #cd3f28, #da5235);
    background-image: -ms-linear-gradient(bottom, #cd3f28, #da5235);
    border-radius:3px;
    width: 17px;
    height: 17px;
    margin:1px;
}
.gp-logo{
    margin: -2px auto 0px 4px;
    overflow:hidden;
    color:#fff;
    font-size:16px;
    font-family:Arial;
    font-weight:bold;
}

Результат можно посмотреть тут: http://jsfiddle.net/NEqQu/26/

Hubs: