От автора: еще не так давно для того, чтобы украсить какой-либо элемент необычной рамкой требовалось нарезать изображение и с помощью CSS постоянно подгонять стили до тех пор, пока результат вас не утроит. Но все изменилось. Теперь, чтобы сделать изощренную рамку, необходимо всего пара строк кода. В этой статье мы покажем, как это сделать с помощью CSS свойства border image.
Свойства border image
Стандартный способ стилизации рамки это через правило border-style, у которого есть значения dotted, dashed, solid, double, groove, ridge, inset и outset. Выбор значений достаточно большой, но можно еще больше его расширить, добавив фоновые изображения в качестве границы. Сделать это можно с помощью следующих свойств.
Свойство border-image-source
С помощью этого свойство можно установить фоновое изображение в качестве рамки объекта. Значением выступает адрес на картинку:
|
1 2 3 |
element { border-image-source: url('myimage.png'); } |
Также это может быть градиент:
|
1 2 3 |
element { border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%); } |
В браузере это будет выглядеть примерно так:
Если установить значение none, или если изображение не может быть отображено, браузер применит значения свойства border-style. Так что border-style можно использовать, как фолбэк.
Изображение может быть больше по ширине и высоте, чем рамка. Особенность фонового изображения в качестве рамки заключается в том, что для украшения элемента с рамкой любых размеров нам необходимо всего-лишь одно маленькое изображение. Свойство также работает и с адаптивными элементами, которые изменяют свой размер в зависимости от размера экрана.
Свойство border-image-slice
После установки изображения через свойство border-image-source, необходимо его применить к рамке при помощи свойства border-image-slice.
|
1 2 3 |
element { border-image-slice: 19; } |
Давайте более подробно разберем принцип работы. Свойство декорирует внутренние отступы сверху, справа, снизу и слева. Ваше изображение с помощью данного свойства дублируется в 9 областях: 4 угла, 4 стороны и середина.
Значения можно указывать от одного до четырех в целых числах или процентах. При установке всех четырех значений, они применяются каждое к своему отступу: сверху, справа, снизу, слева. Отступ слева можно не указывать, он будет такой же, как справа. Если не указать отступ снизу, то будет применено значение отступа сверху. Если указать одно значение, то оно будет применено ко всем сторонам.
Процентное значение работает относительно размера изображения – ширина для горизонтальных отступов и высота для вертикальных.
Целочисленное значение это пиксели изображения или координаты, если изображение векторное. Нельзя добавлять после px после цифр, иначе свойство не будет работать! Ниже пример использования свойства border-image-slice:
|
1 2 3 4 |
<div class="box"> Border Image Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> |
|
1 2 3 4 5 |
.box { border: 19px dotted #c905c6; border-image-source: url(border-bg.png); border-image-slice: 19; } |
Изображение 100 x 100px в качестве рамки будет выглядеть так:
Немного увеличим:
Центральная часть прозрачная, т.е. невидима. Если хотите, чтобы и она была с рисунком, добавьте ключевое слово fill. К примеру, если использовать изображение с прозрачной серединой без ключевого слова fill, то результат будет такой же, как выше. Однако, если применить fill:
|
1 2 3 4 5 |
.box { border: 19px dotted #c905c6; border-image-source: url(border-fill.png); border-image-slice: 19 fill; } |
Появляется центральная часть изображения:
Изображение отображается, но оно размыто и сплющено:
Свойство border-image-width
Данное свойство отвечает за внутреннюю область под названием border-image-area. По умолчанию границы данной зоны совпадают с border box. Как и свойство border-image-slice, border-image-width работает с отступами, которые делят изображение на 9 зон.
Свойство принимает от одного до четырех значений (верх, право, низ, лево), значения указываются в числах или процентах. Проценты высчитываются от размера зоны border-image, т.е. ширина зоны отвечает за горизонтальный отступ, а высота за вертикальный. Если указывать просто цифры без px, это значит, ширина border image будет равна значению, указанному в свойстве умноженному на border-width. К примеру, код ниже:
|
1 2 3 4 5 6 |
.box { border: 19px dotted #c905c6; border-image-source: url(border-bg.png); border-image-slice: 19; border-image-width: 3; } |
… ширина изображения-рамки в 3 раза больше значения свойства border-width, т.е. больше 19px в 3 раза. Выглядит это так:
Я заметил, что если задать свойствам border-image-width и border-image-slice одинаковые значения, то изображение-рамка будет отображаться без искажений.
Свойство border-image-outset
До сих пор все свойства отвечали за внутреннюю область рамки. Однако рамку можно выдвинуть за область блока. Сделать это можно с помощью свойства border-image-outset:
Свойство принимает от одного до четырех значений (верх, право, низ, лево), значение указывается в цифрах или единицах измерения типа px, em и т.д. Если указать просто цифры, то рамка вылезет за область блока на результат умножения данного значения на значение свойства border-width.
Ниже я нарисовал блок: зеленые точки указывают границу border box. Зона border-image это розовая граница. По умолчанию со значением inset розовая область находится внутри зеленой. Т.е. border image внутри border box.
Если добавить border-image-outset: 19px;, то розовая область вылезет за границу зеленых точек. Ото значит, что border image теперь расположен за границей border box:
Будьте внимательны, так как область border image, лежащая за границей border box не поддается прокрутке и событиям мыши. Все примеры в демо CodePen:
Свойство border-image-repeat
Данное свойство предлагает несколько вариантов масштабирования и расположения изображения на гранях и центральной части рамки. Первое значение работает с горизонтальными гранями (верх и низ), второе – с вертикальными (правая и левая). Если установить одно значение, то оно применится ко всем сторонам. Доступные значения:
stretch – Значение по умолчанию, если не используется свойство border-image-repeat. Изображение растягивается и заполняет всю область.
repeat – Для заполнения области изображение дублируется. Если ширина изображения не вмещается в видимую область поля, то оно обрезается.
round – то же самое, что repeat, но если изображение не вписывается в область, то оно будет масштабироваться пока не впишется. Изображения никогда не обрезаются, но могут быть немного сплющенными.
space – То же самое, что repeat, но если суммарная ширина всех изображений не совпадает с шириной области, то между изображениями появятся пробелы.
На момент написания статьи в Firefox значения space и stretch никак не отличались друг от друга, а в Chrome одинаково работали значения space и repeat.
Сокращенное свойство border-image
Все свойства, описанные выше, можно преобразовать в одно сокращенное:
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
Ниже пример:
|
1 2 3 |
element { border-image: url(myimage.png) 19 / 19px / 0 round; } |
Посмотреть свойства border-image-repeat и border-image в работе можно на CodePen.
Что если я захочу удалить изображение рамки?
Лучше всего для сброса рамки воспользоваться свойством border. С его помощью можно быстро сбросить ширину, цвет и стили для всех четырех граней элемента. Не нужно задавать свойство border-image:none или переписывать индивидуальные свойства border-image.
Поддержка в браузерах
На момент написания статьи свойство border-image поддерживается практически во всех современных браузерах. Firefox не умеет растягивать SVG, а в Opera Mini свойство поддерживается с вендорным префиксом –o-.
Заключение
Статья посвящена свойству border-image: его значениям, как лучше использовать данного свойство, а также поддержке в браузерах на момент написания статьи. Более подробную информацию можно найти в спецификации CSS Backgrounds and Borders Level 3. Если вы уже использовали свойство border-image, почему бы не поделиться результатами своей работы с сообществом? Жду с нетерпением ваших комментариев!
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
