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

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

    Содержание

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





 

В прошлой статье мы с вами оптимизировали заголовки сайта: убрали лишние теги 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;

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

103

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

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

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

100

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

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

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

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

Заголовок выполнен на одном 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);
}

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

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

css стили заголовков

Здесь накладывается не полупрозрачный блок, а полноценная картинка в формате 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тень вокруг текста

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

Ваши лайки — лучшая награда для автора

Получать новые посты первым на email

4 причины подписаться на SEO Блог Лентяйки

  • Жалко тратить годы напряженного труда ради копеечной пенсии? Открывайте бизнес и учитесь обращаться с деньгами!
  • Устали искать крупицы знаний в море информации? Сразу читайте полезные статьи без воды и философии.
  • Лень скроллить страницу? Четкое оглвление статьи – и вы быстро путешествуете по блокам текста.
  • Лень даже привстать с дивана? Долой прокрастинацию! Используйте лень как мотивацию для личностного роста!



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

  1. Здравствуйте, у вас не включена подписка по электронной почте. Хотела подписаться и такой получила ответ. Вероятно вы не настроили подписку по emeil smile

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