Красивые css заголовки: Красивые заголовки на сайте

Содержание

CSS h2, h3: стилизация h2, h3 заголовков

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

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

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

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

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

Мой способ

Примеры CSS h2, h3

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

CSSh2 +
h3 (совместная
стилизация)

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

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

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

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

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

h2.ribbon { 

font-size: 16px !important; 

position: relative; 

background: #ba89b6; 

color: #fff; 

text-align: center; 

padding: 1em 2em;

margin: 0 0 3em;

} 

h2.ribbon:before, h2.ribbon:after { 

content: ""; 

position: absolute; 

display: block; 

bottom: -1em; 

border: 1.5em solid #986794; 

z-index: -1; 

} 

h2.ribbon:before { 

left: -2em; 

border-right-width: 1.5em; 

border-left-color: transparent; 

} 

h2. ribbon:after { 

right: -2em; 

border-left-width: 1.5em; 

border-right-color: transparent; 

} 

h2.ribbon .ribbon-content:before, h2.ribbon .ribbon-content:after { 

content: ""; 

position: absolute; 

display: block; 

border-style: solid; 

border-color: #804f7c transparent transparent transparent; 

bottom: -1em; 

} 

h2.ribbon .ribbon-content:before { 

left: 0; 

border-width: 1em 0 0 1em; 

} 

h2.ribbon .ribbon-content:after { 

right: 0; 

border-width: 1em 1em 0 0; 

}

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

<h2><strong>CSS стилизация h2, h3 заголовков на sitear.ru</strong></h2>

Мой способ

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

