Как красиво оформить заголовки на сайте? Готовые стили заголовков

Яркие и привлекательные заголовки помогают читателям ориентироваться в тексте и делают дизайн сайта оригинальным, аккуратным и завершенным.

Где в шаблоне выводятся стили заголовков?
Готовые стили заголовков

В прошлой статье мы с вами оптимизировали заголовки сайта: убрали лишние теги h из элементов шаблона, вывели название каждой статьи в теге h1, назначили анонсам постов в рубриках теги h2.

Теперь с помощью тегов h1-h6 можно придать постам четкую структуру, которую так любят поисковики. Но вот беда – стили заголовков, мягко говоря, оставляют желать лучшего.

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

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

Хотите, чтобы ваш сайт радовал глаз? Тогда давайте учиться назначать стили заголовкам сайта.

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

Где в шаблоне выводятся стили заголовков?

Откройте «Внешний вид» — «Редактор». Найдите таблицу стилей style.css. Найдите блок текста с названием /* =Global.

В нем есть строчки:

/* Headings */
h1,h2,h3,h4,h5,h6 {
	clear: both;
}

Вот с ними мы и будем работать.

Нам нужно вместо этого кода написать следующее:

/* Headings */

h1 {бла бла бла
}
 
 h2 {бла бла бла
}
h3 {бла бла бла
}

h4 {бла бла бла
}

Вместо бла бла бла вы подставите свои значения шрифтов, отступов, градиентов.

Если какое-то значение, например, размер шрифта работать не будет, значит возник конфликт стилей. В этой конкретной строчке перед точкой с запятой нужно вписать волшебное словечко !important Это словечко отменяет действие стилей из других частей документа и заставляет выполнять именно эту заданную команду.

Выглядеть это будет так:

font-size: 23px !important;

В общем, было так:

А станет так:

А теперь давайте рассмотрим коды нескольких стилей. Они взяты из англоязычного источника. Рекомендую поменять семейство шрифтов на привычные нам Verdana и Arial. Цвета и их коды вы можете посмотреть в Таблице безопасных цветов.

Готовые стили заголовков для сайтов

Заголовок с фоновой картинкой в рамке

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

На основе этого стиля я сделала заголовки здесь на сайте.

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

Используемое в примере изображение я приведу в полную величину.

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

Адрес картинки прописывается в строке:

background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left;

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

Цвет текста можно поменять на любой другой в строчке

color: #355681;

Заголовок для сайта с темным дизайном

На лицо контраст яркого голубого цвета и темно-серого фона. Шрифты — Hammersmith One (sans-serif), Questrial (sans-serif).

 h2:after,
 h3:after,
 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);
}
 
 h2:after { background: #0AF; }
 h3:after { background: #3BF; }
 h4:after { background: #6Cf; }
 
 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;
}
 
 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;
}
 
 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;
}
 
 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;
}

Заголовок на фоне деревянной текстуры

Шрифты — Scada (sans-serif), Carrois Gothic (sans-serif). Листочек для заголовка h2 реализован через шрифт, а не через картинку.

 h1 i,
 h2 i,
 h3 i,
 h4 i {
    padding-right: 10px;
    color: #A8D13B;
    font-size: 0.8em;
}
 
 h2:after,
 h3:after,
 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);
}
 
 h2:after { width: 100%; }
 h3:after { width:  75%; }
 h4:after { width:  50%; }
 
 
 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;
}
 
 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;
}
 
 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;
}
 
 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;
}

Заголовки с нежирным шрифтом

Простенько и ненавязчиво. Может быть это цветовое решение натолкнет вас на какую-то новую идею.

 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);
}
 
 h2 {
    margin: 1em 0 0.5em 0;
    color: #148773;
    font-size: 26px;
    line-height: 40px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}
 
 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;
}
 
 h4 {
    margin: 1em 0 0.5em 0;
    color: #343434;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}

Простые заголовки в стиле газеты

Стиль отлично подойдет для сайта СМИ. Без изысков. Шрифты – Ultra (sans-serif), Orienta (sans-serif).

Англоязычный источник этих стилей: http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/

Заголовок в стиле web 2.0

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

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

HTML:

<h3 id="example">Пример 1. Заголовок в стиле web 2.0 <span></span></h3>

CSS:

h3#example {
   font: normal 27px tahoma;
   position: relative;
   background: #000;
   color: #0cf;
   padding: 10px 0px;
}
h3#example span {
   position: absolute;
   top: 29px;
   left: 0;
   width: 100%;
   height: 15px;
   background: #000; /* цвет накладываемого блока, должен совпадать с цветом фона основного блока */
   overflow: hidden;
   opacity: 0.45;
   filter: alpha(opacity=45);
}

Правда у этого метода есть один недостаток: ту часть текста, которая находится под полупрозрачным блоком, нельзя выделить курсором.

Заголовок с узором

Здесь накладывается не полупрозрачный блок, а полноценная картинка в формате PNG или GIF. Картинка может представлять собой любой узор. В спектре узора должен быть только один цвет — цвет фона.

HTML:

<h3 id="example2">Пример 2. Оформление заголовка узорами<span></span></h3>

CSS:

h3#example2 {
   font: normal 27px tahoma;
   position: relative;
   background: #000;
   color: #0cf;
   padding: 10px 0px;
}
h3#example2 span {
   position: absolute;
   top: 15px;
   left: 0;
   width: 100%;
   height: 30px;
   background: url(lines.gif); /* картинка-узор */
   overflow: hidden;
   opacity: 0.60;
   filter: alpha(opacity=60);/
}

картинка-узор

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

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

Свойства	описание
font-size	размер текста
font-family	шрифт текста
text-align	расположение текста
text-indent	красная строка
letter-spacing	расстояние между буквами
line-height	межстрочный интервал
word-spacing	расстояние между словами
white-space	отображает пробелы между словами
font-variant	вывод текста большими/маленькими буквами
font-weight	толщина букв
text-shadow	тень вокруг текста

Возможно вас еще заинтересует:

Как красиво оформить заголовки на сайте? Готовые стили заголовков: 1 комментарий

Ксенья Юрьевна говорит 28.04.2016 в 21:17:
Здравствуйте, у вас не включена подписка по электронной почте. Хотела подписаться и такой получила ответ. Вероятно вы не настроили подписку по emeil
Войдите, чтобы ответить

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

Для отправки комментария вам необходимо авторизоваться.