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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Решение

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

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

К заголовкам на сайте или блоге всегда хочется привлечь внимание, хочется сделать их красивыми и желательно с эффектами (например тень, свечение или 3D). Достаточно красивые заголовки можно делать в программе Adobe Photoshop, однако, на выходе они представляют собой картинки, а значит их текс не могут прочесть поисковые роботы… Что же делать? Выход есть!

И действительно, при определении релевантности Вашей веб страницы определенным поисковым запросам и присвоении ей места в поисковой выдаче заголовки играют ДАЛЕКО не последнее место. Я бы даже сказала — одно из наиболее значимых. Было бы достаточно опрометчиво оставлять их в виде картинки (хотя один раз я переделывала один веб сайт, весь текст которого на нескольких страницах представлял собой картинку… да, да и такое встречается…).

Можно конечно же «забить» на красоту и сделать заголовки обычными, как везде. Но зачем, если есть достаточно несложный способ, который и заголовки Ваши оставит в формате текста и эффектов им может придать очень красивых и интересных? И сегодня я Вам эти приемы покажу. Думаю, после того, как Вы освоите эти приемы, то будете пользоваться ими постоянно. Одним словом, убьете двух зайцев: придадите эффектность своему веб дизайну и релевантности страницы не навредите.

Давайте начнем!

Создаем 3D заголовок

Итак, будем создавать эффекты прямо при верстке веб страницы.

1. Для начала нужно создать новый html-файл, а также файл таблицы стилей (css).

Чтобы показать Вам как все это делается я создала html-файл и назвала его «title.html» (все исходные файлы этого урока при необходимости Вы можете скачать и посмотреть в «исходниках»). Вот исходный код нашего html-файла:

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 заголовков. Тег 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;}

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

Как видите исходные картинки имеют полупрозрачность, а в классе 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) стилизации заголовков, схожа с пред идущим примером, только в этом случае используются 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.

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

Просто, удобно и кроссбраузерно.

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