Как выделить заголовки на сайте

CSS стили для заголовков сайта

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

Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус, я же приведу лишь 5 самых интересных, на мой взгляд. Они могут давать вам идеи и подсказки при реализации своих уникальных стилей. Также советуем глянуть подборку лучших шрифтов Google Fonts для заголовков.

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

Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной типографики. Итак, во всех примерах CSS стилей используется один и тот же «ритм»:

Теперь можно переходить непосредственно к практике.

Пример 1

Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:

Пример 2

Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).

Пример 3

Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).

Пример 4

Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.

Пример 5

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

Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.

P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.

Самый хороший пример 4. Остальное плохо подобраны цвета шрифтов. Но всёравно спасибо за инфу, будет полезно для новичков.
А вообще нужно не только подбирать цвет и размер тени (эффект вдавлиности), но и подбирать цвет самого шрифта, так как шрифт и его объёмность + фон должны гармонично смотреться и играть между собой.

Vladymyr, тут еще важно как шрифты смотрятся в общем дизайне сайта — тогда может некоторые из них и «заиграют» весьма интересно.

В примере 2 как сделать так, чтобы линия тега h2 обрывалась если есть фото напротив.
Пример тут http://clip2net.com/s/jaFF1S

Катя, точный код, увы, вам не подскажу. Было бы просто, если бы для этого h2 был какой-то class, тогда в стилях можно было бы легко прописать для h2.class_name ширину width: 400px. Но если прописывать просто для h2, то все они будут одинаковые даже когда картинки рядом нет. Может попробовать width: 100%, или убрать position: relative.

Огромное спасибо! Очень помогло )

Антон, рассмотреть все варианты нереально:) Реализаций стилей для заголовков может быть множество.

Источник

Урок 3. Заголовки и форматирование текста

Заголовки в HTML

Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.

Форматирование текста в HTML

Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.

У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:

Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру

Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.

Как выделить текст полужирным в html?

Рассмотрим пример кода выделения текста жирным

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?

Рассмотрим пример кода c выделением текста курсивом

Как выделить текст подчёркиванием в html?

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?

Как выделить текст в верхнем и нижнем индексах в html?

Тег font в html

Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

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

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE

Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.

Источник

Выделение и CSS

Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем содержимое веб-страниц по разным причинам. Возможно, нужно скопировать текст и где-то его процитировать, возможно — кому-то просто легче читать текст, выделяя его фрагменты. На мобильных устройствах, правда, выделять что-либо сложнее. Меня, например, это раздражает. Мне не нравится выделять содержимое веб-страниц на телефоне. Эта операция кажется какой-то «неправильной».

Основы

На MDN можно узнать о том, что псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

Для использования ::selection достаточно воспользоваться следующей конструкцией:

Вот пример, с которым можно поэкспериментировать.

Свойства, поддерживаемые ::selection

Настройка собственных эффектов выделения

Что если нам нужно, чтобы выделение выглядело бы по-особенному? Например, чтобы выделение имело бы определённую высоту или некий интересный фон? Взгляните на следующий рисунок.

Пример особой настройки выделения

Это возможно, хотя и потребует приложения некоторых усилий. Вот как сделано выделение, показанное выше:

Об этой методике я узнал здесь.

На следующем рисунке показано разъяснение этой методики.

Реализация градиентного выделения

Надеюсь, я смог понятно объяснить эту идею. Вот рабочий пример.

Анимирование выделения

Работая над предыдущим примером, я задался следующим вопросом: «Реально ли анимировать выделение?». Например, в процессе выделения текста высота выделения составляет 50%. А когда указатель мыши уводят в сторону, высота выделения увеличивается до 80%. Как это сделать? А вот так:

Текст в процессе выделения

Текст после завершения выделения

Вот видео, в котором демонстрируется анимированное выделение.

Многострочный текст

После этого элементы надо стилизовать. Затем к каждому из них надо добавить псевдоэлемент:

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

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

Тут с таким выделением можно поэкспериментировать.

Креативный подход к использованию ::selection и text-shadow

▍Выделение с длинными тенями

Выделенный текст отбрасывает длинные тени

Вот как реализовать этот эффект:

▍Эффект контурного текста

Выделенный текст становится контурным

Эту идею я нашёл в данной статье. Речь идёт о том, что с помощью свойства text-shadow можно сымитировать эффект контурного текста.

▍Эффект размытия

Выделенный текст выглядит размытым

Уверен, что вы сами сможете придумать ещё очень много примеров применения text-shadow для стилизации выделений. Это свойство даёт нам безграничные возможности.

▍Тени текстов и производительность

Использование очень сложных стилей при настройке выделения текста

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

Выделяются ли элементы форм?

Краткий ответ на вопрос, вынесенный в заголовок этого раздела, будет звучать как «да». Мне кажется, что это неправильно: выделяешь страницу, а оказывается, что содержимое внутри полей ввода тоже выделяется. Вот как это выглядит.

Содержимое внутри полей ввода выделяется

Исследование свойства user-select

Сценарии использования user-select

▍Текст и иконка

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

Кнопка с текстом и иконкой

Вот код этой кнопки:

При выделении этого элемента он выглядит так, как показано ниже.

▍Флажки

Меня раздражает такое поведение флажков, когда, устанавливая или снимая флажок, я случайно выделяю текст его описания. Вот как это выглядит.

Текст описания флажка выделен случайно

Решить эту проблему можно, стилизовав элемент следующим образом:

▍Выделение всего текста

Фрагмент текста, оформленный таким стилем, можно выделить одним щелчком мыши по нему.

Веб-приложения

