Как создать красивый разделитель на сайте — HRCode
Верстка элементов

Как создать красивый разделитель на сайте

Иногда при создании сайтов для украшения страниц можно использовать декоративный разделитель с иконками или без них. Создать такой разделитель очень просто с помощью HTML разметки и CSS.
Ниже мы приведем пример одного из таких разделителей с иконкой по середине.

Выглядеть он будет примерно как на изображении, вы можете его изменить в любом направлении, его размер, цвет, иконку и т.д.
divider

HTML блока разделителя

Рассмотрим из каких элементов состоит 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 нашего разделителя, за что они отвечают и как их настраивать.

css

/* Общий блок разделителя */
.divider-container {
  width: 600px;
  height: auto;
  background: #f0f0f0;
  margin: 30px auto;
  padding-bottom: 50px;
}

Первый блок с классом divider-container, это стили общего контейнера, в котором находится разделитель. Его настройки в данном примере имеют чисто декоративный характер. У вас они могут быть другими, так как это может быть страница вашего сайта или страница записи.
Здесь мы определили ширину этого блока, его цвет, внешние и внутренние отступы.

css

/* Блок разделителя */
.divider {
  background: none; 
  padding-top: 100px; 
  padding-bottom: 100px; 
  text-align: center;
}

Следующие стили с классом divider, это стили блока самого разделителя. В нем мы задаем центрирование разделителя и отступы относительно общего блока. При необходимости задаем другие параметры.

css

/* Линия разделителя */
.divider__line {
  display: inline-block;
  width: 30%;
  border-bottom: 5px solid #ddd;
  vertical-align: middle;
}

Далее идут стили с классом divider__line, это стили линий разделителя. Здесь мы задаем им свойство display: inline-block, чтобы сделать их блочным элементом и расположить горизонтально. Также задаем им ширину, толщину и цвет, выравниваем по вертикали.

css

/* Иконка разделителя */
.divider__icon {
  font-size: 38px;
  color: #ddd;
  margin: 0 20px;
  vertical-align: middle;
}

В блоке с классом divider__icon мы настраиваем параметры иконки. Задаем ей размер, цвет, внешние отступы, выравниваем по вертикали.

Еще по теме:

Напишите что нибудь:

Ваш адрес email не будет опубликован. Обязательные поля помечены *