Windows XP
Интересные стили для заголовков с использованием псевдо-элементов. Дизайн заголовка Оформление заголовков css

Интересные стили для заголовков с использованием псевдо-элементов. Дизайн заголовка Оформление заголовков css

: убрали лишние теги 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;

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

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

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

В этом стиле для фона заголовка используется сплошная заливка и картинка. 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 без картинок. Полупрозрачный блок накладывается на основной текст. Цвет, фон, размеры можно изменить на свой вкус.

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

Пример 1. Заголовок в стиле web 2.0

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. Картинка может представлять собой любой узор. В спектре узора должен быть только один цвет — цвет фона.

Пример 2. Оформление заголовка узорами

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	тень вокруг текста

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

Почему применяются псевдо-элементы? Ответ прост: не нужна дополнительная разметка.

HTML

Прими урок со смирением

Никакой специальной разметки. Обычный заголовок с указанием класса.

CSS

Body{ width: 60%; margin: 50px auto; padding: 15px; position: relative; /*необходимо для заголовка 4*/ z-index: 0; /* необходимо для заголовка 4*/ border: 7px solid #cecece; border: 7px solid rgba(0,0,0,.05); background: #fff; background-clip: padding-box; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .5); } h1{ font-family: "Droid Sans", sans-serif; font-size: 22px; }

Обратите внимание на декларацию background-clip: padding-box . Она помогает получить интересный эффект: прозрачную рамочку для нашего контейнера. Свойство CSS background-clip определяет, будет ли фон элемента (цвет или изображение) взаимодействовать с ниже лежащими слоями.

Вот такой простой и приятный эффект получается с использованием свойства border:

Headline1 { border-bottom: 1px dashed #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; padding: 5px 15px; }

Заголовок 2

Такой стиль можно получить с помощью метода треугольника:

Headline2 { border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relative; } .headline2:before, .headline2:after{ content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; bottom: -15px; position: absolute; left: 25px; } .headline2:after{ border-top-color: #fff; border-right-color: transparent; bottom: -13px; left: 26px; }

Заголовок 3

А вот такой эффект ленты можно тоже использовать для оформления заголовка:

Headline3{ position: relative; margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/ margin-right: -22px; padding: 15px; background: #e5e5e5; background: -moz-linear-gradient(#f5f5f5, #e5e5e5); background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); background: -webkit-linear-gradient(#f5f5f5, #e5e5e5); background: -o-linear-gradient(#f5f5f5, #e5e5e5); background: -ms-linear-gradient(#f5f5f5, #e5e5e5); background: linear-gradient(#f5f5f5, #e5e5e5); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; text-shadow: 0 1px 0 #fff; } .headline3:before, .headline3:after{ position: absolute; left: 0; bottom: -6px; content:""; border-top: 6px solid #555; border-left: 6px solid transparent; } .headline3:before{ border-top: 6px solid #555; border-right: 6px solid transparent; border-left: none; left: auto; right: 0; bottom: -6px; }

С помощью свойства box-shadow также можно создать отличный заголовок:

Headline4{ position: relative; border-color: #eee; border-style: solid; border-width: 5px 5px 5px 0; background: #fff; margin: 0 0 15px -15px; padding: 5px 15px; -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); box-shadow: 1px 1px 1px rgba(0,0,0,.3); } .headline4:after { content: ""; position: absolute; z-index: -1; bottom: 15px; right: 15px; width: 70%; height: 10px; background: rgba(0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7); box-shadow: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); }

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

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

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

*, *: after , *: before { box-sizing : border-box ; }

*, *: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 ; }

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

Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 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 ; }

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

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

Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты 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 ; }

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

Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты 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 ; }

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

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

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

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. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.

Целью данной статьи, рассмотреть разные варианты стилизации h1, h2 заголовков. Тег H1 является важным тегом в теле странички. Как правило, он содержит в себе тематический заголовок страницы. Тег H1 должен выделяться, чтобы пользователю не составляло трудности понять, о чем идет речь на странице вашего сайта. Поэтому данный тег должен быть ярким моментом вашей страницы. CSS стилизация тега H1 может быть простой, но главное, чтобы размер шрифта был наибольшим среди других на странице. И не только потому, чтобы бросался в глаза пользователю, это также играет роль в релевантности странице, а значит и в оптимизации.

Тег H2, это дополняющий тег, он может быть смысловым подразделением H1. Мы также будем рассматривать варианты его стилизации.

Ниже предоставлены примеры и способы css стилизации h1, h2 заголовков.

Способы стилизации h1, h2 заголовков

Примеры CSS H1, H2

Способы стилизации h1, h2 заголовков

Способы стилизации h1, h2 тегов, мы будем рассматривать на создании ленты. Разберем, два варианта реализации заголовка в виде ленты: западный и мой вариант. Заранее скажу, что приоритетнее мой способ, но если вы имеете свои варианты (способы) стилизации заголовков, буду благодарен, если поделитесь ими в комментариях.

Западный способ

Как вариант неплохой, только мне не очень нравится CSS способ реализации ленты. Данный метод создания css h1 ленты, я нашел на одном из западных сайтов. Данная лента реализована на чистом css коде, хотя кроссбраузерность пострадала (в IE выглядит простым блоком). Ниже приведен исходный код css стиля.

H1.ribbon { font-size: 16px !important; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; margin: 0 0 3em; } h1.ribbon:before, h1.ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1; } h1.ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } h1.ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } h1.ribbon .ribbon-content:before, h1.ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em; } h1.ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } h1.ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; }

