Pull to refresh

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

Предисловие


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

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


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


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

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


  • Css3 — использовались такие свойства, как:
    border-radius, 
    background: linear-gradient,
    box-shadow,
    text-shadow,
    transition
    
  • Html — тут все обычно, простая div-ная верстка


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


Если хорошенько присмотреться к кнопкам, то можно заметить, что у них:
  1. Рамка обводки закрашена линейным градиентом
  2. Сама кнопка закрашена немного другим, но тоже линейным градиентом
  3. Имеется блик, который также можно сделать div-ом
  4. Некоторые буквы имеют тень


Схема:



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


Вы спросите меня: А как же можно сделать кнопку «Поделиться ссылкой в 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/
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.