Идеи для оформления заголовков на сайте

Заголовки на сайте должны привлекать внимание. По умолчанию в браузере для них установлен увеличенный размер шрифта и полужирное начертание.

Данные примеры подходят для оформления заголовков категорий, блоков сайдбара, заголовков в подвале страницы и т.п.
Некоторые заголовки требуют дополнительной разметки, остальные примеры используют только один элемент в сочетании с псевдоэлементами :before и :after.

Для заголовков я использовала шрифт Merriweather, загруженный с сайта Google Fonts.

headers
Рис. 1. Оформление заголовков на сайте

Общие стили для всех заголовков

h3 {
  font-family: 'Merriweather', serif;
  font-size: 20px;
  letter-spacing: 1px;
  max-width: 320px;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #465457;
}

Заголовок 1

<div class="d1"><h3><span>Заголовок 1</span></h3></div>
.d1 h3 {
  color: #F16246;
  text-align: center;
}
.d1 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: #E5EDEA;
  z-index: -1;
}
.d1 span {
  background: white;
  padding: 0 20px;
}

Заголовок 2

<div class="d2"><h3><span>Заголовок 2</span></h3></div>
.d2 h3 {text-align: center;}
.d2 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 0;
  right: 0;
  height: 6px;
  border-top: 2px solid #BBC9C9;
  border-bottom: 2px solid #BBC9C9;
  z-index: -1;
}
.d2 span {
  background: white;
  padding: 0 20px;
}

Заголовок 3

<div class="d3"><h3><span>Заголовок 3</span></h3></div>
.d3 h3:before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 0;
  right: 0;
  height: 12px;
  background: #A6D8CB;
  z-index: -1;
}
.d3 span {
  background: white;
  padding: 0 15px;
  margin-left: 20px;
}

Заголовок 4

<div class="d4"><h3>Заголовок 4</h3></div>
.d4 h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid #E5EDEA; 
}
.d4 h3:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 30%;
  height: 4px;
  background: #A6D8CB;
}

Заголовок 5

<div class="d5"><h3>Заголовок 5</h3></div>
.d5 h3 {padding-top: 10px;}
.d5 h3:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 25%;
  height: 2px;
  background: #D8BD3D;
}

Заголовок 6

<div class="d6"><h3>Заголовок 6</h3></div>
.d6 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d6 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -15%;
  width: 30%;
  height: 2px;
  background: #FA5F4C;
}

Заголовок 7

<div class="d7"><h3>Заголовок 7</h3></div>
.d7 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d7 h3:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #79F8D7;
}
.d7 h3:after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -15%;
  width: 30%;
  height: 2px;
  background: #79F8D7;
}

Заголовок 8

<div class="d8"><h3>Заголовок 8</h3></div>
.d8 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d8 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EE6247;
  z-index: 2;
}
.d8 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #ECF4F2;
}

Заголовок 9

<div class="d9"><h3>Заголовок 9</h3></div>
.d9 h3 {
  padding: 0 0 6px 10px;
  border-left: 10px solid #A6D8CB;
  border-bottom: 2px solid #A6D8CB;
}

Заголовок 10

<div class="d10"><h3>Заголовок 10</h3></div>
.d10 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
  border: 2px solid #cbdcea;
  color: #394671;
}
.d10 h3:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #cbdcea;
}

Заголовок 11

<div class="d11"><h3>Заголовок 11</h3></div>
.d11 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
  background: #cbdcea;
  border: 2px dashed white;
  color: white;
  box-shadow: 0 0 0 4px #cbdcea;
}

Заголовок 12

<div class="d12"><h3>Заголовок 12</h3></div>
.d12 h3 {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 15px;
  letter-spacing: 2px;
}
.d12 h3:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 3px;
  z-index: -1;
  width: 20px;
  height: 25px;
  border: 4px solid #ea7e9c;
  color: #394671;
}

Заголовок 13

<div class="d13"><h3>Заголовок 13</h3></div>
.d13 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
  color: #154ffb;
}
.d13 h3:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -25px;
  z-index: -1;
  background: #fed57b;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Заголовок 14

<div class="d14"><h3>Заголовок 14</h3></div>
.d14 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
}
.d14 h3:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -25px;
  width: 30px;
  height: 20px;
  border-top: 2px solid #fed57b;
  border-left: 2px solid #fed57b;
}
.d14 h3:after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -25px;
  width: 30px;
  height: 20px;
  border-bottom: 2px solid #fed57b;
  border-right: 2px solid #fed57b;
}

Заголовок 15

<div class="d15"><h3>Заголовок 15</h3></div>
.d15 h3 {
  display: table;
  width: auto;
  margin: 15px auto;
  letter-spacing: 2px;
}
.d15 h3:before {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: -35px;
  width: 10px;
  height: 10px;
  border: 3px solid #fed57b;
  transform: rotate(45deg)
}
.d15 h3:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: -35px;
  width: 10px;
  height: 10px;
  border: 3px solid #fed57b;
  transform: rotate(45deg)
}

Заголовок 16

