CSS чайник. Делаем красивую кнопку "подписаться" в стиле Golos`а
Привет! Это будет первая часть небольшого урока как сделать собственную красивую кнопку "подписаться" с анимацей. Поскольку я плохо могу в создание gif в фотошопе,то делал анимированную кнопку весьма необычным способом, а именно с помощью css.
Итак, поехали! Для примера сделаем с вами следующую кнопку:
Начнем с простого, создадим html элемент <div> следующего вида
<div class="button">
<div class="inline icon"></div>
<div class="inline text"></div>
</div>
Что есть что в данном коде? Мы создали блок <div> с двумя вложенными в него блоками <div>. Это основа нашей кнопки. У каждого блока есть атрибут class, он необходим для присвоения css класса каждому элементу. Сами классы в css могут иметь различные виды, например:
.className - произвольный класс всегда должен начинаться с точки и присваиваться элементу с помощью атрибута class
tagName - описание стиля блока (т.е. вместо tagName может быть div,p,a,img и другие html тэги) не требует присвоения класса к блоку. Стиль будет применяться ко всем блокам с заданным тэгом.
Есть множество других особенностей при написании названий классов. О них я могу написать отдельный пост, если будет необходимость :)
Продолжим. Мы имеем четыре класса, а именно
.button - описывает общий стиль кнопки
.inline - так как div элементы по умолчанию располагаются друг под другом, данный класс выставляет их в одну линию.
.text - описание стиля текста
.icon - описание стиля иконки
Ниже приведено содержание самих классов:
.button {
border:2px solid #4ba2f2;
width: 260px;
padding:8px;
}
.inline {
display: inline-block;
width:50px;
}
.icon {
width:30px;
vertical-align:middle;
border-right: 2px solid #4ba2f2;
padding-right: 10px;
}
.text {
font-size:24pt;
font-weight:bold;
font-family:"Helvetica";
margin-left:6px;
vertical-align: sub;
color:#1a5099;
}
Теперь разберемся какое свойство что делает:
border:2px solid #4ba2f2; - устанавливает синюю границу кнопки, здесь мы указываем толщину границы, её свойство (solid - сплошная линия, dotted - пунктирная линия и т.д.) и цвет границы. Также в примере вы увидите border-right: ... - это значит,что граница будет только справой стороны блока, также можно сделать границу слева, сверху или снизу.
padding:8px; - внутренний отступ, т.е. от границы блока до внутреннего контента будет 8 пикселей отступа. Как и в border: ... здесь имеются свойства для каждой из сторон отдельно.
display: inline-block; - это свойство выстраивает div в одну линию.
vertical-align:middle; - вертикальное расположение (в данному случае по центру). До сих пор не совсем разобрался как правильно работает это свойство, поэтому значение иногда выбирается методом тыка.
font-... - данный свойства описывают текст. В примере задан размер, выделение жирным и семейство шрифтов (через семейство шрифтов можно задать определенный шрифт).
margin - аналогичен padding,только отступ делается с внешней стороны блока, а не с внутренней. В примере используется отступ только для левой стороны.
color:#1a5099; - цвет текста
Описания классов можно писать в файле с расширением css и подключать к основной html странице или же вставлять код в теги <style></style>, как я и cделаю в данном случае.
Конечный код будет выглядеть так:
<style>
.button {
border:2px solid #4ba2f2;
width: 260px;
padding:8px;
}
.inline {
display: inline-block;
width:50px;
}
.icon {
width:30px;
vertical-align:middle;
border-right: 2px solid #4ba2f2;
padding-right: 10px;
}
.text {
font-size:24pt;
font-weight:bold;
font-family:"Helvetica";
margin-left:6px;
vertical-align: sub;
color:#1a5099;
}
</style>
<div class="button">
<div class="inline icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 158 171.8" style="enable-background:new 0 0 158 171.8;" xml:space="preserve"><style type="text/css"> .st0{fill:url(#XMLID_33_);} .st1{fill:url(#XMLID_34_);} .st2{fill:#FFFFFF;} </style><g id="XMLID_16_"><linearGradient id="XMLID_33_" gradientUnits="userSpaceOnUse" x1="17.9143" y1="36.2467" x2="91.7842" y2="36.2467"><stop offset="0" style="stop-color:#FF3F3F"></stop><stop offset="1" style="stop-color:#EB0000"></stop></linearGradient><path id="XMLID_3_" class="st0" d="M70.8,66L70.8,66c12.3-5.1,20.9-17.4,20.9-31.7C91.8,15.4,76.6,0,58,0 C39.3,0,24.1,15.4,24.1,34.3c0,10.3,4.5,19.5,11.6,25.8L17.9,72C17.9,72,53.6,75.1,70.8,66z"></path><linearGradient id="XMLID_34_" gradientUnits="userSpaceOnUse" x1="2.400511e-06" y1="89.2769" x2="157.8291" y2="89.2769"><stop offset="0" style="stop-color:#2482C5"></stop><stop offset="1" style="stop-color:#285FAC"></stop></linearGradient><path id="XMLID_11_" class="st1" d="M143.1,103.5c-17-6.1-40.7,5.7-40.7,5.7s18.3-24.5,17.9-60.7C120.1,22,110.7,13.4,103.5,7 c0.6,3.6,0.9,7.3,0.9,11c0,38.4-23.8,64.2-62.1,64.2c-15.9,0-30.5-0.1-42.2-9c0.2,0.6,1.9,7.9,8.7,15.5c3,3.4,7.1,6.8,12.4,9.7 c17.2,9.3,30.4,10.4,31.7,10.5c0.1,0.1,0.1,0.3,0.2,0.4c0,19.1-13.4,46.4-32.4,46.4c-2.9,0-5.7-0.4-8.4-1c-7.4-1.5-12-5.3-12-5.3 s2.6,19.9,24,21.9c23.5,2.2,34.3-2.9,57.6-17.1c24.9-15.2,43.8-31.3,58.3-27.3c11,3,12.8,20.5,12.8,20.5s3.3-6.9,4.3-13 C158.3,128,160.1,109.6,143.1,103.5z"></path></g><g id="XMLID_14_"><path id="XMLID_12_" class="st2" d="M57.2,11.1c7.1,0,13.5,3.2,17.8,8.2l2.7-2.3c-5-5.7-12.4-9.4-20.5-9.4c-5.7,0-11,1.8-15.4,4.8 l2,2.9C47.6,12.7,52.2,11.1,57.2,11.1z"></path></g></svg>
</div>
<div class="inline text">
подписаться
</div>
</div>
Как вы заметили в иконке появился довольной большой кусок текста. Это логотип Golos`a в svg формате. На нем я не буду останавливаться, т.к. этот код был выдран с данного сайта :)
Сейчас у нас должна получиться такая кнопка (цвет текста чуть другой,это не суть как важно):
Но мы забыли анимацию! давайте исправим это!
Для того чтобы создать анимацию в css существуют @keyframes , такая чудесная штука в которой вы указываете начальное и конечное состояние свойств.
Для нашего пример данная вещь будет иметь следующий вид:
@keyframes animOffset {
from {
outline-offset:0px;
outline: 0px solid rgba(75,162,242,1);
}
to {
outline-offset: 10px;
outline: 2px solid rgba(75,162,242,0);
}
}
Давайте разберемся что же мы такое написали.
animOffset - имя нашего кейфрейма, с помощью него мы будем указывать, что нам надо именно эту анимацию.
outline: - подобно border:, но отрисовывается не внутри элемента,а вокруг него, можно сделать так,чтобы линия рисовалась на некотором расстоянии от элемента. В этом нам поможет следующее свойство.
outline-offset: - сдвиг линии на определенное расстояние.
В from мы указываем начальное состояние. У нас это нет внешней линии,сдвиг её равен 0. В to указываем конечно состояние: линия есть,сдвинута на 10 пикселей от блока.
С помощью rgba(75,162,242,0) - мы указываем цвет линии, a - alpha означает прозрачность цвета, это нужно чтобы линия становилась невидимой при удалении от элемента.
Теперь добавить данный кейфрейм к нашей кнопке. В класс .button добавим следующее свойство
animation: animOffset 1s infinite;
здесь мы указываем какую анимацию хотим использовать ,продолжительность и сколько раз повторять (infinite - бесконечно).
В конечном варианте .button выглядит так
.button {
border:2px solid #4ba2f2;
width: 260px;
padding:8px;
animation: animOffset 1s infinite;
}
Добавив анимацию мы получим конечный вариант кнопки! Полный код будет выглядеть так:
<style>
.button {
margin:200px;
border:2px solid #4ba2f2;
width: 260px;
padding:8px;
animation: animOffset 1s infinite;
}
@keyframes animOffset {
from {
outline-offset:0px;
outline: 0px solid rgba(75,162,242,1);
}
to {
outline-offset: 10px;
outline: 2px solid rgba(75,162,242,0);
}
}
.inline {
display: inline-block;
width:50px;
}
.icon {
width:30px;
vertical-align:middle;
border-right: 2px solid #4ba2f2;
padding-right: 10px;
}
.text {
font-size:24pt;
font-weight:bold;
font-family:"Helvetica";
margin-left:6px;
vertical-align: sub;
color:#1a5099;
}
</style>
<div class="button">
<div class="inline icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 158 171.8" style="enable-background:new 0 0 158 171.8;" xml:space="preserve"><style type="text/css"> .st0{fill:url(#XMLID_33_);} .st1{fill:url(#XMLID_34_);} .st2{fill:#FFFFFF;} </style><g id="XMLID_16_"><linearGradient id="XMLID_33_" gradientUnits="userSpaceOnUse" x1="17.9143" y1="36.2467" x2="91.7842" y2="36.2467"><stop offset="0" style="stop-color:#FF3F3F"></stop><stop offset="1" style="stop-color:#EB0000"></stop></linearGradient><path id="XMLID_3_" class="st0" d="M70.8,66L70.8,66c12.3-5.1,20.9-17.4,20.9-31.7C91.8,15.4,76.6,0,58,0 C39.3,0,24.1,15.4,24.1,34.3c0,10.3,4.5,19.5,11.6,25.8L17.9,72C17.9,72,53.6,75.1,70.8,66z"></path><linearGradient id="XMLID_34_" gradientUnits="userSpaceOnUse" x1="2.400511e-06" y1="89.2769" x2="157.8291" y2="89.2769"><stop offset="0" style="stop-color:#2482C5"></stop><stop offset="1" style="stop-color:#285FAC"></stop></linearGradient><path id="XMLID_11_" class="st1" d="M143.1,103.5c-17-6.1-40.7,5.7-40.7,5.7s18.3-24.5,17.9-60.7C120.1,22,110.7,13.4,103.5,7 c0.6,3.6,0.9,7.3,0.9,11c0,38.4-23.8,64.2-62.1,64.2c-15.9,0-30.5-0.1-42.2-9c0.2,0.6,1.9,7.9,8.7,15.5c3,3.4,7.1,6.8,12.4,9.7 c17.2,9.3,30.4,10.4,31.7,10.5c0.1,0.1,0.1,0.3,0.2,0.4c0,19.1-13.4,46.4-32.4,46.4c-2.9,0-5.7-0.4-8.4-1c-7.4-1.5-12-5.3-12-5.3 s2.6,19.9,24,21.9c23.5,2.2,34.3-2.9,57.6-17.1c24.9-15.2,43.8-31.3,58.3-27.3c11,3,12.8,20.5,12.8,20.5s3.3-6.9,4.3-13 C158.3,128,160.1,109.6,143.1,103.5z"></path></g><g id="XMLID_14_"><path id="XMLID_12_" class="st2" d="M57.2,11.1c7.1,0,13.5,3.2,17.8,8.2l2.7-2.3c-5-5.7-12.4-9.4-20.5-9.4c-5.7,0-11,1.8-15.4,4.8 l2,2.9C47.6,12.7,52.2,11.1,57.2,11.1z"></path></g></svg>
</div>
<div class="inline text">
подписаться
</div>
</div>
как вы могли заметить в классе .button появилось свойство margin:200px;, сделано это исключительно для того,чтобы в последствии удобно было записать анимацию кнопки, о чем я расскажу в следующей записи.
А на сегодня все! Надеюсь вам понравился этот урок. Если у вас возникли какие-либо вопросы, пишите, я с радостью отвечу на них!:)
Подписывайтесь и голосуйте за этот пост!
кнопки "подписаться" для ваших постов на Golos`е