Как сделать заголовок в css
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.
Огромное спасибо! Очень помогло )
Антон, рассмотреть все варианты нереально:) Реализаций стилей для заголовков может быть множество.
CSS H1, H2: стилизация h1, h2 заголовков
Целью данной статьи, рассмотреть разные варианты стилизации 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 стиля.
В HTML коде, h1 лента, выглядит таким образом:
Мой способ
Как видите, css код громоздкой, как для стилизации только h1 тега. Поэтому, предлагаю свой способ создания подобной ленты. Кросбраузерность тестировалась на IE, FireFox, Opera, Chrome. Ниже предоставлен css код и все исходные файлы.
Способ применения в HTML:
Общий вес картинок – 750 байт. CSS код занимает не более двух строк, вес – 236 байт. Я доволен результатом, притом все просто и понятно, в отличии от западного метода, где вес CSS кода – 980 байт. Хотя мой и западный вариант по весу идентичны, в коде гораздо хуже разобраться, нежели обработать картинку в фотошопе. Можно предположить, что скорость загрузки одного css файла, быстрее, нежели трех файлов (сумарно идентичных весу одного css файла), но можно реализовать background в виде спрайтов, которые увеличат скорость загрузки сайта. Узнать об увеличении скорости методом CSS спрайтов.
Примеры CSS H1, H2
Все примеры будут реализованы по принципу стилизации заголовков моим методом (пример, сайт sitear.ru).
CSS стилизация H1 заголовка
В данном пункте остановимся на реальных примерах стилизации h1 заголовка. Примеры, громко сказано, так как, у каждого сайта уникальный дизайн. Приведу один, универсальный пример стилизации H1. Мою идею стилизации заголовков вы уже поняли, хочу дополнить ее, используя в background-image прозрачность, которую легко можно сделать в фотошопе. Пример смотрите ниже.
Как видите исходные картинки имеют полупрозрачность, а в классе heading, меняя значение background, можно добиться следующих результатов:
CSS h1 + h2 (совместная стилизация)
Стилизировать h1 и h2 вместе, уместно при наличии эпилога, или маленького вступления к статье на вашем сайте, которое можно поместить в тег h2. Например:
H1 – Стилизация h1, h2 заголовков;
H2 – Учимся оформлять h1, h2 заголовки на css.
Это мой пример, вероятней всего у вас своя идея, как оформлять страницы сайта. Пример css h1 + h2, схож с пред идущим, рассмотрим css код.
Суть совместной (h1 + h2) стилизации заголовков, схожа с пред идущим примером, только в этом случае используются div блоки.
CSS стилизация H2 заголовка
Стилизация h2 заголовка дело не хитрое. Но, раз уж наша статья касается стилизации h1 и h2 заголовков, мы рассмотрим все до конца.
Как правило, тег h2, используют для выделения подпунктов статьи или другого материала на сайте. Например, как на сайте sitear.ru. Я бы советовал создавать, скромные, неброские, но удобные h2 заголовки. Мне очень нравится идея, как организовано на Википедии. Советую и вам создать подобно. Это просто и удобно. Например:
Просто, удобно и кроссбраузерно.
Надеюсь, вам помогла моя статья. Если остались вопросы или предложения по поводу css стилизации h1, h2 заголовков, пишите в комментарии.
Адаптивные заголовки (текст) на чистом CSS
Приветствую вас друзья! Хочу еще раз поздравить всех (на всякий случай для тех, кто не получал моего новогоднего поздравления) с наступившим Новым годом!
Давно не писал на своем блоге. Причина все таже — катастрофическая нехватка времени. Помимо всех моих забот, которых итак у меня не мало я ввязался в такую большую авантюру, как строительство собственного дома. По стройке я здесь писать не буду, создам для него отдельный проект. Но сейчас не об этом…
И так, сегодня поговорим о верстке и о таком трюке в CSS, который позволяет сделать наши заголовки адаптивными, причем размер может меняться плавно при уменьшении экрана браузера. Вообще, подзаголовками может подразумеваться любой текст на сайте.
Для динамичного уменьшения шрифта воспользуемся методом calc() в css.
Размер шрифта меняется в пределах от 30px (на большом экране) до 24px (на мобильном экране) с помощью формулы, которая работает в методе calc().
Расшифровку цифр я наглядно представил на картинке ниже.
Расшифровка формулы адаптивного заголовка
Итак, давайте разберем подробнее каждый компонент формулы.
1.5rem — минимальный размер шрифта на мобильном при ширине контейнера 320px. Для тех, кто не в курсе rem (root em) — это условная единица, которая определяется, исходя из базового размера шрифта тега html (корневой элемент). Напишу про em и rem более подробнее в другой статье. По умолчанию базовый размер шрифта, устанавливаемый браузером равняется 16px. Вы можете самостоятельно переопределить этот размер (я этого не делаю). В нашем примере минимальный размер шрифта на мобильном — это 24px: 24/16 = 1.5
6 — разница между максимальным и минимальным размерами шрифта. То есть: 30 — 24 = 6. Думаю, здесь все понятно.
100vw — максимальная ширина контейнера сайта на широкоформатном экране. Здесь не путаем с максимальной шириной окна браузера. Именно ширина контейнера! В моем примере она равняется 1200px. Обратите внимание, что заголовки H1-H6 являются блочными элементами в HTML и растягиваются на ширину своего родителя (если нет дополнительных стилей). Вы можете возразить, сказав, что под 100vw определяется именно ширина окна браузера, а не контейнера. Да, и будете правы. Вот этот момент обсудим чуть ниже.
320px — минимальная ширина контейнера сайта на мобильном устройстве. Минимальную ширину я обычно выставляю в 320px, если будет меньше, то появляется горизонтальный скролл.
880 — разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. То есть: 1200 — 320 = 880.
Если мы данную формулу просто применим к определенному заголовку, то на широком экране FullHD (1920×1080) получим огромный размер шрифта, несмотря на то, что определили максимальный размер (в моем случае — 30px). Здесь как раз сработало значение 100vw, которое мы указали, как максимальную ширину контейнера. Как быть? Прибегнем к медиа-запросам в css.
Как видно из кода css формула с адаптивным заголовком у нас работает только в пределах от 320 до 1200px, ниже и выше — фиксированные значения. Таким образом мы избавились от слишком крупного размера на широких экранах более 1200px и слишком мелкого шрифта на экранах менее 320px.
Адаптивный режим просмотра на CodePen
В принципе здесь все. Добавлю, что данную формулу можно использовать не только для заголовков, но и для любого другого текста. Я даже, было дело, таким образом динамически изменял поля и отступы — margin и padding.
Упрощаем при помощи Sass/Scss
Дополню для любителей верстать на препроцессоре Sass (не понимаю, как можно верстать на чистом css). Лично я запихнул все это дело в миксин и просто в нужном месте его вызываю, передав минимальный и максимальный размеры шрифта.
В данном миксине медиа-запросы я вызываю через миксины Bootstrap 4, так как использую данный фреймворк при верстке макетов.
Теперь там, где нужно вызываем миксин responsive-tlt.
Вот и все хитрости. На этом все. Если возникнут вопросы, то задавайте в комментариях. Помогу обязательно!
HTML текст. Заголовки и параграфы
Текст — самая важная составляющая любого сайта. Сейчас доступно большое разнообразие видеороликов, есть возможность использовать изображения. Однако именно текстовая информация до сих пор остается основой любого сайта.
Здесь вы найдете подробную информацию о том, как создавать текстовые заголовки и разделять текст на абзацы
Заголовки в HTML
Заголовки нужны для каждой страницы. Они позволяют разделять текст на смысловые блоки, могут использоваться в шапке страницы вместо логотипа.
… — теги заголовков в HTML. Они имеют разный размер и разное предназначение. Все теги заголовков выделяются жирным.
Здесь тег используется как заголовок статьи и название сайта в шапке. В наше время заголовки редко используются в заголовке, но если у вас нет логотипа — это отличный аналог.
существуют и другие уровни заголовков —
и другие. Сколько всего уровней заголовков? Всего их 6, от
— используется для создания подзаголовков статьи. Тег
используется реже. В основном, когда статья многоуровневая — подраздел разделяется ещё на несколько смысловых блоков. Теги
обычно не используются
Пример использования многоуровневых заголовков:
Здесь показаны самые используемые. Если хотите понять работу остальных, просто впишите их в ваш html-код
Расположение заголовков по центру
Часто главный заголовок располагается в самом центре статьи. Как расположить заголовок по центру в html? Существует несколько способов
Атрибут «text-align»
Самый простой способ, который использует только HTML.
Существует атрибут «text-align». Он применяется не только к заголовкам, его можно указать для параграфов, картинок и других элементов.
Чтобы расположить заголовок по центру, запишите следующую строчку кода:
С помощью этого атрибута можно расположить текст не только по центру. Если задать атрибут «text-align: right», то текст будет прилегать к правой части экрана, тоже работает и с левой стороной.
CSS-стили
Заголовок можно расположить по центру с помощью CSS кода. Не пугайтесь, здесь не будет никаких сложных конструкций, всё проще чем вы думаете.
Наиболее простой способ применения стилей — атрибут style. Чтобы расположить все заголовки по центру впишите следующую строчку кода:
Откройте html документ в браузере и, как видите, все заголовки расположены по центру.
Подробнее о CSS и его стилях мы поговорим в другой раз, а сейчас практикуйте этот метод.
Разделение текста. Параграфы в HTML
— параграф, используется для разделения текста на абзацы. По сути, абзацы разделяют текст на небольшие смысловые блоки. Так вот, как же сделать это разделение?
Вот пример разделения текста на абзацы.
К тегу p также применяется атрибут text-align. Если прописать его для каждого тега p, то весь текст на вашей странице будет находиться в центре экрана.
Разделение через тег
Тег
немного отличается от тега
. Если второй разделяет текст на блоки, которые имеют свои границы, то тег
просто делает разделение на абзацы или для дополнительных отступов.
Если будете заниматься блочной версткой, то отдавайте предпочтение параграфам
Заключение
Поздравляем, теперь вы можете разместить любую статью на своей странице. Теперь это не похоже на неразборчивый набор текста, а на полноценную статью. Далее мы с вами поговорим о том, как дополнить её изображениями
Задания для практики
Ничего сложного, просто попрактикуйтесь в размещении текста. Используйте теги