Иногда при создании сайтов для украшения страниц можно использовать декоративный разделитель с иконками или без них. Создать такой разделитель очень просто с помощью HTML разметки и CSS.
Ниже мы приведем пример одного из таких разделителей с иконкой по середине.
Выглядеть он будет примерно как на изображении, вы можете его изменить в любом направлении, его размер, цвет, иконку и т.д.
HTML блока разделителя
Рассмотрим из каких элементов состоит HTML блок разделителя.
<!-- Общий блок разделителя -->
<div class="divider-container">
<!-- Блок секции разделителя -->
<div class="divider">
<span class="divider__line"></span>
<span class="divider__icon fa fa-picture-o"></span>
<span class="divider__line"></span>
</div>
<!-- Блок с информацией ниже линий -->
<div class="block-text"></div>
</div>
Блок с классом divider-container содержит в себе общий контейнер в котором располагается разделитель, это может быть страница сайта или часть записи на сайте. Относительно этого блока мы будем настраивать позиционирование нашего разделителя.
Блок с классом divider содержит код самого разделителя, который состоит из линий и изображения.
Блок с классом block-text, это часть контента на сайте, которая идет ниже разделителя, она настраивается по вашему усмотрению. В данном примере она имеет чисто декоративное назначение.
CSS блока разделителя
Рассмотрим из каких блоков состоит CSS нашего разделителя, за что они отвечают и как их настраивать.
/* Общий блок разделителя */
.divider-container {
width: 600px;
height: auto;
background: #f0f0f0;
margin: 30px auto;
padding-bottom: 50px;
}
Первый блок с классом divider-container, это стили общего контейнера, в котором находится разделитель. Его настройки в данном примере имеют чисто декоративный характер. У вас они могут быть другими, так как это может быть страница вашего сайта или страница записи.
Здесь мы определили ширину этого блока, его цвет, внешние и внутренние отступы.
/* Блок разделителя */
.divider {
background: none;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
}
Следующие стили с классом divider, это стили блока самого разделителя. В нем мы задаем центрирование разделителя и отступы относительно общего блока. При необходимости задаем другие параметры.
/* Линия разделителя */
.divider__line {
display: inline-block;
width: 30%;
border-bottom: 5px solid #ddd;
vertical-align: middle;
}
Далее идут стили с классом divider__line, это стили линий разделителя. Здесь мы задаем им свойство display: inline-block, чтобы сделать их блочным элементом и расположить горизонтально. Также задаем им ширину, толщину и цвет, выравниваем по вертикали.
/* Иконка разделителя */
.divider__icon {
font-size: 38px;
color: #ddd;
margin: 0 20px;
vertical-align: middle;
}
В блоке с классом divider__icon мы настраиваем параметры иконки. Задаем ей размер, цвет, внешние отступы, выравниваем по вертикали.
Kwork