Веб-приложение должно восприниматься пользователем как настоящее приложение. Можно ли выделять текст кнопок в обычных приложениях? Нет, нельзя. Важно, чтобы веб-приложения отражали привычные черты обычных приложений, делая это даже с учётом того, что они созданы с использованием HTML и CSS.

Рассмотрим несколько примеров из жизни.

▍Slack

В Slack можно выделять метки и поля ввода. Однако тексты кнопок не выделяются.

Подписи кнопок не выделяются

Вот ещё один пример.

Подпись в заголовке модального окна выделяется

А дату чата выделить нельзя.

Дату выделить нельзя

▍Notion

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

То, что не должно выделяться, не выделяется

Ни один фрагмент текста с этого рисунка не выделяется. Это — именно то, чего можно ожидать от приложения.

Не используйте глобальное отключение выделения

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

Нехороший паттерн

Есть один UX-паттерн, который мне крайне не нравится. Он заключается в показе предупреждения при попытке выделения текста. Это раздражает и создаёт у пользователя такое ощущение, будто его взаимодействием с сайтом пытаются управлять. Пример этого паттерна показан ниже.

Запрет выделения с показом уведомления

Пожалуйста, не делайте так.

Выделение на мобильных устройствах

Стили ::selection тоже не работают.

А свойство user-select: none работает так, как ожидается.

Вместе с полезным текстом скопировано и (listen)

Итоги

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

Уважаемые читатели! Как вы настраиваете выделение текстов в своих проектах?

Источник

В этой статье рассмотрим различные варианты оформления HTML заголовков, а также познакомимся с Bootstrap классами h1..h6 и page-header.

Назначение HTML заголовков

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

Заголовок второго уровня h2 обычно используется для создания разделов внутри статьи. Заголовки третьего уровня h3 используются для создания подразделов в заголовках второго уровня.

Заголовки h1. h6 в HTML 5 уже не являются «сквозными». Т.е. если они используются внутри какого-то элемента из категории sectioning, то они уже влияют только на его структуру, и не создают неявные разделы вне его. Поэтому, например, заголовок h1 может много раз использоваться на странице. Т.е. являться отправной точкой, с которой будет начинаться создания структуры каждого явного раздела веб-страницы.

Классы h1..h6 в Bootstrap

В Bootstrap 3 и 4 имеются классы h1. h6. Данные классы предназначены для стилизации некоторого контента в виде заголовка соответствующего уровня.

Например, класс h2 при добавлении его к p изменит его дизайн так, что он будет выглядеть как заголовок 2 уровня.

Например, если добавить класс h2 к элементу h1, то заголовок 1 уровня будет выглядеть как заголовок 2 уровня.

Класс page-header (Bootstrap 3)

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

Варианты CSS оформления заголовков

В этом разделе рассмотрим как с помощью CSS можно стилизовать (оформить) заголовки на сайте.

Источник

10 вариантов оформления заголовков на сайте с помощью css

Первое, на что обращает внимание посетитель вашего сайта, это заголовки статей. Чем интереснее оформлен заголовок, тем больше он привлекает внимания, и тем больше шансов, что статья будет прочитана.

Вариант 1

Вариант 1

Вариант 2

HTML-разметка:

Вариант 2

Вариант 3

Вариант 3

Вариант 4

Вариант 4

Вариант 5

Вариант 5

Вариант 6

Вариант 6

Вариант 7

Вариант 7

.ex7 h1:after position: absolute;
background: rgb(81, 227, 213);
height: 2px;
width: 100px;
top: 115%;
margin: 0 auto;
left: 0;
right: 0;>

.ex7 h1 :before < content: "";
position: absolute;
background: rgb(81, 227, 213);
height: 2px;
width: 20px;
top: 135%;
margin: 0 auto;
left: 0;
right: 0>

Вариант 8

Вариант 8

.ex8 h1 span:before border: 1px solid rgb(81, 227, 213);
height: 11px;
transform: rotate(45deg);
width: 11px;
background: #fff;
top: 60%;
z-index: 2;
content: «»;
margin: 0 auto;
right: 50%>

.ex8 h1 span:after <
position: absolute;
border: 1px solid rgb(81, 227, 213);
height: 11px;
transform: rotate(45deg);
width: 11px;
background: #fff;
top: 60%;
z-index: 2;
content: «»;
margin: 0 auto;
left: 51.2%>

.ex8 h1:after <
background: rgb(81, 227, 213);
position: absolute;
height: 1px;
width: 100px;
top: 65%;
content: «»;
margin: 0 auto;
left: 0;
right: 0;

Вариант 9

Вариант 9

.ex9 h1:after <
content: «»;
background: rgb(81, 227, 213);
position: absolute;
height: 2px;
width: 100px;
top: 69%;
margin: 0 auto;
left: 0;
right: 0;>

.ex9 h1 span:after <
content: «»;
position: absolute;
height: 10px;
width: 10px;
border: 1px solid rgb(81, 227, 213);
border-radius: 120px;
top: 59%;
margin: 0 auto;
left: 0;
right: 0;>

Вариант 10

Вариант 10

.ex10 h1:before <
content: «»;
position: absolute;
border: 10px solid transparent;
border-left: 10px solid rgb(81, 227, 213);
top: 23%;
margin: 0 auto;
left: 15%;
>

.ex10 h1:after <
content: «»;
position: absolute;
border: 10px solid transparent;
border-right: 10px solid rgb(81, 227, 213);
top: 23%;
margin: 0 auto;
right: 15%;
>

На этом все. Надеюсь, что статья была вам полезной!

Источник