h2 {height:67px; background: url(ribbon_left.png) left top no-repeat; color:#FFF;} 

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

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

<h2><strong>CSS h2 заголовок на sitear.ru</strong></h2>

Картинки:

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

Примеры CSS h2, h3

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

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

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

CSS код:

.heading { width:500px; background: #888;}

h2 {height:70px; background: url(left.png) left top no-repeat; color:#FFF; line-height: 50px;} 

h2 strong {height:70px; display:block; margin-left:60px; padding: 6px 60px 0px 0px; background: url(right.png) right top no-repeat;}

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

HTML код:

<div>

<h2><strong>Текст h2 заголовка</strong></h2>

</div>

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

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

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

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

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

Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта.
Пример css h2 +
h3, схож с пред идущим,
рассмотрим 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;}

h2 {color:#FFF; font-size:18px; padding:15px;} 

h3 {color:#CCC; font-size:16px; padding:5px;}

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

HTML код:

<div>

<div>

<h2>Текст h2 заголовка</h2>

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

</div>

</div>

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

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

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

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

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

<style>

h3 {font: bold 18px Arial; color:#595; border-bottom:#CCC solid 1px; margin-top:25px;}

</style>

<h3>Пример стилизации h3 заголовка</h3>

<p>Lorem ipsum dolor sit amet, <a href="http://sitear.ru">consectetuer adipiscing</a> 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.</p>

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

<p>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.</p>

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

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

Надеюсь, вам помогла моя статья. Если остались вопросы
или предложения по поводу css стилизации h2, h3 заголовков,
пишите в комментарии.

Дальше: Конвертация трафика сайта

CSS · Примеры и практики от начинающих до профессионалов · По Русски

Кнопки для действий

По соглашению кнопки должны быть использованы для действий, когда как ссылки для объектов. Для примера, «Скачать» должно быть кнопкой, когда «Последние Действия» должно быть ссылкой.

Стили кнопок применяются для всего где добавлен класс .btn. Обычно Вы будете использовать его для элементов <a> и <button>.

Совместимость с браузерами

IE9 не подгоняет градиенты к элементам и закругленным углам, так что мы убрали их. Еще IE9 делает недоступным применение стилей к элементам button, текст становится серым и добавляется отстойная тень, которую мы не смогли исправить.

Различные размеры

Нужны большие и маленькие кнопки? Добавьте классы .btn-large, .btn-small, или .btn-mini для дополнительных размеров.

Основное действие
Действие

Основное действие
Действие

Основное действие
Действие

Отключенное состояние

Для отключения кнопок добавьте класс .disabled к ссылкам и атрибут disabled для элементов <button>.

Основная ссылка
Это Ссылка

Основная кнопка
Это кнопка

Внимание!
Мы используем класс . disabled как дополнительный, так же как класс .active.

Один класс, несколько тегов

Используйте класс .btn для элементов <a>, <button>, или <input>.

<a href="">Ссылка</a>
<button type="submit">
  Кнопка
</button>
<input type="button"
         value="Это Input Button кнопка">
<input type="submit"
         value="Это Input Submit кнопка">

Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input, используйте как кнопку <input type="submit">.

текст с тенью. Несколько теней текста — учебник CSS

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

Задать в CSS тень текста можно с помощью свойства text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini – этот браузер лишь частично поддерживает свойство. Ниже показан пример записи стиля и значений свойства:


h2 {
	text-shadow: 3px 5px 6px #6C9;
}

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

  • 3px – первое значение отвечает за смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево.
  • 5px – второе значение отвечает за смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх.
  • 6px – третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.
  • #6c9 – четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.

 
Как выглядит тень в браузере (скриншот):

Скриншот: текст с тенью, CSS

Несколько теней CSS для текста

Также допускается использовать несколько групп значений для свойства text-shadow. Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.

Пример:


h2 {
text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7;
}

Результат применения такого стиля виден на скриншоте:

Скриншот: несколько теней для текста CSS

С помощью свойства CSS text-shadow можно создавать действительно красивые вещи. Вы можете экспериментировать: устанавливать большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для настройки прозрачности. Вот что может получиться, если уделить этому свойству достаточное количество внимания:

Скриншот: объемная тень текста в CSS

Далее в учебнике: как задать интервалы в CSS между символами, словами и строками.

Самые крутые анимационные текстовые эффекты во всем интернете

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

Однако мы объединили список лучшей, самой красивой и мощной текстовой анимации, которая придаст вашему сайту современный вид и посыл через сильное сообщение. Эти примеры можно использовать в качестве вдохновения для вашего следующего дизайн-проекта или как учебное пособие по прокачке навыков CSS3 и JavaScript.

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

Фреймворки

Креативная анимация SVG букв

Вот первый для кодера. Codrops — блог, которые предоставляют читателям учебные руководства, тенденции и вдохновение для веба. В марте 2016 года они опубликовали статью о том, как анимировать SVG буквы с использованием плагина Segment.

Помните, когда мы говорили об экспериментальной анимации? Этот туториал определенно подпадает под эту категорию. В статье рассказывается о демонстрационной анимации, её использовании, о том, как настроить шрифт и других о JavaScript библиотеках.

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

TextFX2 – Текстовые анимации CSS3

Вы когда-нибудь слышали о CodeCanyon? Это собственная веб-библиотека Envato для плагинов и скриптов, созданных сообществом разработчиков с более чем 21 000 позиций на выбор. Одним из них является Text FX 2, — это генератор текстовой анимации, который очень легко использовать для создания собственной текстовой анимации. Этот плагин позволяет пользователю выбрать свой любимый шрифт, цвет, анимировать несколько строк текста и анимировать с чередующимися циклами. В основном вы выбираете, всё что хотите, а анимация текста выполняется через раскрывающихся меню, и для вас генерируется код. Очень просто!

Вот демо с несколькими примерами.

Крутые текстовые эффекты – Невероятная анимация

Если вы новичок в кодировании, то вот полностью адаптивная текстовая анимация которая подойдет вам (также, есть на CodeCanyon). Этот фрейворк позволяет вам выбирать HTML или Javascript для анимации и предоставляет библиотеку из 300 предварительно закодированных примеров, с помощью которых вы можете получить вдохновение или готовый код.

Затем файлы анимации можно импортировать в WordPress (ознакомьтесь с их руководством для WordPress), импорт происходит с поддержкой событий мыши и оптимизирован для SEO.

Некоторые из доступных функций:

  • Адаптивный дизайн
  • Анимация букв и слов
  • Контроль скорости и колебания
  • Полная совместимость со всеми современными браузерами и с запасным вариантом для старых браузеров

Anime.

js

Anime.js — впечатляющий, быстрый и легкий JavaScript фреймворк, разработанный Джулианом Гарнье, который анимирует все что угодно от CSS свойств до Javascript объектов и HTML элементов. Он также может использоваться для SVG и анимации букв, которая по-прежнему является очень редкой, но популярной функциональной особенностью для современных анимационных фреймворков. Мы видим много современных веб-сайтов, использующих SVG объекты, и хотя спрос на поддержку анимации в этой области очень высок, не так много фреймворков, которые могут отвечать потребностям спроса. Anime.js красиво заполняет этот пробел.

Анимированные заголовки

CodyHouse — бесплатная библиотека, предоставляющая разработчикам интерфейсные ресурсы в HTML, CSS и Javascript. В 2014 году их соучредитель разработал серию CSS эффектов для заголовков с вращающимися словами посредством скольжения, толкания, ввода и масштабирования. Это классное решение, если вы хотите послать сильное сообщение, сохранив исходную структуру заголовка и изменить последнее слово, как в приведенном выше примере.

Если вы предпочитаете копаться в коде, образец кода ниже великолепен, но если нет, не беспокойтесь, есть WordPress плагин, который тоже будет делать неплохие анимационные трюки.

В следующей серии:

Самые крутые анимационные текстовые эффекты во всем интернете, Часть 2: Вдохновение

VIA

Bootstrap Бутстрап Текст шрифт

Настройки по умолчанию Bootstrap

Глобальный размер шрифта по умолчанию Bootstrap — 14px, с высотой строки 1,428.

Это применяется к элементу <body> и ко всем абзацам (<p>).

Кроме того, все <p> элементы имеют нижнее поле, равное половине вычисленной высоты линии (10px по умолчанию).

По умолчанию Bootstrap vs. браузер

В этой главе мы рассмотрим некоторые элементы HTML, которые будут стилизованы немного по-другому по сравнению с браузером по умолчанию.

<h2> — <h6>

По умолчанию Bootstrap будет стиль заголовки HTML (<h2> для
<h6>) следующим образом:

Пример

h3 Bootstrap heading (30px)

h4 Bootstrap heading (24px)

h5 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

<small>

В Bootstrap элемент HTML <small> используется для создания более светлого, вторичного текста в любом заголовке:

Пример

h3 heading

secondary text

h4 heading

secondary text

h5 heading

secondary text

h5 heading

secondary text

h6 heading

secondary text

<mark>

Bootstrap будет стиль HTML <mark> элемент следующим образом:

Пример

Use the mark element to highlight text.

<abbr>

Bootstrap будет стиль HTML <abbr> элемент следующим образом:

Пример

The WHO was founded in 1948.

<blockquote>

Bootstrap будет стиль HTML <blockquote> элемент следующим образом:

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF’s website

Чтобы показать цитату справа, используйте .blockquote-reverse класс:

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF’s website

<dl>

Bootstrap будет стиль HTML <dl> элемент следующим образом:

Пример

Coffee
— black hot drink
Milk
— white cold drink

<code>

Bootstrap будет стиль HTML <code> элемент следующим образом:

Пример

Следующие элементы HTML: span , section и div определяет раздел в документе.

<kbd>

Bootstrap будет стиль HTML <kbd> элемент следующим образом:

Пример

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap будет стиль HTML <pre> элемент следующим образом:

Пример

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Контекстуальные цвета и фоны

Bootstrap также имеет некоторые контекстные классы, которые можно использовать для предоставления «смысла через цвета».

Для цветов текста используются следующие классы: .text-muted, .text-primary, .text-success, .text-info,
.text-warning, и .text-danger:

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Для цветов фона используются следующие классы: .bg-primary,
.bg-success, .bg-info, .bg-warning и .bg-danger:

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Другие классы типографии

Следующие классы начальной загрузки можно добавить в HTML-элементы стиля.

ClassDescriptionExample
.leadMakes a paragraph stand out
.smallОбозначает меньший текст (значение 85% от размера родительского элемента)
.text-leftУказывает текст, выровненный по левому краю
.text-centerОбозначает текст, выровненный по центру
. text-rightУказывает текст с выравниванием по правому краю
.text-justifyОбозначает обоснованный текст
.text-nowrapОбозначает отсутствие текста переноса
.text-lowercaseОбозначает текст в нижнем регистре
.text-uppercaseУказывает верхний текст
.text-capitalizeОбозначает текст с прописными буквами
.initialismОтображение текста внутри <abbr> элемента в немного меньшем размере шрифта
.list-unstyledУдаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol>). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
. list-inlineРазмещение всех элементов списка в одной строке
.dl-horizontalСтроки вверх термины (<dt>) и описания (<dd>) в
<dl> элементы бок о бок. Начинается как по умолчанию <dl>, но когда окно браузера расширяется, он будет выстроились бок о бок
.pre-scrollableДелает <pre> элемент прокручиваемым

Полная ссылка на типографию Bootstrap

Для полной справки всех элементов типографии/классов, перейдите к нашей полной
Справочник по типографии Bootstrap.

Также смотрите наши вспомогательные классы Bootstrap для получения дополнительной информации о контекстных классах.

Красивый плавающий заголовок у таблицы

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        . ..
        <tr>
            ...
            <td></td>
            <td></td>
            <td></td>
            ...
        </tr>
        <tr>
            ...
            <td></td>
            <td></td>
            <td></td>
            ...
        </tr>
       ...
    </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

table {
    margin: 0 auto 1.5em;
    width: 75%;
}
.sticky-wrap {
    overflow-x: auto;
    position: relative;
    margin-bottom: 1.5em;
    width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .125s ease-in-out;
    z-index: 50;
    width: auto;
}
. sticky-wrap .sticky-thead {
    box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
    z-index: 100;
    width: 100%;
}
.sticky-wrap .sticky-intersect {
    opacity: 1;
    z-index: 150;
}
.sticky-wrap .sticky-intersect th {
    background-color: #666;
    color: #eee;
}
.sticky-wrap td,
.sticky-wrap th {
    box-sizing: border-box;
}

1

<script src="js/jquery.stickyheader.js"></script>