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

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

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

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

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

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;
}