От автора: девиз заведения, вступление автора, слоган компании, принцип сообщества, приветствие службы … все они имеют одну общую черту: это один краткий абзац, отображаемый на главной странице веб-сайта — или, по крайней мере, странице «О нас»!
Редко бывает так, что на сайте вас приветствуют только одним словом или одной строкой текста. Итак, давайте рассмотрим некоторые интересные способы, которыми мы могли бы сделать оформление строк этого абзаца.
Чтобы увидеть, как это работает в данный момент, давайте попробуем определить границы для всех строк некоторого текста во встроенном span и посмотрим, как это будет выглядеть:
|
1 |
<p><span>Hummingbirds are birds from...</span></p> |
|
1 2 3 |
span { border: 2px solid; } |
Края кажутся разорванными, каковыми они технически и являются, так как встроенный блок был разбит на несколько строк. Но мы можем исправить эти разорванные края с помощью box-decoration-break!
В CSS свойство box-decoration-break может оформлять разорванные края фрагментов встроенного блока (а также страницы, столбца и области блока).
Его значение clone задает тот же дизайн, что у краев неразорванного блока, а значение по умолчанию — slice — не копирует оформление по краям, сохраняя разрыв заметным, как вы видели в демо-версии выше. Давай попробуем это в действии:
|
1 2 3 4 |
span { border: 2px solid; box-decoration-break: clone; } |
Свойство влияет не только на границу, но и на тень, интервал и фон разорванных краев. Давайте сначала поэкспериментируем с фоном. Во время написания сообщения о ярком тексте я работал с свойством background-clip и хотел посмотреть, поддерживает ли этот дизайн несколько строк текста. Это не так.
Градиент фона, который я применил, не был реплицирован в каждой строке, и после его отсечения только для первого фрагмента был оставлен фон. То есть, если не добавлять box-decoration-break: clone:
|
1 |
<p><span>Singapore:<br>Lion City</span></p> |
|
1 2 3 4 5 6 7 |
span { background-image: linear-gradient(135deg, yellow, violet); background-clip: text; color: transparent; padding: .5em; box-decoration-break: clone; } |
Свойство background-clip со значением text связывает фон с формой текста переднего плана. Поскольку мы использовали break-decoration-break, фон градиента обрезается равномерно по всем строкам текста. Возвращаясь к границе, давайте посмотрим, как ее форма и тень могут быть скопированы для разорванных краев:
|
1 2 3 4 |
<img src="tree.png"> <p><span>Supertrees are tree-like structures...</span></p> <img src="tree.png"> <p><span>Supertrees are tree-like structures...</span></p> |
|
1 2 3 4 5 6 7 8 9 10 11 |
span { background: rgb(230,157,231); border-radius: 50% 0%; box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige inset; padding: .5em 1.3em; box-decoration-break: clone; } p:nth-of-type(2) span { background-clip: content-box; } |
Во втором абзаце демо фон обрезается до поля содержимого (background-clip: content-box). Как вы можете видеть, обрезка происходит и на разорванных краях, из-за box-decoration-break: clone.
Другой способ, которым мы можем оформить границы — это изображения. Вы можете видеть градиентную границу вокруг строк текста ниже (если браузер, который вы сейчас используете, поддерживает border-image), и дополнение с помощью box-decoration-break.
|
1 |
<p><span>The Malaysia–Singapore Second Link...</span></p> |
|
1 2 3 4 5 6 7 |
span { border: 2px solid; border-image: linear-gradient(45deg, #eeb075, #2d4944) 1; background: #eef6f3; padding: .5em 1.3em; box-decoration-break: clone; } |
Дополнительное поведение, которое мы можем задействовать для украшения отдельных линий — это контур. В поддерживаемых браузерах box-decoration-break может добавить контур для каждой строки текста, включая разорванные края, что можно использовать для создания двуцветных штриховых границ.
|
1 |
<p><span>Cloud Forest replicates...</span></p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
span { outline: 2px dashed rgb(216,255,248); box-shadow: 0 0 0 2px rgb(39,144,198); background: #fffede; padding: .5em 1.3em; animation: 1s animateBorder ease infinite; box-decoration-break: clone; } @keyframes animateBorder{ to{ outline-color: rgb(39,144,198); box-shadow: 0 0 0 2px rgb(216,255,248); } } |
Как видно из демо-версиии, box-decoration-break работает также и для анимации.
Помимо границ и фона, box-decoration-break также может управлять фигурами, применяемыми к элементам. Для встроенных блоков это может пригодиться нечасто, а вот для столбцов и страничных блоков мы можем это использовать, хотя приложение еще не поддерживается широко в браузерах.
Но чтобы показать пример того, как это работает, давайте попробуем применить свойство clip-path к span. Свойство clip-path полностью поддерживается в Firefox, поэтому только в нем вы можете увидеть ожидаемый результат. Но на следующих двух изображениях показаны результаты применения clip-path к span: с box-decoration-break и без.
|
1 2 3 4 |
span { clip-path: circle(50% at 202.1165px 69.5px); ... } |
Применение clip-path к span
|
1 2 3 4 5 |
span { clip-path: circle(50% at 202.1165px 69.5px); box-decoration-break: clone; ... } |
Применение clip-path к span с box-decoration-break
На первом изображении вы заметите, что значение радиуса 50% получается из ширины встроенного блока (самая длинная строка), где не используется box-decoration-break.
На втором изображении показано, как box-decoration-break: clone переопределяет вычисленное значение на 50% от ширины отдельных строк, сохраняя центр.
А вот, как функция inset из clip-path (вставленный прямоугольник), применяемая к span, обрезает его с и без box-decoration-break:
|
1 2 3 4 |
span { clip-path: inset(0); ... } |
clip-path: inset для span
|
1 2 3 4 5 |
span { clip-path: inset(0); box-decoration-break: clone; ... } |
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
Источник: //css-tricks.com/
Редакция: Команда webformyself.
