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

Заменив заголовки-изображения на заголовки, декорированные с помощью CSS-стилей, можно добиться большей гибкости в оптимизации сайта для индексирования текстового содержимого поисковыми роботами.

Для работы потребуются шрифты от Google Fonts. Приятного просмотра и вдохновения!

Пример 1

<div class="one"><h1>ART SHOW</h1></div>

.one {
  background: #FFF4ED;
  padding: 50px 20px;
  text-align: center;
}
.one h1 {
  font-family: 'Righteous', cursive;
  position: relative;
  color: #3CA1D9; 
  display: inline-block;
  border-top: 2px solid;
  border-bottom: 2px solid;
  font-size: 3em;
  padding: 11px 60px;
  margin: 0; 
  line-height: 1;
}
.one h1:before, .one h1:after {
  content: ""; 
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  border-left: 2px solid;
  border-right: 2px solid;
  background: repeating-linear-gradient(180deg, transparent, transparent 2px, #3CA1D9 2px, #3CA1D9 4px);
}
.one h1:before {left: 0;}
.one h1:after {right: 0;}
@media (max-width: 420px) {
  .one h1 {font-size: 2em;}
}

Пример 2

<div class="two"><h1>Burger Heroes</h1></div>

.two {
  background: #E4E5D2;
  padding: 50px 20px;
  text-align: center;
} 
.two h1 {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  color: #5C2610;
  font-size: 3em;
  font-weight: normal;
  line-height: 1;
  padding: 10px 0;
  margin: 0;
  display: inline-block;
}
.two h1:before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 200%;
  border-radius: 50%/30%;
  border: 6px solid #5C2610;
  border-left-color: transparent;
  border-right-color: transparent;
}
@media (max-width: 420px) {
  .two h1 {font-size: 2em;}
}

Пример 3

<div class="three"><h1>Новые поступления</h1></div>

.three {
  background: #FCF2E5;
  padding: 50px 20px;
  text-align: center;
} 
.three h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #FCF2E5;
  background: #90806A;
  font-size: 2.5em;
  font-weight: normal;
  padding: 10px 40px;
  display: inline-block;
  margin: 0;
  line-height: 1;
}
.three h1:before {
  content: ""; 
  position: absolute;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: -15px;
  background: #90806A;
}
.three h1:after {
  content: ""; 
  position: absolute;
  height: 0;
  width: 80%;
  border-top: 10px solid #90806A;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
}
@media (max-width: 500px) {
  .three h1 {font-size: 1.8em;}
}
@media (max-width: 400px) {
  .three h1 {
    font-size: 1.5em;
    padding: 10px 30px;
  }
}

Пример 4

<div class="four"><h1>Brand desight</h1></div>

.four {
  background: #F4F7EE;
  padding: 50px 20px;
  text-align: center;
} 
.four h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #C44737;
  font-size: 50px;
  font-weight: normal;
  padding: 8px 20px 7px 20px;
  border-top: 4px solid;
  border-left: 4px solid;
  display: inline-block;
  margin: 0;
  line-height: 1;
}
.four h1:before {
  content: ""; 
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  left: -28px;
  border: 4px solid #C44737;
  box-sizing: border-box;
}
@media (max-width: 450px) {
  .four h1 {font-size: 36px;}
  .four h1:before {
    width: 20px;
    height: 20px;
    top: -20px;
    left: -20px;
  }
}

Пример 5

<div class="five"><h1>КУРИНЫЙ РЕЦЕПТ</h1></div>

.five {
  background: #F7F4ED;
  padding: 50px 20px 50px 170px;
  text-align: center;
} 
.five h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  position: relative;
  color: #587493;
  font-size: 2.5em;
  font-weight: normal;
  display: inline-block;
  margin: 0;
  line-height: 1;
  padding: 8px 20px 8px 2px;
  border-top: 4px solid;
}
.five h1:before {
  content: "Новый";
  position: absolute;
  top: -10px;
  left: -160px;
  font-size: 1.5em;
  transform: rotate(-25deg);
  font-family: 'Marck Script', cursive;
}
.five h1:after {
  content: ""; 
  position: absolute;
  width: 120%;
  height: 4px;
  right: 0;
  bottom: -4px;
  background: #587493;
}
@media (max-width: 580px) {
  .five {padding-left: 130px;}
  .five h1 {font-size: 2em;}
  .five h1:before {left: -130px;}
}
@media (max-width: 480px) {
  .five {padding-left: 100px;}
  .five h1 {
    font-size: 1.5em;
    padding-right: 10px;
}
  .five h1:before {left: -100px;}
}
@media (max-width: 380px) {
  .five {padding-left: 90px;}
  .five h1 {font-size: 1.3em;}
  .five h1:before {left: -88px;}
}

Пример 6

<div class="six"><h1><span>Красота природы</span></h1></div>

.six {
  background: #F7E2C7;
  padding: 50px 20px;
  text-align: center;
}
.six h1 {
  font-weight: normal;
  font-family: 'Merriweather', serif;
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 1;
  color: #F7844E;
  font-size: 40px;
  padding: .4em 1em .55em;
}
.six h1:before,
.six h1:after {
  content: ""; 
  position: absolute;
  width: 60%;
  height: .1em;
  background: #294200; 
}
.six h1:before {
  left: 0;
  top: 0;
}
.six h1:after {
  right: 0;
  bottom: 0;
}
.six h1 span:before,
.six h1 span:after {
  content: ""; 
  position: absolute;
  width: .65em;
  height: .65em;
  border: .1em solid #294200;
  border-radius: 50%;
  box-sizing: border-box;
}
.six h1 span:before {
  top: -.55em;
  left: -.325em;
}
.six h1 span:after {
  bottom: -.55em;
  right: -.325em;
}
@media (max-width: 600px) {
  .six h1 {font-size: 2em;}
}
@media (max-width: 450px) {
  .six h1 {font-size: 1.5em;}
}