CSS стили для заголовков сайта

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

Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус, я же приведу лишь 5 самых интересных, на мой взгляд. Они могут давать вам идеи и подсказки при реализации своих уникальных стилей. Также советуем глянуть подборку лучших шрифтов Google Fonts для заголовков.

CSS стили для заголовков

Демо // Скачать

Перед тем как начать пару моментов:

  • Все шрифты из примеров являются бесплатными и доступны в Google WebFonts.
  • В примерах имеются только заголовки Н1-Н4 так как они наиболее часто используемы.
  • Автор CSS стилей использовал модель при которой [ширина] = [фактическая ширина элемента] + [отступы padding] + [границы borders]. Для этого в коде расположен сниппет:
*, *:after, *:before {
    box-sizing: border-box;
}

Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной типографики. Итак, во всех примерах CSS стилей используется один и тот же «ритм»:

h1 {
    font-size: 36px;
    line-height: 40px;
}
 
h2 {
    font-size: 30px;
    line-height: 40px;
}
 
h3 {
    font-size: 24px;
    line-height: 40px;
}
 
h4 {
    font-size: 18px;
    line-height: 20px;
}

Теперь можно переходить непосредственно к практике.

Пример 1

CSS стили для заголовков

Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:

.demo-1 .main h1 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-weight: normal;
    font-family: 'Ultra', sans-serif;  
    font-size: 36px;
    line-height: 42px;
    text-transform: uppercase;
    text-shadow: 0 2px white, 0 3px #777;
}
 
.demo-1 .main h2 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-weight: normal;
    font-size: 30px;
    line-height: 40px;
    font-family: 'Orienta', sans-serif;
}
 
.demo-1 .main h3 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-size: 22px;
    line-height: 40px;
    font-weight: normal;
    text-transform: uppercase;
    font-family: 'Orienta', sans-serif;
    letter-spacing: 1px;
    font-style: italic;
}
 
.demo-1 .main h4 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-size: 18px;
    line-height: 20px;
    font-weight: normal;
    font-family: 'Orienta', sans-serif;
}

Пример 2

CSS стили для заголовков

Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).

.demo-2 .main h1 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative; 
    font-size: 36px;
    line-height: 40px;
    padding: 15px 15px 15px 15%;
    color: #355681;
    box-shadow:
        inset 0 0 0 1px rgba(53,86,129, 0.4),
        inset 0 0 5px rgba(53,86,129, 0.5),
        inset -285px 0 35px white;
    border-radius: 0 10px 0 10px;
    background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left;
}
 
.demo-2 .main h2 {
    margin: 1em 0 0.5em 0;
    font-weight: normal;
    position: relative;
    text-shadow: 0 -1px rgba(0,0,0,0.6);
    font-size: 28px;
    line-height: 40px;
    background: #355681;
    background: rgba(53,86,129, 0.8);
    border: 1px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
    box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
    font-family: 'Muli', sans-serif;
}
 
.demo-2 .main h3 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-size: 22px;
    line-height: 40px;
    color: #355681;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(53,86,129, 0.3);
}
 
.demo-2 .main h4 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    font-size: 18px;
    line-height: 20px;
    color: #788699;
    font-family: 'Muli', sans-serif;
}

Пример 3

CSS стили для заголовков

Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).

.demo-3 .main h2:after,
.demo-3 .main h3:after,
.demo-3 .main h4:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.5),
        0 1px 1px rgba(255,255,255,0.3);
}
 
