Оформление строк текста с помощью box-decoration-break

Оформление строк текста с помощью box-decoration-break

От автора: девиз заведения, вступление автора, слоган компании, принцип сообщества, приветствие службы … все они имеют одну общую черту: это один краткий абзац, отображаемый на главной странице веб-сайта — или, по крайней мере, странице «О нас»!

Редко бывает так, что на сайте вас приветствуют только одним словом или одной строкой текста. Итак, давайте рассмотрим некоторые интересные способы, которыми мы могли бы сделать оформление строк этого абзаца.

Чтобы увидеть, как это работает в данный момент, давайте попробуем определить границы для всех строк некоторого текста во встроенном span и посмотрим, как это будет выглядеть:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Края кажутся разорванными, каковыми они технически и являются, так как встроенный блок был разбит на несколько строк. Но мы можем исправить эти разорванные края с помощью box-decoration-break!

В CSS свойство box-decoration-break может оформлять разорванные края фрагментов встроенного блока (а также страницы, столбца и области блока).

Его значение clone задает тот же дизайн, что у краев неразорванного блока, а значение по умолчанию — slice — не копирует оформление по краям, сохраняя разрыв заметным, как вы видели в демо-версии выше. Давай попробуем это в действии:

Свойство влияет не только на границу, но и на тень, интервал и фон разорванных краев. Давайте сначала поэкспериментируем с фоном. Во время написания сообщения о ярком тексте я работал с свойством background-clip и хотел посмотреть, поддерживает ли этот дизайн несколько строк текста. Это не так.

Градиент фона, который я применил, не был реплицирован в каждой строке, и после его отсечения только для первого фрагмента был оставлен фон. То есть, если не добавлять box-decoration-break: clone:

Свойство background-clip со значением text связывает фон с формой текста переднего плана. Поскольку мы использовали break-decoration-break, фон градиента обрезается равномерно по всем строкам текста. Возвращаясь к границе, давайте посмотрим, как ее форма и тень могут быть скопированы для разорванных краев:

Во втором абзаце демо фон обрезается до поля содержимого (background-clip: content-box). Как вы можете видеть, обрезка происходит и на разорванных краях, из-за box-decoration-break: clone.

Другой способ, которым мы можем оформить границы — это изображения. Вы можете видеть градиентную границу вокруг строк текста ниже (если браузер, который вы сейчас используете, поддерживает border-image), и дополнение с помощью box-decoration-break.

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Как видно из демо-версиии, box-decoration-break работает также и для анимации.

Помимо границ и фона, box-decoration-break также может управлять фигурами, применяемыми к элементам. Для встроенных блоков это может пригодиться нечасто, а вот для столбцов и страничных блоков мы можем это использовать, хотя приложение еще не поддерживается широко в браузерах.

Но чтобы показать пример того, как это работает, давайте попробуем применить свойство clip-path к span. Свойство clip-path полностью поддерживается в Firefox, поэтому только в нем вы можете увидеть ожидаемый результат. Но на следующих двух изображениях показаны результаты применения clip-path к span: с box-decoration-break и без.

Применение clip-path к span

Применение clip-path к span с box-decoration-break

На первом изображении вы заметите, что значение радиуса 50% получается из ширины встроенного блока (самая длинная строка), где не используется box-decoration-break.

На втором изображении показано, как box-decoration-break: clone переопределяет вычисленное значение на 50% от ширины отдельных строк, сохраняя центр.

А вот, как функция inset из clip-path (вставленный прямоугольник), применяемая к span, обрезает его с и без box-decoration-break:

clip-path: inset для span

clip-path: inset для span с box-decoration-break

Без box-decoration-break видна только часть первой строки, которая соответствует кратчайшей длине видимой части, а с box-decoration-break: clone, первая строка полностью видна, когда остальная часть поля обрезана.
Итак, возможно, если вы когда-нибудь захотите показать только первую строку и скрыть все остальное, это может пригодиться. Но, как я упоминал ранее, это приложение более подходит для других типов блоков. В любом случае, я хотел показать вам, как это работает.

Поддержка браузерами

Как мы видели, box-decoraton-break может оказаться полезным во многих случаях и открывает множество возможностей, таких как создание красивых текстовых эффектов. Свойство хорошо поддерживается с префиксом -webkit, но все еще находится в рабочем проекте на момент написания этой статьи и не имеет поддержки в Internet Explorer и Edge. Здесь вы можете проголосовать за поддержку Edge.

Данные поддержки браузера взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает эту функцию с этой версии.

Заключение

box-decoration-break: clone копирует любой дизайн границ, пространств и фоновых изображений, применяемых к разорванным краям фрагментированных встроенных блоков. Это задает красивый дизайн для всех строк текста, равномерно распределяя эффекты и может использоваться для всех фрагментов текста, которые мы обычно используем на веб-сайтах.

Автор: Preethi

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree