Задача

Изменить цвет текста заголовка и фона под ним.

Решение

Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).

Пример 1. Цвет фона под заголовком

HTML5 CSS 2.1 IE Cr Op Sa Fx

Закон внешнего мира

Закон внешнего мира методологически выводит интеллигибельный мир, хотя в официозе принято обратное.

Результат данного примера показан на рис. 1.

Рис. 1. Цвет фона под заголовком текста

Учтите, что на размер цветного прямоугольника влияет не только размер текста, но и отступы вокруг него. Поэтому регулируйте размер фона за счет свойства padding , добавляя его опять же к селектору h1 .

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

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

Шапка сайта – какой она бывает

Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.

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

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

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

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

< header > < / header >

Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим.

header{ width: 100%; background: #D8E3AB; height: 70px; }

header { width : 100 % ; background : #D8E3AB; height : 70px ;

Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.

Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.

Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.

< div id = "wrap" > < header > < / header > < / div >

Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его.

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Для этого достаточно дописать некоторые правила к фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

background : #D8E3AB url(logo.png) no-repeat 5% 50%;

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

Название сайта

• Контакты
• О нас
• Услуги

< div class = "title" > Названиесайта< / div > < ul class = "menu" > < li > < a href = "#" > Контакты< / a > < / li > < li > < a href = "#" > Онас< / a > < / li > < li > < a href = "#" > Услуги< / a > < / li > < / ul >

Теперь все это оформим.

Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

Title { font - size : 36px ; padding - top : 10px ; text - align : center ;

Независимо от того, какой сайт или веб приложение разрабатывается, всегда возникает необходимость создавать стили для заголовков, подобных 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); }

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