В HTML коде, h1 лента, выглядит таким образом:

CSS стилизация h1, h2 заголовков на сайт

Мой способ

Как видите, css код громоздкой, как для стилизации только h1 тега. Поэтому, предлагаю свой способ создания подобной ленты. Кросбраузерность тестировалась на IE, FireFox, Opera, Chrome. Ниже предоставлен css код и все исходные файлы.

H1 {height:67px; background: url(ribbon_left.png) left top no-repeat; color:#FFF;} h1 strong {height:67px; display:block; max-width:450px; margin-left:56px; padding-right:56px; background: url(ribbon_right.png) right top no-repeat;}

Способ применения в HTML:

CSS H1 заголовок на сайт

Картинки:

Общий вес картинок – 750 байт. CSS код занимает не более двух строк, вес – 236 байт. Я доволен результатом, притом все просто и понятно, в отличии от западного метода, где вес CSS кода – 980 байт. Хотя мой и западный вариант по весу идентичны, в коде гораздо хуже разобраться, нежели обработать картинку в фотошопе. Можно предположить, что скорость загрузки одного css файла, быстрее, нежели трех файлов (сумарно идентичных весу одного css файла), но можно реализовать background в виде спрайтов, которые увеличат скорость загрузки сайта. Узнать об увеличении скорости методом CSS спрайтов.

Примеры CSS H1, H2

Все примеры будут реализованы по принципу стилизации заголовков моим методом (пример, сайт ).

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

В данном пункте остановимся на реальных примерах стилизации h1 заголовка. Примеры, громко сказано, так как, у каждого сайта уникальный дизайн. Приведу один, универсальный пример стилизации H1. Мою идею стилизации заголовков вы уже поняли, хочу дополнить ее, используя в background-image прозрачность, которую легко можно сделать в фотошопе. Пример смотрите ниже.

Heading { width:500px; background: #888;} h1 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;} h1 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}

Исходные картинки:

Текст h1 заголовка

Как видите исходные картинки имеют полупрозрачность, а в классе heading, меняя значение background, можно добиться следующих результатов:

CSS h1 + h2 (совместная стилизация)

Стилизировать h1 и h2 вместе, уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h2. Например:

H1 – Стилизация h1, h2 заголовков;

H2 – Учимся оформлять h1, h2 заголовки на css.

Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта. Пример css h1 + h2, схож с пред идущим, рассмотрим css код.

Left{height:100px; background: url(left.png) left top no-repeat;} .right{ width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background: url(right.png) right top no-repeat;} h1 {color:#FFF; font-size:18px; padding:15px;} h2 {color:#CCC; font-size:16px; padding:5px;}

Исходные картинки:

Текст H1 заголовка

Маленькое вступление, или описание статьи, заключенное в H2 тег.

Отображение:

Суть совместной (h1 + h2) стилизации заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.

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

Стилизация h2 заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h1 и h2 заголовков, мы рассмотрим все до конца.

Как правило, тег h2, используют для выделения подпунктов статьи или другого материала на сайте.. Я бы советовал создавать, скромные, неброские, но удобные h2 заголовки. Мне очень нравится идея, как организовано на Википедии. Советую и вам создать подобно. Это просто и удобно. Например:

Пример стилизации h2 заголовка

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Еще подраздел вашей статьи

Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.