Красивый заголовок — текст с линиями по сторонам

Как сделать красивый заголовок html к статьям на своем сайте? Этот вопрос так или иначе волнует каждого владельца блога или сайта. Способов для этого очень много. Можно изменить цвет и фон, подобрать красивый шрифт, увеличить размер, выделить заголовок рамкой или подчеркиванием, с помощью CSS установить тени. Можно украсить заголовок материала картинкой или иконкой.

Мы сегодня поговорим об одном из способов сделать интересный заголовок  — это текст с линиями по сторонам. Выглядеть наш красивый заголовок будет примерно так:

Вы знаете, что заголовки в html прописываются с помощью тегов H1 — H6. Поэтому прописываем наше красивое название записи в html и присваиваем ему класс например «title» и обрамляем его тегами «span»:

<h1 class="title">
  <span>Ваш заголовок</span>
</h1>

А далее в файле стилей CSS прописываем для нашего класса необходимые свойства, которые сделают текст с линиями по сторонам:

.title {
  font-size: 32px;
  color: #f3f4f2;
  font-weight: bold; 
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  position: relative;
  background: #8601E8;
  padding: 30px 18px;
 text-shadow: 2px 4px 6px rgba(20,9,5,0.45); /* тень заголовка */
}
 
.title span {
  background: #8601E8;
  display: inline-block;
  padding: 10px 18px;
  position: relative;
}
 
.title:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;        
  width: 100%;
  height: 5px; /* ширина линии */
  background: #f3f4f2; /* цвет линии */
  box-shadow: 2px 4px 6px rgba(20,9,5,0.45); /* тень линии */
}

Чтобы сделать заголовок на сайте еще более привлекательным,  я добавил в CSS тень к тексту и к линии. Надеюсь вы понимаете, что при желании в этом коде вы можете поменять размер и цвет шрифта заголовка и линии, изменить цвет фона, убрать или изменить тень. В общем сделать все, чтобы ваш  красивый заголовок html — текст с линиями по сторонам, вписался в дизайн вашего сайта.

А чтобы быстро создать тень для блока на вашем сайте, вы можете воспользоваться онлайн сервисом генератора тени блока CSS. На котором вы устанавливаете тень в визуальном режиме, а в результате получаете код для вставки в файл CSS.

На этом сегодня все. Если Вам понравился материал, не забудьте поделится им с друзьями с помощью кнопок соц.сетей ниже. Кстати материал о том, как накрутить подписчиков группы или паблика в соц сетях совершенно бесплатно.