Від автора: Всіх вітаю. Напевно, ви знаєте про те, що в css можна робити рамку будь-якого елементу. Але чи знали ви, що в якості рамки може бути не просто суцільний колір, але і зображення? Сьогодні я вам покажу, як робиться в css рамка-картинка.
Стандартні можливості рамок в css обмежені. По суті, ви лише можете задати тип лінії, колір та товщину. У більшості випадків цього досить, але також часто потрібно щось цікавіше. Наприклад, подвійна або множинна рамка, або взагалі зображення замість суцільного кольору. В останньому випадку нас рятує властивість border-image, яке є досить новим і дозволяє використовувати зображення в якості рамки.
На даний момент властивість підтримується досить слабо, тому рекомендую вам використовувати його з усіма вендорными префіксами для більш менш нормального відображення. Отже, в якості картинки для нашої майбутньої рамки я обрав наступну:
Непогано виглядає, так? І хоч я пишу цю статтю в серпні, попереду осінь, а значить рамка цілком собі до місця в нашому випадку. Що ж, щоб спробувати застосувати нашу рамку до якогось елементу, треба його створити, зрозуміло. Нехай це буде просто кілька абзаців тексту.
нас дивувати, тому що ось уже кілька років поспіль температура на нашій планеті
стрімко підвищується.
Ще кілька десятиліть тому в такій ситуації не спостерігалося. Наприклад, раніше
літні вечори приносили із собою прохолоду, а нині навіть увечері часом нікуди не дінешся
від неймовірної спеки. Така ситуація відбувається по всьому світу. Справа в парниковому ефекті,
кількість вуглекислого газу на нашій планеті збільшується.
Ось так, нехай це буде блок з двома абзацами. Рамку ми застосуємо як раз до цього блоку.
.border{
margin: 30px auto;
width: 500;
border: 50px solid red;
border-image: url(leaves.jpg) 50;
}
Тут нас з вами повинні цікавити третя і четверта рядка. Ширину я поставив тільки для того, щоб блок не розтягувався на всю ширину вікна і ми могли наочно бачити нашу рамку. Отже, спочатку покажу результат:
Вийшло досить симпатично. Ну а тепер я вам поясню, що ж потрібно для такого відображення:
Вказати звичайну рамку. Тобто ширину, тип і колір, як ніби ви ставите звичайну рамку. Це дуже важливо зробити, без цього наша декоративна рамка показуватися не буде!
Прописати безпосередньо властивість border-image, де вказати шлях до картинку з рамкою, а також ширину всіх сторін рамки. Я вказав однаково з усіх сторін – 50. Дуже важливо записувати просто число, без пікселів. Тобто якщо ви в border-image напишете 50px, то відобразиться просто червона рамка, якщо не вкажете розмір взагалі, то теж буде некоректне відображення. Дуже важливо зробити так, як написано в коді.
Власне, це всі обов’язкові параметри, які ви повинні прописати для того, щоб кордон відобразилася. В якості третього параметра для border-image можна вказати тип повторення. За замовчуванням, якщо ви його не заданий, то браузер буде використовувати значення stretch, тобто розтягувати малюнок кордону до розмірів елемента, до якого застосовується рамка.
Також є значення repeat, воно змушує малюнок меж border-а повторюватися. Але з-за цього на кінцях елемента малюнок в черговий раз може поміститися не повністю. Якщо ж ви хочете вмістити ціле кількість повторень, використовуйте значення round, яке теж повторює зображення, але при цьому робить так, щоб у рамці використовувалися тільки цілі повторення.
Справа в тому, що розмір моєї рамки і так великий, тому особливої різниці між значеннями властивостей ви не побачите.
Замість прикладів я краще дам вам посилання на чудовий ресурс, де ви можете потренуватися і зрозуміти, як же вам використовувати декоративні рамки. Ось він — http://border-image.com/.
Спочатку завантажте в генератор зображення рамки, а потім практикуйтеся на ньому. Сервіс відразу генерує вам код, тому це дозволяє вам ще краще зрозуміти, як все це функціонує.
Також хочу зазначити, що до декоративній рамці неможливо застосувати закруглення кутів. Простіше кажучи, властивість border-radius ніяк не впливає на таку рамку. Єдиний варіант отримати закруглену рамку – знайти в інтернеті таку спочатку і вже її застосовувати до потрібних елементів.
Що ж, я сподіваюся, сьогоднішня стаття допомогла вам і тепер ви маєте в своєму арсеналі ще одну крайньої цікаву можливість css3 – декоративні рамки. Область їх застосування досить широка. Наприклад, можна обрамляти ними віджети і використовувати для різного роду декоративних елементів. На цьому у мене все, до зустрічі! До речі, інші фішки css3 ви можете вивчити в нашій серії уроків за цією технологією. Там і градієнти, і закруглення кутів, і тіні. Загалом, повний фарш.