<div class="d16"><h3>Заголовок 16</h3></div>
.d16 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d16 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBDCEA;
  box-shadow: 20px 0 0 0 #CBDCEA, -20px 0 0 0 #CBDCEA;
}
.d16 h3:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FC3768;
  z-index: -1;
}
  • Создание Сайтов

    Это очень нужная вещь. Страдал от нехватки информации для заголовков. Теперь есть где черпать инфу для работы с заголовками.

    • Пожалуйста, пользуйтесь. Возможно, дополню другими примерами.

      • Создание Сайтов

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

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

        • Да, вы правы, можно задать стиль оформления других элементов на странице, опираясь на внешний вид заголовка. И конечно же, эксперименты приветствуются.

  • eyaliov

    Здравствуйте! Благодарю вас за ваш труд — оч. доходчиво и ценно. У меня появился вопрос: могли бы вы точно так же прописать код окна в котором находится сам урок? Спасибо.

    • Для наглядной демонстрации кода я пользуюсь плагином Crayon Syntax Highlighter для вордпресс. Эти окна генерируются и стилизуются с его помощью. Вручную так оформлять код будет очень сложно, потому что практически каждый символ помещён в отдельный тег. Также если просто писать теги элементов с помощью угловых скобок, они не будут отображаться на странице, плагин заменяет их на спецсимволы.

  • aSamp

    Примеры 4,5,6,7,8,9 открывающий тэг , закрывающий — .

  • А разве присваивать class в тег h это правильно? Мне всегда казалось что эти теги должны быть чистыми.

    • Хороший вопрос. Согласно официальной спецификации атрибут class можно задавать для всех элементов, кроме base, head, html, meta, param, script, style, title, следовательно, его можно использовать и для заголовков. Если вы переживаете в отношении seo, то для неё важны заголовки h1 и h2, а также, чтобы h1 не содержал внутри себя других тегов (но не атрибутов).

      Как на странице так и на сайте в целом может быть больше одного тега h3. Подобное оформление может использоваться для некоторых из них, поэтому чтобы выбрать какой-то конкретный заголовок, для удобства задаётся класс. С другой стороны, если этот заголовок будет находиться внутри блока с уникальным идентификатором или классом, для стилизации можно воспользоваться селектором потомка, например, #sidebar h3 {css-стили}.

      • Понятно, спасибо!
        Но так и заголовки h тоже не желательно прописывать например в сайдбаре и т. п. они должны находиться только в статье, так как статья может оказаться нерелевантной. Лучше выводить их с тем же классом через div.

        • Спецификация не запрещает размещать заголовки в сайдбаре, посмотрите примеры разметки https://www.w3.org/TR/html5/sections.html#the-aside-element. Другое дело что на странице не рекомендуется размещать больше одного h1, так как этот элемент наиболее значимый для сео и должен отражать содержимое страницы.
          В отношении релевантности хочу добавить, что при её оценке в первую очередь рассматривается содержимое тегов title, meta, h1, strong, а заголовки уровня 3-6 просто создают смысловую иерархию текстового содержимого. Тем не менее, если обратиться к разметке зарубежных сайтов, которые несут знания в массы (http://www.w3schools.com/TAGs/tag_div.asp , http://stackoverflow.com, https://www.smashingmagazine.com и многие другие), у них у всех присутствуют заголовки в сайдбаре. То есть, если официальная спецификация не запрещает, значит их можно использовать в боковых колонках.

          Насчёт заголовков внутри элемента div: div — это контейнер, блок для группировки контента, такой же как элементы article, nav, footer и т.д. Поэтому помещать текст непосредственно внутрь это элемента не корректно. Если боковая колонка представляет список чего-либо, можно разместить заголовок внутри первого элемента списка, выделив его от остальных элементов предложенными примерами.

          • Да, я в этом тоже не до конца был уверен, и всё же кроме статьи h зоголовки ни где больше не использую. Даже у наших SEO спецов (Кокшаров например) в сайдбаре используется h2, так что мнения разнятся.
            На счёт использования первого элемента списка в качестве заголовка — это идея, пожалуй на своих сайтах так и сделаю ))).

          • Я думаю, эта проблема возникла из-за того, что кроме h1-h6 нет других блочных элементов для текста заголовков, а элементы типа strong, b — строчные и не могут использоваться как самостоятельные заголовки, они выделяют только фрагменты текста.
            SEO не является точной наукой, поэтому существует множество мнений разных людей, причём большая часть их них нечем не подкрепляется. Поэтому не стоит воспринимать их советы на веру и забивать голову бесполезной информацией, ведь знания можно черпать из официальных источников:
            https://yandex.ru/support/webmaster/recommendations/intro.xml
            https://yandex.ru/company/rules/optimization
            https://support.google.com/webmasters/answer/35291?hl=ru
            Если есть вопросы — спрашивайте, будем вместе разбираться.
            А заголовок в элементе списка — так сделано у меня на сайте.

  • PaSHA SHeremetev

    Маленькие фишечки для оживления предполагаемо-скучного текста способны поменять первоначальный настрой.
    Спасибо.

    • Пожалуйста. Да, вы правы, небольшие украшательства для заголовков способны оживить текст.

  • xppx

    не знаете, как сделать чтобы заголовки статей как у картинки были там где название компании. понимаю, что такую загогулину корабликом можно в ccs прописать, но как?

    • Да, вы правы, можно сделать с помощью css.
      1 элемент — смотрите пример http://codepen.io/nazarelen/pen/JYRrqY.
      2 элемент (размеры и цвет подгоните сами) :
      div {
      width: 50px;
      height: 100px;
      border-left: 3px solid #9CD6C0;
      border-bottom: 3px solid #9CD6C0;
      border-top: 3px solid #9CD6C0;
      border-bottom-left-radius: 50px 100px;
      }
      Плюс позиционирование.