Различные сайты используют различные инструменты для того, чтобы сделать акцент на определенном тексте. Таким образом, можно обратить внимание пользователя на различные предупреждения или важную информацию (например, в случае, когда нужно указать на скидку, акцию или выгодную цену в интернет-магазине).
Вы будете удивлены, узнав, как просто это сделать.
Для решения поставленной задачи нам потребуются:
- фоновое изображение,
- инлайновый элемент span .
Для начала, нужно создать картинку, которая станет маркером, для выделяемого текста. Изображение можно самостоятельно создать в GIMP. Если навыки работы с графическими редакторами отсутствуют, придется немного поэкспериментировать с кистью (brush tool). Полученный результат нужно экспортировать в масштабируемую векторную картинку — svg.
HTML
Это простой текст..
CSS
p .highlighted-text < display; block; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 0.7rem 2rem 0.7rem; background-image: url(‘data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIgogICAgICAgICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICB3aWR0aD0iMWluIiBoZWlnaHQ9IjAuNWluIgogICAgIHZpZXdCb3g9IjAgMCAzMDAgMTUwIj4KICA8cGF0aAogICAgICAgIGZpbGw9IiNmZmUwMDAiIHN0cm9rZT0ibm9uZSIKICAgICAgICBkPSJNIDEyLjAwLDQ4LjAwCiAgICAgICAgICAgQyAxMi4wMCw1MC4wOSAxMS43OSw1NC45OSAxMi42MCw1Ni43MgogICAgICAgICAgICAgMTUuNTksNjMuMTggMjYuMDksNTYuNjQgMzMuMDAsNjMuMDAKICAgICAgICAgICAgIDMwLjg0LDYzLjE4IDIzLjA1LDYzLjg3IDIxLjgwLDY1LjAyCiAgICAgICAgICAgICAxOC4wMiw2Ny44OCAyMS4yOSw3Ni4zNSAyMS44MCw4MC4wMAogICAgICAgICAgICAgMjEuODAsODAuMDAgMjEuODAsODYuMDAgMjEuODAsODYuMDAKICAgICAgICAgICAgIDIxLjgwLDg2LjAwIDQwLjAwLDg3LjAwIDQwLjAwLDg3LjAwCiAgICAgICAgICAgICAzOS45Myw4OC44OCA0MC4wNiw5MS4wNCAzOC45OCw5Mi42OQogICAgICAgICAgICAgMzcuNTEsOTQuOTMgMzUuMTUsOTQuNzUgMzIuNTksOTYuMjAKICAgICAgICAgICAgIDI4LjMzLDk4LjYxIDI2Ljg3LDEwMi4yMiAyNy4zNCwxMDcuMDAKICAgICAgICAgICAgIDI3LjM0LDEwNy4wMCAzMC4wMiwxMjMuNDEgMzAuMDIsMTIzLjQxCiAgICAgICAgICAgICAzMS44MiwxMjUuNzUgNDAuMDEsMTI3Ljk1IDQzLjAwLDEyOC4wMAogICAgICAgICAgICAgNDMuMDAsMTI4LjAwIDg3LjAwLDEyOC4wMCA4Ny4wMCwxMjguMDAKICAgICAgICAgICAgIDg4LjA4LDEyMS41NiA5MS4xNiwxMjEuODAgOTcuMDAsMTIyLjA0CiAgICAgICAgICAgICA5Ny4wMCwxMjIuMDQgMTA5LjAwLDEyMy4wMCAxMDkuMDAsMTIzLjAwCiAgICAgICAgICAgICAxMDkuMDAsMTIzLjAwIDEyOC4wMCwxMjMuMDAgMTI4LjAwLDEyMy4wMAogICAgICAgICAgICAgMTI4LjAwLDEyMy4wMCAxODIuMDAsMTIyLjAwIDE4Mi4wMCwxMjIuMDAKICAgICAgICAgICAgIDE5NC41OCwxMjEuOTcgMTg4LjQyLDExOS4wMyAyMDEuMDAsMTE5LjAwCiAgICAgICAgICAgICAyMDEuMDAsMTE5LjAwIDI0My4wMCwxMTkuMDAgMjQzLjAwLDExOS4wMAogICAgICAgICAgICAgMjQzLjAwLDExOS4wMCAyNTguMDAsMTE4LjAwIDI1OC4wMCwxMTguMDAKICAgICAgICAgICAgIDI1OS41MywxMDkuMTAgMjY2LjAxLDExMy4zNyAyNzAuNDAsMTA5LjE1CiAgICAgICAgICAgICAyNzIuNjEsMTA3LjAzIDI3Mi4zMCwxMDAuODUgMjcyLjAwLDk4LjAwCiAgICAgICAgICAgICAyNzIuMDAsOTguMDAgMjgwLjAwLDk3LjAwIDI4MC4wMCw5Ny4wMAogICAgICAgICAgICAgMjgwLjAwLDk0LjEwIDI4MC4yNiw4OC41NSAyNzkuMjYsODYuMDIKICAgICAgICAgICAgIDI3Ni40OSw3OC45OCAyNjQuNjMsNzYuODggMjU4LjAwLDc2LjAwCiAgICAgICAgICAgICAyNjUuMTUsNjkuMTkgMjc2LjQwLDczLjAzIDI3NC44NSw2Mi4wNAogICAgICAgICAgICAgMjc0LjQ3LDU5LjM1IDI3My43Myw1OC44NSAyNzIuMDAsNTcuMDAKICAgICAgICAgICAgIDI4MS42OCw1My43NyAyODEuMDAsNTQuMjggMjgxLjAwLDQ0LjAwCiAgICAgICAgICAgICAyODEuMDAsNDQuMDAgMjU4LjAwLDQyLjM4IDI1OC4wMCw0Mi4zOAogICAgICAgICAgICAgMjUwLjAwLDQwLjg0IDI1MS40OCwzOC4wMyAyMzUuMDAsMzguMDAKICAgICAgICAgICAgIDIzNS4wMCwzOC4wMCAxODkuMDAsMzkuMDAgMTg5LjAwLDM5LjAwCiAgICAgICAgICAgICAxODkuMDAsMzkuMDAgMTc3LjAwLDM5LjgyIDE3Ny4wMCwzOS44MgogICAgICAgICAgICAgMTc3LjAwLDM5LjgyIDE1OS4wMCwzOC4wMCAxNTkuMDAsMzguMDAKICAgICAgICAgICAgIDE1OS4wMCwzOC4wMCAxMjguMDAsMzguMDAgMTI4LjAwLDM4LjAwCiAgICAgICAgICAgICAxMTYuOTAsMzguMDIgMTIwLjE2LDM5LjQwIDExMy4wMCw0MC42NwogICAgICAgICAgICAgMTEzLjAwLDQwLjY3IDk3LjAwLDQyLjE3IDk3LjAwLDQyLjE3CiAgICAgICAgICAgICA5Ny4wMCw0Mi4xNyA4Ny4wMCw0My44MyA4Ny4wMCw0My44MwogICAgICAgICAgICAgODcuMDAsNDMuODMgNTcuMDAsNDUuMDAgNTcuMDAsNDUuMDAKICAgICAgICAgICAgIDU3LjAwLDQ1LjAwIDMyLjAwLDQ4LjAwIDMyLjAwLDQ4LjAwCiAgICAgICAgICAgICAzMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCBaIiAvPgo8L3N2Zz4K’); >
Как демонстрирует приведенный выше CSS-код, изображение-маркер можно перевести в строчный формат base64 и установить в качестве фона инлайнового элемента .highlighted-text , который содержит выделяемый текст.
идеи для оформления заголовков #studywithme #notes #идеи
20+ идей для оформления заголовков #конспекты #мотивация
Так же, нужно установить background-size: cover; для фонового изображения, чтобы его размер менялся в соответствии с размером текста.
С одним из готовых вариантов можно ознакомиться на codepen:
Спасибо за внимание.
Новые публикации
JavaScript: сохраняем страницу в pdf
2021-07-12
HTML: Полезные примеры
2021-07-11
CSS: Ускоряем загрузку страницы
2021-07-10
JavaScript: 5 странностей
2021-07-10
JavaScript: конструктор сортировщиков
Категории
О нас
Frontend https://drbrain.ru/articles/css-custom-highlighted-text/» target=»_blank»]drbrain.ru[/mask_link]
HTML Начинающим. Заголовки и выделение текста
Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни – разделы и подразделы.
текст
текст
текст
текст
текст
текст
Вводя заголовки в текст, вы позволяете посетителям вашего ресурса более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
|
Моя первая страничка Это моя первая страница. У меня все получится. Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке — изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность — интригующе серебрились на висках. |
Борис АКУНИН
В выше изложенном примере вы видите, что заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающего тега происходит автоматически перенос на другую строку.
Заголовки предназначены для выделения небольшой части текста, строки или фразы. Если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать не следует. Для этого существует атрибут size тэга , который поможет установить нужный вам размер шрифта.
текст
текст
текст
текст
текст
текст
текст
В своем примере я выделю первое предложение более крупным шрифтом
|
Моя первая страничка Это моя первая страница.У меня все получится. Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. |
Борис АКУНИН
Но это еще не все что можно сделать с текстом, кроме создания заголовков и выделения текста крупным или мелким шрифтом, текст можно сделать подчеркнутым, перечеркнутым, курсив, сделать полужирным, задать моноширинный текст, верхний и нижний индексы.
текст текст текст
Тэги и представляют текст перечеркнутым шрифтом, разницы между ними нет.
Тэг представляется крупным шрифтом, а малым шрифтом относительно основного текста.
Тэги и — определяют верхний и нижний индексы. — верхний, — нижний. Например вам надо написать формулу используя нижний индекс H 2 O вы получите результат своей формулы H2O.
Моноширинный шрифт , это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. Также моноширинным шрифтом отображается текст заключенный в тэг Текст :
У тэга есть одна особенность: текст, заключенный в него, выводится с точностью так, как вы его набрали у себя в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.
К одному фрагменту текста может применяться сразу несколько тэгов.
В следующий пример я вставлю несколько тегов, чтоб вам было более понятно, что можно сделать с текстом при использовании выше перечисленных тегов.
|
Моя первая страничка Это моя первая страница.У меня все получится. Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. |
Борис АКУНИН
Для того чтоб закрепить данную информацию вы можете поэкспериментировать на своем примере, подставляя разные теги в свой документ.
Источник: rabota-33.ru
Иерархия в типографике
Типографическая иерархия упорядочивает текстовые элементы в зависимости от их важности.
На сайте bee-creations.com заголовок за счет большого размера заметно выделяется в сравнении с основным текстом. Основной текст ненавязчив и отлично читается
Информация на сайте zsaritm.com разделена на блоки, в каждом из которых есть подзаголовок и основной текст. Все блоки объединяет заголовок. За счет этого создается понятная иерархия
Основной подход состоит из трех уровней: заголовок, подзаголовок и текст.
- Первый уровень — доминирующий заголовок. Основная составляющая в иерархии типографики, цель которой — привлечь внимание читателя.
- Второй уровень — подзаголовок, описание, цитата и прочая информация, которая помогает пользователю определиться, интересен ли ему материал и стоит ли читать основной текст.
- Третий уровень — основной текст. Его задача — донести информацию в полном объеме. Правильно подобранный шрифт третьего уровня удобен для чтения, имеет меньшие размеры в сравнении с другими элементами. По данным института Баймарда, оптимальной длиной текста для чтения считается 50-60 символов в строке.
.webp)
Без применения иерархии текст скучный и однообразный, он не вызывает заинтересованности у пользователя
.webp)
Выделение заголовка уже вносит иерархию в текст
.webp)
Вместе с заголовком выделен подзаголовок и задан интервал между тремя уровнями. В тексте сразу прослеживается иерархия, он упорядочен и пользователю легче ориентироваться
Как применять иерархию в типографике
Первое, что нужно сделать — найти подходящий шрифт, определиться с кегелем, шириной строк и размером междустрочных интервалов.
На сайте getsignals.online четко прослеживается иерархия. Хорошо подобранный шрифт и размер междустрочных интервалов и интервалов между уровнями усиливают этот эффект
Чтобы акцентировать внимание на заголовке или других, важных элементах текста, можно использовать простые способы выделения: контрастность, размер, начертание и «воздух». Можно сочетать варианты.
Контрастный яркий цвет на wildmgmt.es с легкостью выделяет нужную информацию даже в середине текста.
Самый простой способ привлечь внимание к заголовку — увеличить его размер. На сайте norebro.colabr.io крупный шрифт в жирном начертании выделяет заголовок
Сочетайте две контрастные гарнитуры. Это позволит визуально разделить текстовые элементы.
Шрифт с засечками в заголовке и подзаголовке на сайте camillabellini.com, дает хороший контраст с основным текстом, набранным шрифтом без засечек
Используя этот прием не сложно создать иерархию в тексте
Определите на глаз, как выглядит текст, заметен ли заголовок, насколько комфортно его читать.
Явный контраст между заголовком, подзаголовками и основным текстом позволяет пользователю быстро находить нужную информацию на сайте smgengineering.ru
Источник: web-etalon.ru