Предисловие
Все большую и большую популярность начинает набирать верстка с минимальных использованием графики. Оно и понятно, ведь технологии 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;
}
Единственный минус
Альтернативное решение
Также можно было бы тут использовать 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/