Як робиться в css рамка-картинка описуємо прийом

Стандартні можливості рамок в css обмежені. По суті, ви всього лише можете задати тип лінії, колір і товщину. У більшості випадків цього достатньо, але також часто потрібно щось цікавіше. Наприклад, подвійна або множинна рамка, або взагалі зображення замість суцільного кольору. В останньому випадку нас рятує властивість border-image, яке є досить новим і дозволяє використовувати зображення в якості рамки.

На даний момент властивість підтримується досить слабо, тому рекомендую вам використовувати його з усіма Вендорний префіксами для більш менш нормального відображення. Отже, в якості картинки для нашої майбутньої рамки я вибрав наступну:

Ось так, нехай це буде блок з двома абзацами. Рамку ми застосуємо як раз до цього блоку.

Тут нас з вами повинні цікавити третя і четверта рядки. Ширину я задав тільки для того, щоб блок не розтягувався на всю ширину вікна і ми могли більш наочно бачити нашу рамку. Отже, спочатку покажу результат:

Вийшло досить симпатично. Ну а тепер я вам поясню, що ж потрібно для такого відображення:

Вказати звичайну рамку. Тобто ширину, тип і колір, як ніби ви задаєте звичайну рамку. Це дуже важливо зробити, без цього наша декоративна рамка показуватися не буде!

Прописати безпосередньо властивість border-image, де вказати шлях до картинку з рамкою, а також ширину всіх сторін рамки. Я вказав однаково з усіх сторін - 50. Дуже важливо записувати просто число, без пікселів. Тобто якщо ви в border-image напишете 50px, то відобразиться просто червона рамка, якщо не вкажете розмір взагалі, то теж буде некоректне відображення. Дуже важливо зробити так, як написано в коді.

Власне, це все обов'язкові параметри, які ви повинні прописати для того, щоб кордон відобразилася. В якості третьої параметра для border-image можна вказати тип повторення. За замовчуванням, якщо ви його не вкажете, то браузер буде використовувати значення stretch, тобто розтягувати малюнок кордону до розмірів елемента, до якого застосовується рамка.

Також є значення repeat, воно змушує малюнок кордонів border-а повторюватися. Але через це на кінцях елемента малюнок в черговий раз може поміститися в повному обсязі. Якщо ж ви хочете вмістити ціле кількість повторень, використовуйте значення round, яке теж повторює зображення, але при цьому робить так, щоб в рамці використовувалися тільки цілі повторення.

Справа в тому, що розмір моєї рамки і так великий, тому особливої ​​різниці між значеннями властивостей ви не побачите.

Спочатку завантажте в генератор зображення рамки, а потім практикуйтеся на ньому. Сервіс відразу генерує вам код, тому це дозволяє вам ще краще зрозуміти, як все це функціонує.

Також хочу відзначити, що до декоративної рамці неможливо застосувати закруглення кутів. Простіше кажучи, властивість border-radius ніяк не впливає на таку рамку. Єдиний варіант отримати закруглену рамку - знайти в інтернеті таку спочатку і вже її застосовувати до потрібних елементів.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі