Оформление подчеркиваний в CSS

30 апреля, 2022 12:05 пп 128 views | Комментариев нет

| | Комментировать запись

CSS Text Decoration Module Level 3 предоставляет нам несколько новых замечательных способов оформления текста, – и браузеры, наконец, начинают их поддерживать. Времена, когда для изменения цвета подчеркивания приходилось использовать border-bottom, скоро останутся позади.

Примечание: Результаты в разных браузерах могут отличаться. Поддержка данного модуля по-прежнему ограничена, поэтому примеры в этом посте могут отображаться некорректно в зависимости от используемого вами браузера.

Свойство text-decoration

Свойство text-decoration раньше поддерживало только значения none, underline, overline и line-through, но сейчас оно становится сокращением для новых свойств text-decoration-color, text-decoration-style и text-decoration-line и поддерживает их значения. Например, вот цветное двойное подчеркивание:

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

В результате получится:

Fancy Underline

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

Это свойство наконец-то дает нам возможность изменить цвет оформления текста!

text-decoration-style

Свойство text-decoration-style используется для определения типа оформления текста, а новые инструкции содержат два значения: double и wavy:

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Wavy Decoration

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

Свойство text-decoration-line принимает значения underline, overline, line-through и blink (однако blink считается устаревшим):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Вы получите:

Strike This

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

С помощью свойства text-decoration-skip мы можем сделать так, чтобы оформление текста не выходило за рамки элемента, к которому оно применяется. Возможные значения: objects, spaces, ink, edges и box-decoration.

Значение ink позволяет предотвратить перекрытие элементов оформления текста:

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Вы получите:

Hippopotamus

Значение objects пропускает оформление элементов, которые имеют отображение встроенного блока.

<p class="super">
  Getting <span style="display: inline-block;">Very</span> Fancy
</p>

 

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

В результате будет:

Getting Very Fancy

Остальные значения пока плохо поддерживаются браузерами, а именно:

  • spaces: оформление не касается пробелов и знаков препинания.
  • edges: создает зазор, если два элемента с текстовым оформлением находятся рядом друг с другом.
  • box-decoration: оформление пропускает любое унаследованное поле, отступ или границу.

text-underline-position

Свойство text-underline-position – еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

При начальном значении auto браузеры обычно размещают оформление близко к базовой линии текста:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Что выглядит так:

Hippopotamus

… и теперь обратите внимание, как с значение under перемещает оформление текста под выносные элементы:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hippopotamus

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

Продолжайте изучать оформление текста в CSS самостоятельно и попробуйте создать какой-нибудь причудливый стиль.

Can I Use text-decoration? сообщает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Читайте также: Настройка полосы прокрутки с помощью CSS

Tags:

Добавить комментарий