Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip - «Веб-дизайн»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
16-10-2017, 20:00
Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip - «Веб-дизайн»
Рейтинг:
Категория: Самоучитель CSS

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


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


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


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


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


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


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


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


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


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


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


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


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


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


See the Pen Underline by Alex (@alextod) on CodePen.



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



  • objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки).

  • none — создаются пересечения со всеми объектами.

  • spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing.

  • ink (как в примере выше) — линии не пересекает символы и буквы.

  • edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве.

  • box-decoration — не учитываются отступы margin, border и padding.


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


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


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


    После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники. Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS свойство (text-decoration-skip). С другой стороны такой прием позволяет выделить нужный участок текста, ссылку либо конкретные слова в предложении, сделав типографику страницы чуть более интересной. Как правило, для реализации используются яркие цвета, возможно, контрастные. Чаще всего они светлее текста, располагаются за ним. Степень пересечения элементов встречается разная — где-то они лишь соприкасаются, в других примерах «фон» занимает более трети текста. Сложно сказать сколько проживет данный тренд веб-дизайна, главное при его реализации не забывать о юзабилити — тексты должны хорошо читаться, а обилие полосок не отвлекать пользователя от основного контента. С яркими акцентами нужно быть внимательным. Свойство text-decoration-skip Напоследок пару слов хотелось бы сказать про, упомянутое выше, CSS свойство, которое определяет как именно подчеркивание будет вести себя с текстом на странице. See the Pen Underline by Alex (@alextod) on CodePen. У text-decoration-skip есть несколько значений: objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки). none — создаются пересечения со всеми объектами. spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing. ink (как в примере выше) — линии не пересекает символы и буквы. edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве. box-decoration — не учитываются отступы margin, border и padding. Чтобы проще это понять вот картинка (из этой статьи). Если вы видели на каких-то сайтах примеры нового мини-тренда с перекрывающими текст линиями, делитесь линками в комментариях. Будет интересно глянуть.

    Теги: CSS Веб-дизайн, текста, подчеркивание выделения более свойство

    Просмотров: 1 229
    Комментариев: 0:   16-10-2017, 20:00
    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

     
    Еще новости по теме:



    Другие новости по теме:
    Комментарии для сайта Cackle