Одне з найпотужніших нових властивостей CSS, border - image. яке до того ж ще й має шикарну підтримку, за винятком (а тепер всі разом!) IE10 і більш ранніх версій. Але, на жаль, також є одним з найбільш незрозумілих і складних для розуміння властивостей.
Пояснення того, як працює border - image. можливо, найкраще проілюструвати картинкою. По-перше, давайте розберемо будь-яку рамку на складові: уявімо позолочену раму для картини, яка розділена на дев'ять «плиток» двома горизонтальними і двома вертикальними лініями. На малюнку вище я помітив вертикальні розділові лінії, як V1 і V2. а горизонтальні, як H1 і H2.
Замість того, щоб дозволити вам задати окреме зображення для кожної частини кордону, border - image наполягає, щоб ви створили одне зображення, в якому всі частини знаходяться на своїх місцях, а потім порізали це зображення за допомогою CSS-значення, які прив'язуються до позиції цих ліній.
Уявімо, що ми граємо в Морський бій і позначимо кожну «плитку», створену нашими розділовими лініями. До верхнього лівого кута ми могли б звернутися як A1. до правої середньої частини B3. і т.д. (Середня частина - B2 - буде проігнорована CSS, після того, як ми визначимо фрагменти для нашого зображення рамки.) Місця розміщення фрагментів зумовлюють ролі для наших «плиток». A3 завжди займе місце зображення верхнього правого кута для нашої рамки; C2 буде використовуватися для нижнього краю, і т.д.
Давайте розглянемо бічні сторони і верх нашої рамки, оскільки вони знаходяться в досить специфічних, притому мінливих, умовах. Коли ми застосовуємо рамку до HTML-елементів, ми не знаємо, якої величини буде бокс. Після того, як ці умови застосуються до рамки, кутові «плитки» не порушені змінами розміру, але бічні сторони, а також верх і низ виразно зміняться. Нам треба вирішити, як повинні вести себе «плитки», які там будуть розміщені: чи будуть вони повторюватися або витягуватися, якщо бокс стане більше? Це рішення відноситься до дизайну нашої рамки і тому і нам доведеться позначити наш вибір при написанні CSS.
Нарешті, давайте подумаємо про лініях, якими створені наші плитки: двох горизонтальних і двох вертикальних. Нам потрібно повідомити CSS, де будуть знаходитися ці уявні роздільники, для того, щоб він застосував цю інформацію для створення «плиток». Ми могли б відраховувати їх положення або в процентах або в пікселях від кутів. (Я б сказав, що в більшості випадках друга найпростіше, крім випадку з SVG-картинками як зображення рамки).
Зауважте, що шеврони на кутах цієї рамки означають, що фрагменти повинні бути досить великими, щоб включити ті деталі, які збільшують розмір рамки і зроблять ефект віньєтки, як у справжній рамі, який насправді реалістичний для професійно оформленої фотографії або картини. Я зробив внутрішню частину рамки прозорою, що означає, що background - color. який я вказую, буде просвічувати наскрізь.
Як не дивно, коли значення вводяться у вигляді пікселів, за ними не слід суфікс «px», на відміну від майже всього іншого в CSS.
Дане зображення під ліцензією Creative Commons (зняте Енні Чартранд) вставлено на сторінку за допомогою цього коду
І з огляду на верхнє зображення рамки, CSS, який ми могли б застосувати до неї, був би приблизно таким:
(Зауважте, що цей код поки ще не працює: є ще кілька речей, які потрібно додати).
Є кілька варіантів того, як будуть оброблятися боку. stretch саме так і працює, repeat буде повторювати «плитки», щоб вмістити їх в доступну область, round - це гібрид обох значень, який намагається використовувати для сторін повні варіанти плиток, але розтягуючи їх там, де необхідно.
Але я виявив, що з єдиним значенням border - width рамка по суті масштабується:
Пам'ятайте, що у вигляді запасного варіанту вам також потрібна звичайна рамка на випадок, якщо зображення для «плиток» не завантажується або відвідувач використовує IE: я б запропонував взяти рамку товщиною приблизно як плитки і скористатися її переважаючим кольором, можливо, з яким-небудь, що рідко використовуються border - style додачу.
Отже, повний код для ефекту, який показаний в верху цієї сторінки, виглядає так:
Поради по дизайну
Через неминучого розтягування і деформації, які має зазнати будь-яке зображення, яке застосовується в border - image. я б рекомендував використовувати PNG-зображення для рамок, де це можливо. PNG-24 також дозволяє робити частини плиток прозорими, що дуже важливо, якщо ви використовуєте великі прикраси для кожного кута, як в нашому прикладі з позолоченим рамою. Без прозорості внутрішніх частин зображення наша рама ризикує наложиться на що-небудь з внутрішнього вмісту боксу.
Я б також порадив використовувати напрямні, інструмент «Виділення» і вікно «Інформація», щоб вимірювати фрагменти. Ми робили схожу роботу раніше - текст, що обгинає фігуру і Семантичні CSS3-спрайт (дійсно, специфікації властивості clip і border - image тісно пов'язані між собою). Ще як варіант, можна використовувати онлайн-інструмент Кевіна Декера - «Генератор Border Image», щоб створити CSS для вашої рамки.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...