CSS властивості border image

10

Від автора: ще не так давно для того, щоб прикрасити будь-який елемент незвичайної рамкою потрібно нарізати зображення і з допомогою CSS постійно підганяти стилі до тих пір, поки результат вас не потроїть. Але все змінилося. Тепер, щоб зробити витончену рамку, необхідно всього кілька рядків коду. У цій статті ми покажемо, як це зробити з допомогою CSS властивості border image.

Властивості border image

Стандартний спосіб стилізації рамки через це правило border-style, у якого є значення dotted, dashed, solid, double, groove, ridge, inset і outset. Вибір значень досить великий, але можна ще більше розширити, додавши фонові зображення в якості кордону. Зробити це можна з допомогою наступних властивостей.

Властивість border-image-source

За допомогою цього властивість можна встановити фонове зображення в якості рамки об’єкта. Значенням виступає адресу на картинку:

element {
border-image-source: url(‘myimage.png’);
}

Також це може бути градієнт:

element {
border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

У браузері це буде виглядати приблизно так:

CSS властивості border image

Якщо встановити значення none, або якщо зображення не може бути відображено, браузер застосує значення властивості border-style. Так що border-style можна використовувати, як фолбэк.

Зображення може бути більше по ширині і висоті, ніж рамка. Особливість фонового зображення в якості рамки полягає в тому, що для прикраси елемента з рамкою будь-яких розмірів нам необхідно всього-лише одне маленьке зображення. Властивість також працює і з адаптивними елементами, які змінюють свій розмір залежно від розміру екрана.

Властивість border-image-slice

Після установки зображення через властивість border-image-source, необхідно його застосувати до рамки за допомогою властивості border-image-slice.

element {
border-image-slice: 19;
}

Давайте більш детально розглянемо принцип роботи. Властивість декорує внутрішні відступи зверху, справа, знизу і зліва. Ваше зображення з допомогою цієї властивості дублюється в 9 областях: 4 кута, 4 сторони і середина.

CSS властивості border image

Значення можна вказувати від одного до чотирьох в цілих числах або відсотках. При установці всіх чотирьох значень, вони застосовуються кожне до свого відступу: зверху, справа, знизу, зліва. Відступ зліва можна не вказувати, він буде такий же, як праворуч. Якщо не вказати відступ знизу, то буде застосоване значення відступу зверху. Якщо вказати одне значення, то воно буде застосовано до всіх сторін.

Процентне значення працює щодо розміру зображення – ширина для горизонтальних відступів і висота для вертикальних.

Цілочисельне значення це пікселі зображення або координати, якщо векторне зображення. Не можна додавати після px після цифр, інакше властивість не буде працювати! Нижче приклад використання властивості border-image-slice:

Border Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.box {
border: 19px dotted #c905c6;
border-image-source: url(border-bg.png);
border-image-slice: 19;
}

Зображення 100 x 100px в якості рамки буде виглядати так:

CSS властивості border image

Трохи збільшимо:

CSS властивості border image

Центральна частина прозора, тобто невидима. Якщо хочете, щоб і вона була з малюнком, додайте ключове слово fill. Наприклад, якщо використовувати зображення з прозорою серединою без ключового слова fill, то результат буде такий же, як вище. Однак, якщо застосувати fill:

.box {
border: 19px dotted #c905c6;
border-image-source: url(border-fill.png);
border-image-slice: 19 fill;
}

З’являється центральна частина зображення:

CSS властивості border image

Зображення відображається, але воно розмите і сплющено:

CSS властивості border image

Властивість border-image-width

Дана властивість відповідає за внутрішню область під назвою border-image-area. За замовчуванням межі даної зони збігаються з border box. Як і властивість border-image-slice, border-image-width працює з відступами, які ділять зображення на 9 зон.

Властивість приймає від одного до чотирьох значень (верх, право, низ, ліво), значення вказуються в числах або відсотках. Відсотки обчислюються від розміру зони border-image, тобто ширина зони відповідає за горизонтальний відступ, а висота за вертикальний. Якщо вказувати просто цифри без px, це означає, ширина border image буде дорівнювати значенню, зазначеному у властивості помноженому на border-width. Наприклад, код нижче:

.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 рази. Виглядає це так:

CSS властивості border image

Я помітив, що якщо задати властивостями 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.

CSS властивості border image

Якщо додати border-image-outset: 19px;, то рожева область вилізе за кордон зелених точок. Ото значить, що border image тепер розташований за кордоном border box:

CSS властивості border image

Будьте уважні, так як область 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

Нижче приклад:

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, чому б не поділитися результатами своєї роботи з спільнотою? З нетерпінням чекаю ваших коментарів!