.demo-3 .main h2:after { background: #0AF; }
.demo-3 .main h3:after { background: #3BF; }
.demo-3 .main h4:after { background: #6Cf; }
 
.demo-3 .main h1 {
    font-size: 36px;
    line-height: 40px;
    margin: 1em 0 .6em 0;
    font-weight: normal;
    color: white;
    font-family: 'Hammersmith One', sans-serif;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    position: relative;
    color: #6Cf;
}
 
.demo-3 .main h2 {
    margin: 1em 0 .6em 0;
    padding: 0 0 0 20px;
    font-weight: normal;
    color: white;
    font-family: 'Hammersmith One', sans-serif;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    position: relative;
    font-size: 30px;
    line-height: 40px;
}
 
.demo-3 .main h3 {
    margin: 1em 0 .6em 0;
    padding: 0 0 0 20px;
    font-weight: normal;
    color: white;
    font-family: 'Hammersmith One', sans-serif;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    position: relative;
    font-size: 24px;
    line-height: 40px;
    font-family: 'Questrial', sans-serif;
}
 
.demo-3 .main h4 {
    margin: 1em 0 .6em 0;
    padding: 0 0 0 20px;
    font-weight: normal;
    color: white;
    font-family: 'Hammersmith One', sans-serif;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
    position: relative;
    font-size: 18px;
    line-height: 20px;
    font-family: 'Questrial', sans-serif;
}

Пример 4

CSS стили для заголовков

Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.

.demo-4 .main h1 i,
.demo-4 .main h2 i,
.demo-4 .main h3 i,
.demo-4 .main h4 i {
    padding-right: 10px;
    color: #A8D13B;
    font-size: 0.8em;
}
 
.demo-4 .main h2:after,
.demo-4 .main h3:after,
.demo-4 .main h4:after {
    position: absolute;
    content: "";
    height: 1px;
    border-radius: 2px;
    left: 0;
    bottom: 0;
    box-shadow:
        0 -1px 0 rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.6);
}
 
.demo-4 .main h2:after { width: 100%; }
.demo-4 .main h3:after { width:  75%; }
.demo-4 .main h4:after { width:  50%; }
 
 
.demo-4 .main h1 {
    margin: 1em 0 0.75em;
    padding: 0 0 5px 0;
    color: #6B5344;
    font-weight: normal;
    position: relative;
    text-shadow: 0 2px 0 rgba(255,255,255,0.5);
    font-size: 36px;
    line-height: 40px;
    font-family: 'Carrois Gothic', sans-serif;
}
 
.demo-4 .main h2 {
    margin: 1em 0 0.75em;
    padding: 0 0 5px 0;
    color: #6B5344;
    font-weight: normal;
    font-family: 'Scada', sans-serif;
    position: relative;
    text-shadow: 0 2px 0 rgba(255,255,255,0.5);
    font-size: 30px;
    line-height: 40px;
}
 
.demo-4 .main h3 {
    margin: 1em 0 0.75em;
    padding: 0 0 5px 0;
    color: #6B5344;
    font-weight: normal;
    font-family: 'Scada', sans-serif;
    position: relative;
    text-shadow: 0 2px 0 rgba(255,255,255,0.5);
    font-size: 24px;
    line-height: 40px;
}
 
.demo-4 .main h4 {
    margin: 1em 0 0.75em;
    padding: 0 0 5px 0;
    color: #6B5344;
    font-weight: normal;
    font-family: 'Scada', sans-serif;
    position: relative;
    text-shadow: 0 2px 0 rgba(255,255,255,0.5);
    font-size: 18px;
    line-height: 20px;
}

Пример 5

CSS стили для заголовков сайта

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

.demo-6 .main h1 {
    margin: 1em 0 0.5em 0;
    font-weight: 100;
    text-transform: uppercase;
    color: #00caa6;
    font-style: italic;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 58px;
    line-height: 54px;
    text-shadow: 2px 5px 0 rgba(0,0,0,0.2);
}
 
.demo-6 .main h2 {
    margin: 1em 0 0.5em 0;
    color: #148773;
    font-size: 26px;
    line-height: 40px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}
 
.demo-6 .main h3 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-size: 22px;
    line-height: 40px;
    font-weight: 100;
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 1px;
    font-style: italic;
}
 
.demo-6 .main h4 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}

Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.

P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.

7 комментариев к статье “CSS стили для заголовков сайта”
  1. Vladymyr

    Самый хороший пример 4. Остальное плохо подобраны цвета шрифтов. Но всёравно спасибо за инфу, будет полезно для новичков.
    А вообще нужно не только подбирать цвет и размер тени (эффект вдавлиности), но и подбирать цвет самого шрифта, так как шрифт и его объёмность + фон должны гармонично смотреться и играть между собой.

  2. Tod

    Vladymyr, тут еще важно как шрифты смотрятся в общем дизайне сайта — тогда может некоторые из них и «заиграют» весьма интересно.

  3. Катя

    В примере 2 как сделать так, чтобы линия тега h2 обрывалась если есть фото напротив.
    Пример тут http://clip2net.com/s/jaFF1S

  4. Tod

    Катя, точный код, увы, вам не подскажу. Было бы просто, если бы для этого h2 был какой-то class, тогда в стилях можно было бы легко прописать для h2.class_name ширину width: 400px. Но если прописывать просто для h2, то все они будут одинаковые даже когда картинки рядом нет. Может попробовать width: 100%, или убрать position: relative.

  5. Елена

    Огромное спасибо! Очень помогло )

  6. Антон

    Спасибо хорошие примеры, пригодятся. Вот только я искал другое) Заголовок с линиями по бокам http://frontblog.ru/verstka-zagolovoka-s-liniyami-po-bokam-na-css.html , а у вас на сайте не смог найти такого(

  7. Tod

    Антон, рассмотреть все варианты нереально:) Реализаций стилей для заголовков может быть множество.

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *