Как добавить цвет фона к заголовку текста? Интересные стили для заголовков с использованием псевдо-элементов Способы стилизации h1, h2 заголовков
: убрали лишние теги 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 | тень вокруг текста |
Оформление текстовой информации в 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. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.
Говорят, вы не можете судить о книге по ее обложке, и все-таки люди делают это каждый день. Они берут книгу, смотрят на обложку, а затем берут новую либо кладут обратно, или переворачивают и смотрят, что написано на обратной стороне, ИЛИ открывают её, только взглянув на обложку. Вебсайты также оценивают по их обложке и первому впечатлению, которое часто исходит от Заголовка.
Заголовок Вашего сайта, как правило, первое, что видят люди. Из этой надписи или рисунка верхней части страницы, люди делают радикальные суждения о том, что они увидят и прочитают. Те же люди, которые говорят, что вы не можете судить о книге по ее обложке, также говорят, что у вас есть только 30 секунд, чтобы произвести хорошее впечатление. В мире Интернета, где до следующей страницы - щелчок мышки, у вас гораздо меньше времени на это.
Мы расскажем Вам об Архитектуре Заголовков в WordPress и предложим советы о том, как настроить его таким образом, чтобы он стал Вашей собственной "книжной обложкой", заманивающей людей на Ваш сайт, производя хорошее впечатление. Затем мы предложим Вам некоторые советы экспертов о том, что именно представлет собой Хороший заголовок на сайте.
Contents
WordPress Заголовок
По умолчанию, заголовком в WordPress является простой кусок кода. Вам не нужно разбираться в коде, чтобы изменить заголовок, который поставляется с любой WordPress темой. Вам нужно установить в блоге или на сайте Название и Описание сайта в > > , а WordPress сделает все остальное.
В своей простейшей форме - Классической Теме - WordPress Заголовок представяет собой код в файле шаблона wp-content/themes/classic/header.php:
">
Заголовок расположен в h1 теге и и выполняет функцию , использующихся в двух различных вариантах или параметрах. Вы можете узнать больше об этих параметрах в документации по . В принципе, первый отображен в сайта в ссылке, а второй отображает имя блога или сайта, как установлено в > > панели. Когда пользователь перемещает курсор на название заголовока, заголовок может быть нажат, чтобы вернуться к основной или главной странице сайта, как это предусмотрено в > > панели.
Тема Default WordPress определяет особенности изображений в фоновом режиме и представляет заголовок, как это в wp-content/themes/default/header.php:
">
The header of the Default/Kubrick Theme
Тег шаблона показывает имя блога или веб-сайта в ссылке, но это демонстрирует другое использование похожего на URL запроса выше. Он получает такую же информацию, просто по-другому. Он добавляет из описания сайта в > > .
Проще говоря, эти два примера заголовков делают одно и то же разными путями. Они обеспечивают информацию для заголовка с потенциальной возможностью размещения изображения, а создание может помочь в навигации на сайте. Это всего лишь вопрос того, сколько информации Вы хотите видеть в своем заголовке и как эта информация будет отображается.
Используя первый пример из Classic Theme, изображение все еще может быть использовано в качестве фонового, установленного в таблице стилей в h1 селекторе, вторая тема дает больше контроля в использовании картинки в заголовке путем присваивания ей собственносй области разделения. То, как это выглядит, полностью контролируется таблицей стилей.
Стиль Заголовка
Как указано в двух приведенных выше примерах, стили для заголовка содержатся внутри селекторов: h1 , header , headerimg , и description . Все это находится в style.css , хотя также может находиться в файлах стиля header.php из темы, которую вы используете. Вам придется проверить в обоих местах. В классической теме CSS для заголовка находятся в одном селекторе #header .
#header { background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% "Times New Roman", Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px 10px 15px 60px; }
Зеленый оттенок выбран в качестве цвета фона и границы вокруг заголовока, но граница имеет другой оттенок и создает утопленный, теневой эффект. Шрифт Times New Roman задается размером 230% с более широким, чем обычно, межсимвольным расстояние. Отступ к стороне создает отступы для текста внутри заголовка.
Все они могут быть легко изменены простым редактированием каждого атрибута стиля: может быть увеличина толщина границы и всё с тем же цветом, измененён цвет фона, размер и стиль шрифта, расстояние между буквами и т.д.
То же самое относится и к заголовку в Default WordPress теме, за исключением того, что в ней несколько больше стилей, о которых придётся позаботиться. Они находятся внутри header.php в "head" теге и в style.css . Когда имеется большое количество стилей, лучше перемещать всю информацию в таблицу стилей.
Стили, которые контролируют вид заголовка, находятся в пределах h1, header , headerimg , и description CSS селекторов. Так же, как и для классической темы, можно найти эти ссылки и сделать изменения там, чтобы изменить внешний вид.
Изменение заголовка изображения по умолчанию WordPress тема была упрощена с введением утилиту под названием Kubrickr . Он просто просит вас поставить новое имя файла изображения для заголовка, а затем переводит его для вас, поэтому вам не придется копаться в коде. Если все, что вы хотите изменить это изображение заголовка, это чрезвычайно полезный и простой инструмент.
Если вы хотите, программировать или копаться в ваших стилях заголовка и внесить необходимые изменения. Ниже приведен простой учебник по изменению только заголовок изображения вручную.
Изменение изображения заголовка
Есть много различных изображений заголовока и дизайнерских решений доступны для редактирования и использовать. стили для заголовка изображения по умолчанию или Кубрика WordPress тема, и любая тема основана на эту тему, являются более сложными, чтобы изменения, чем те, на классические темы. стили находятся в пределах стилей в header.php "голова" раздел, а также в styles.css. Чтобы изменить только ссылки заголовка изображения, откройте файл header.php шаблона и искать стили вроде этого:
#header { background: url("/images/wc_header.jpg") no-repeat bottom center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
ПРИМЕЧАНИЕ: Использование bloginfo возможно только, когда стиль используется вместе с главным файлом шаблона. Теги WordPress шаблон не будет работать в таблице стилей (style.css). Для перемещения этого стиля в таблицу стилей, измените тега шаблона на фактический адрес (URL) из изображения заголовка.
Для изменения файла, заменить "kubrickheader.jpg" с именем нового графического изображения вы загрузили на ваш сайт, чтобы заменить его. Если она находится в другой каталог, изменение, заменив bloginfo () теги с конкретным адресом графического месте.
Если вы используете образ, который имеет тот же размер, то просто заменить изображение. Если это различного размера, заполнить в высоту и ширину изображения в следующем разделе называется #headerimg . Если вы не знаете и не используете Windows, просматривать папки, в которой находится изображение на вашем компьютере в режиме просмотра "Миниатюра". Нажмите кнопку "View> Миниатюра" из меню Windows Explorer. В режиме просмотра Миниатюра, найти свой образ и удерживайте нажатой клавишу мыши. небольшая заметка шар появится список размеров. Использовать эту информацию в стилях. В противном случае, просто щелкните правой кнопкой мыши на графический файл и выбрать "Свойства", и это должно дать вам размер файла и размеры.
С заголовок изображения на месте, пришло время для решения остальных заголовков. Откройте style.css стиле файл лист и обратить внимание на следующее:
- header
- headerimg
- description
Ваша тема может или не может иметь все эти, но тема по умолчанию имеет все из них в разных местах в таблице стилей. Все или некоторые из этих, возможно, должны иметь атрибуты изменены, чтобы изменить внешний вид вашего заголовка. При изменении размера изображений заголовка или заголовка искусства, убедитесь, что и изменение другие структурны CSS селекторов, такие как содержание или боковую панель согласно изменениям в размере заголовка.
Спецификация на заголовок изображения
Заголовок изображения, что вписывается в WordPress тема по умолчанию составляет около 192 х 740 пикселей. При замене заголовка в любом WordPress тема, проверить размер заголовка изображения, а затем найти замену, что матчи такого размера. Если вы выбираете изображение заголовка, который меньше или шире или выше, чем замены, вы, возможно, придется изменить другие структурные элементы веб-страницы, чтобы для изменения размера заголовка.
Если вы изменяете тема всего сайта, ширина общую страницу или содержание области должны быть приняты во внимание на размер заголовка изображения. Два наиболее распространенных размеров экрана 1024x768 и 800x600 пикселей. Тем не менее, широкие мониторы набирают силу и веб-дизайнеры теперь нужно готовиться к экран шириной 1280x1024 и 1600x1200.
Если вы установите ваш веб-сайт "плавать", расположен в средней части окна браузера с места на обе стороны, то вы можете установить ваш заголовок ширину, что вы хотите. При разработке темы с гибкими или "упругих" ширины экрана, то ширина заголовок становится важным.
Если вы используете заголовок изображения, что может быть повторен, и вы используете упругой ширины, вы можете установить стили в заголовке повторить для заполнения пространства:
#header { background: url("/images/kubrickheader.jpg") repeat-x top left; }
Это заствит изображение заголовка повторяться горизонтально начиная с верхнего левого угла и до конца. Вы можете настроить это поведение как пожелаете background position согласно вашим техническим и дизайнерским потребностям.
Искусство заголовка
Новый термин появившийся в области веб-дизайна - Искусственный заголовок (header art). Это изображения заголовка, которые, как правило, сделаны вручную, используя комбинации цветов, форм, символов, изображения и текста. Создания такого заголовка может быть трудным, отнять много вермени у автора. Хотя существуют и свободные Искусственные заголовки, некоторые сайты продают свои ручной искусства заголовка. Хотя фотография может быть уникальным в своем роде и передать необходимые визуальный стиль, ручная работа заголовок легче матча к другим цветам веб-страницы и, как правило, более эстетично из-за его особого характера.
Выбор готовых заголовка искусство имеет некоторые преимущества. художники сделали работу и все, что вам нужно сделать, это выбрать дизайн, который наиболее соответствует Ваш сайт. И графический готова к использованию, уже размера и сохранить как небольшой размер файла.
В этом примере, шаблонный тег list_cats() устанавливает сортировку листа категории по ID в не упорядоченный лист (
- ) без дат или подстчета постов, не скрывает пустые категории, использует категорию "описание" для титула в ссылке, не показывает наследников родительской категории, и исключает категории 1 и 33. Он находиться в своей собственном блоке "категории". Обратите внимание что ссылка на "домашнюю" старницу или главную страницу бфла добавлена вручную в начале листа.
- HOME
">
Для того что бы придать стиль этому листу, используем #categorylist в style.css:
#categorylist {font-size:12px; font-style:normal; text-transform:uppercase; } #categorylist ul {list-style-type: none; list-style-image:none; margin:0; padding-bottom: 20px; } #categorylist li { display: inline; padding: 0px 5px;} #categorylist a:link, #category a:visited {color:blue} #categorylist a:hover {color:red}
Блок будет выглядеть вот так:Вот некоторые советы и информацию, которая поможет вам выбрать и настроить заголовок вашего WordPress сайта.
Обратите внимание на размещение текста и цвета. Цвет и размещение текста в заголовке можно добавить или вычесть к презентации. Вот несколько советов.
- Если вы используете белый текст, убедитесь, что цвет фона в header и/или headerimg , чтобы продемонстрировать белый текст еще раз, если по некоторым причинам изображение не появляются на экране или пользователь "показывать картинки" выключен. Это позволит вашим белый текст, все еще видны.
- Если изображение главной особенностью или элемента, положение текста, чтобы она не распространяется на основной предмет изображения.
- Если текст тяжело читать в отношении занятости области графики, положение текста менее насыщенной области заголовка изображения.
- Убедитесь, что цвет текста легко видеть, для всех посетителей сайта и не конфликтует с цветами заголовков искусства. Флуоресцентный оранжевый текст на зеленом фоне извести является болезненным.
- Имейте в виду, что некоторые цветовые различия и моделей в заголовке вашего искусства могут сделать букв текста в текст обложил "исчезают". То же самое относится, если вы вставлять текст в искусстве верхнего или заголовок изображения.
Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.
Дерзкий и эффектный заголовков предназначены смелым сайтам, в то время как мягкие и пастельные тона сайтов поддаются мягкие графических заголовков. Сайт, посвященный панк-рок и гранж группам должна иметь панковский или гражевый заголовок. Это зависит от вас, но делайте это согласованно.
Заголовки не всегда должны быть с картинками. Не все заголовки должны быть с фотографиями и картинками. Иногда слова более важны, являются ли они против мыть цвета или белом фоне. Беспорядочный заголовок делает сайт ещё более беспорядочным. Избегайте навязчивых объявлений, заграможденной навигации, нечитабельного текста, длинных новостных лент в Заголовоке. Чем проще тем лучше. Следуйте стандартам accessibility в Заголовоке. Мы говорили , но есть нечто больше что вы можете сделать, чтобы убедиться, что ваш заголовок соответствует стандартам доступности. Используйте h1 теги тогда спциальные программы которые читают текст с экрана признать его в качестве заголовка . Использование Alt в ссылках и изображениях. Заголовки могут быть любой высоты, но помните, содержание это главное. Средняя заголовок менее 200 пикселей в высоту, но заголовки диапазоне высот от очень тонких до половины страницы. Помните, что основная причина люди посещают ваш сайт является его содержание, и больше они должны прокрутить вниз мимо вашего заголовка, чтобы добраться до содержимого, менее заинтересованы они, как правило. Справка привести их к содержанию с заголовка. Продумайте "Индивидуальность сайта". Заголовок является частью личности сайта, люди нужна уверенность что они на том же сайте, когда он нажимают ссылку на другую страницу сайта. Рассмыстривайте Заголовок и/или Искусственный заголовок как "брендовый знак" вашего сайта.
К заголовкам на сайте или блоге всегда хочется привлечь внимание, хочется сделать их красивыми и желательно с эффектами (например тень, свечение или 3D). Достаточно красивые заголовки можно делать в программе Adobe Photoshop, однако, на выходе они представляют собой картинки, а значит их текс не могут прочесть поисковые роботы… Что же делать? Выход есть!
И действительно, при определении релевантности Вашей веб страницы определенным поисковым запросам и присвоении ей места в поисковой выдаче заголовки играют ДАЛЕКО не последнее место. Я бы даже сказала — одно из наиболее значимых. Было бы достаточно опрометчиво оставлять их в виде картинки (хотя один раз я переделывала один веб сайт, весь текст которого на нескольких страницах представлял собой картинку… да, да и такое встречается…).
Можно конечно же «забить» на красоту и сделать заголовки обычными, как везде. Но зачем, если есть достаточно несложный способ, который и заголовки Ваши оставит в формате текста и эффектов им может придать очень красивых и интересных? И сегодня я Вам эти приемы покажу. Думаю, после того, как Вы освоите эти приемы, то будете пользоваться ими постоянно. Одним словом, убьете двух зайцев: придадите эффектность своему веб дизайну и релевантности страницы не навредите.
Давайте начнем!
Создаем 3D заголовок
Итак, будем создавать эффекты прямо при верстке веб страницы.
1. Для начала нужно создать новый html-файл, а также файл таблицы стилей (css).
Чтобы показать Вам как все это делается я создала html-файл и назвала его «title.html» (все исходные файлы этого урока при необходимости Вы можете скачать и посмотреть в «исходниках»). Вот исходный код нашего html-файла:
Untitled Document 3D Text Here
Shadow Title Here
Glow Text Here
Anaglyphic Text
Это документ формата HTML5, к нему подключена таблица стилей (файл css.css), внутри тега body присутствуют только четыре заголовка разного калибра.
С этими заголовками мы и будем работать. Больше в html-файле нам ничего не понадобится.
2. Как я уже говорила нам нужен файл таблицы стилей. Мы его уже подключили, но если Вы его не создали, то создайте.
Я создала файл с именем css.css и расположила его в том же каталоге, что и html-файл.
Перед тем как приступить к созданию 3D-заголовка давайте пропишем несколько основных стилей для странички, чтобы она выглядела немного привлекательнее.
Пропишем высоту, ширину, цвет страницы, оцентруем ее и зададим пунктирную рамку для тега body.
А еще сразу выровняем все наши заголовки по центру.
Вот код, который нужно прописать в файл таблицы стилей:
Body{height:700px; width:90%; background-color:#069; margin:0 auto; border:1px dashed #000066; } h1, h2, h3, h4{text-align:center;}
Запустите html-файл в браузере. Страничка будет выглядеть так:
3. Теперь начнем превращения. Будем превращать в 3D-текст заголовок h1.
Все это будет происходить все в том же файле таблицы стилей.
Поместите следующий код ниже всего того, что Вы написали до этого в файл css.css:
H1{font-size:72px; color:#fff; text-shadow:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0; }
А теперь давайте разберем этот кусок кода. В первых двух стоках мы задаем размер шрифту и основной цвет. А вот дальше начинается самое интересное. При помощи свойства text-shadow мы как бы создаем тень шрифту, но не совсем.
Дело в том, что после двоеточия в этом свойстве перечислены следующие параметры: цвет, сдвиг по горизонтали, сдвиг по вертикали и размытие.
Что мы делаем?
Во-первых: мы подбираем цвет близкий к основному, но потемнее. В нашем примере основной цвет белый, а цвет для text-shadow серый (но не очень темный). Здесь нужно экспериментировать, пока не добьетесь нужного результата.
Во-вторых: мы постепенно сдвигаем (каждый раз на 1 пиксель) эту тень вправо и вверх. Об этом говорят следующие 2 параметра (1px -1px, 2px -2px и т.д.).
В-третьих: размытие мы везде оставляем нулевым, потому что для создания 3D-текста оно нам просто не нужно.
В итоге получаем вот такую картину:
В этом примере я остановилась на 5px сдвига, но Вы можете делать и больше или меньше. Все зависит от того, какого результата Вы хотите добиться.
Также обязательно экспериментируйте с цветами, стараясь создать более естественный вид.
Создаем заголовок с тенью
Создать заголовок с тенью очень просто. И добьемся мы этого всего несколькими строками кода.
Сейчас будем работать над заголовком h2.
Для начала нужно задать ему размер и основной цвет (размер я выставляю точно такой же как и у заголовка h1, но Вы, конечно же оформляйте каждый заголовок как нужно Вам).
После того как задали цвет и размер, опять воспользуемся свойством text-shadow. Первым параметром укажем цвет, его нужно взять потемнее (все-таки это тень). Второй и третий параметры – это сдвиги по горизонтали и вертикали. Текст у меня большой, так что я сделаю их равными 5 пикселям. И последний параметр – это радиус размытия. Для тени он нужен, поэтому присваиваем ему значение 4 пикселя. В итоге, код будет выглядеть вот так:
H2{font-size:72px; color:#F90; text-shadow:#191919 5px 5px 4px; }
А выглядеть это будет вот так:
Вы можете экспериментировать с параметрами и при этом получать разные результаты. Учитывайте размер шрифта Вашего текста, его цвет и то, что Вы хотите получить.
Создаем заголовок со свечением
Это тоже просто. Здесь будем работать с заголовком h3.
Принцип такой же: сначала мы задаем размер шрифту и его основной цвет, а потом используем text-shadow.
Выбираем цвет свечения. Он, как Вы понимаете, будет светлее основного цвета заголовка. Второй и третий параметры будут равны нулю (здесь мы ничего никуда сдвигать не будем). А вот радиус размытия нужно сделать побольше (его размер тоже зависит от того, какое свечение Вы хотите получить).
В итоге код будет следующим:
H3{font-size:72px; color:#333; text-shadow:#fff 0 0 20px; }
А выглядеть наш заголовок со свечением будет вот так:
Заголовок со стереоэффектом
Еще его можно назвать анаглифическим текстом. Его можно сравнить с очками для просмотра 3D фильма.
Не буду Вас мучить… Как говорится: лучше один раз увидеть, чем слушать длинное описание.
Эффект очень интересный и создать его в принципе тоже не сложно.
Давайте начнем. Здесь мы будем работать с заголовком h4.
1. Для начала зададим размер для заголовка. Я сделаю его таким же, как и у остальных заголовках в нашем примере.
Теперь нужно спозиционировать элемент заголовка. Придадим свойству position значение relative. Это значит, что положение элемента будет установлено относительно его исходного места.
Теперь дадим ему цвет. Делать мы это будем в формате rgba. Если Вы еще не сталкивались с таким определением цвета, то не пугайтесь. Все просто: первые три параметра в скобках будут определять цвет (формат rgb), а последний параметр определит степень его непрозрачности. В нашем примере это значение будет равным 0.5 (то есть 50%).
Вот код всего вышеописанного:
H4{font-size:72px; position:relative; color:rgba(0,0,102,0.5); }
2. А теперь самое интересное. Мы создадим для нашего элемента h4 псевдо элемент. Для этого нужно будет прописать его в таблице стилей как h4:after .
У этого псевдо элемента будет несколько интересных свойств. Например, свойство content , в котором необходимо прописать точно такой же текст, как и у заголовка h4.
Позиционировать псевдо элемент нужно абсолютно (position:absolute).
Цвет ему нужно задать противоположный цвету элемента h4. То есть, если у h4 цвет синий, то у псевдо элемента цвет будет красным. А непрозрачность все так же 50%.
И еще, расположение псевдо элемента мы будем регулировать при помощи свойств left и top. Нам необходимо сделать так, чтобы псевдо элемент, дублирующий по своему содержанию элемент h4, располагался немного правее и ниже (сейчас Вы сами все увидите). Здесь настройки будут индивидуальны и будут зависеть от величины шрифта, типа шрифта и желаемого эффекта.
Вот код всего вышеперечисленного:
H4:after{ content:"Anaglyphic Text"; position:absolute; left:361px; top:2px; color:rgba(255,0,0,0.5); }
А вот эффект того, что у нас получится:
Вот и все, чему я хотела научить Вас в этом уроке.
Обязательно используйте эту технику! Во-первых: красиво, во-вторых: все заголовки прекрасно читаются поисковыми роботами, в-третьих: один раз написав код, Вы сможете использовать заголовок на любой веб странице Вашего сайта или блога, просто объявив его в html-коде.
Если Вам понравился этот урок, напишите свой комментарий (если не понравился – тоже:)). Он будет расценен как благодарность.
Также Вы можете делиться уроком со своими друзьями при помощи кнопок социальных сетей.
И конечно же, подписывайтесь на обновление блога (если Вы еще не подписались). Обещаю много полезного и интересного!
Хорошего Вам настроения и до новых встреч!
Независимо от того, какой сайт или веб приложение разрабатывается, всегда возникает необходимость создавать стили для заголовков, подобных 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); }
