Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip

После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники.

Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS свойство (text-decoration-skip). С другой стороны такой прием позволяет выделить нужный участок текста, ссылку либо конкретные слова в предложении, сделав типографику страницы чуть более интересной.

Wired

Futurism

Dribbble

Section32

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

Ideo

Thegigi

Backchannel

css tricks

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

Свойство text-decoration-skip

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

У text-decoration-skip есть несколько значений:

  • objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки).
  • none — создаются пересечения со всеми объектами.
  • spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing.
  • ink (как в примере выше) — линии не пересекает символы и буквы.
  • edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве.
  • box-decoration — не учитываются отступы margin, border и padding.

Чтобы проще это понять вот картинка (из этой статьи).

Свойство text-decoration-skip

Если вы видели на каких-то сайтах примеры нового мини-тренда с перекрывающими текст линиями, делитесь линками в комментариях. Будет интересно глянуть.


Комментариев - 4 для поста Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip
  1. ]]> Вадим ]]> (Октябрь 17, 2017)

    Несколько раз замечал эти «странные» подчеркивания. Есть конечно сайты, которым они идут, но далеко не всем — нельзя слепо копировать тренд, если по дизайну он мало подходит.

  2. ]]> Tod ]]> (Октябрь 17, 2017)

    Вадим, полностью с вами согласны, перед внедрением любой функциональности на сайте нужно думать.

  3. ]]> Nikita ]]> (Ноябрь 9, 2017)

    Вот про верстку неплохо было бы писать чуть чаще, интересное ведь направление в нише веб-дизайна. Как раз изучаю)

  4. ]]> Tod ]]> (Ноябрь 9, 2017)

    Nikita, как раз готовим статью-дополнение к данной заметке про подчеркивания, но с точки зрения CSS/HTML.

Оставить комментарий
для статьи Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip