Border-image
Border-image — свойство, которое позволяет задавать фоновое изображение для рамки элемента. Свойство заполняет рамку заданной картинкой, распределяя части изображения таким образом, чтобы угловые части находились в углах рамки, а пространства между ними заполнялись остальными частями изображения.
Спецификация: w3.org/TR/css3-background/#border-images.
Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.
Поддержка браузерами:
Не поддерживается в IE10 и ниже. В старой опере работает с префиксом.
Пользователи старых браузеров (или с отключенными картинками) увидят стандартную рамку, заданную в border, поэтому имеет смысл задавать ей подходящие стиль и цвет.
Пример:
Используемые изображения:
Можно использовать не только квадратные картинки, но и овальные:
Картинки из примера:
При этом border-radius не влияет на border-image, так что круглые картинки для рамки — единственный способ сделать округлую рамку.
Главное требование — симметричность изображений.
Рамка с изображением полность резиновая, и может быть добавлена объекту любого размера.
Поизменяйте размер браузера, чтобы увидеть как рамка адаптируется вместе с элементом:
Или откройте этот пример в отдельном окне.
В качестве рамки могут использоваться достаточно сложные изображения:
Картинка:
Самый короткий способ задать изображение для рамки выглядит вот так:
border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png") 25% round;
Результат:
Для border обязательно нужно задать толщину и стиль рамки.
Цвет — опционально, но рамку именно такого цвета увидят пользователи, браузеры которых не поддерживают border-image.
По умолчанию это будет цвет текста. Можно задавать transparent — прозрачный.
Для border-image обязательно задавать изображение (border-image-source), размер угловой части (border-image-slice) и повторение картинки (border-image-repeat).
Заданная картинка режется вот по такой схеме:
Желтым выделены угловые части, размер которых задается свойством border-image-slice, зеленым — заполняющие.
Рассмотрим отдельные свойства border-image.
Border-image-source
Возможные значения: none или <image>.
Теоретически, можно задавать и градиенты, но они работают в Хроме/Сафари и не работают в FF. С их помощью можно было бы делать резиновые тени неправильной формы, вот такие, например (смотреть в Хроме). С градиентами можно делать и более странные варианты, причем узоры сами заботятся о своей пропорциональности. Примеры ниже на момент написания статьи работают только в Хроме и Сафари.
Upd: В Firefox работают начиная с 29-й версии.
Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.
Если задать только border-image-source, картинка заполнит собой уголки, не зная что ей делать дальше:
border: 80px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");
Border-image-slice
Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки.
Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat.
Возможные значения:
<проценты> — рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
<числа> — пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются.
fill — ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
Очень полезно для округлых рамок.
Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.
Сумма значений противоположных сторон должна быть меньше размера картинки, иначе будет нечем заполнять пространство между углами.
border: 80px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;
Border-image-repeat
Свойство определяет как будут заполняться промежутки между углами.
Возможные значения:
stretch — растягивает заполняющий участок картинки. Значение по умолчанию;
repeat — повторяет заполняющий участок, при этом видны места стыков с угловой картинкой;
round — заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие.
space — действует похоже на repeat. Разницы не обнаружила.
Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе — за левую и правую.
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;
border-image-repeat: repeat;
Слева repeat, справа round.
Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее:
Border-image-width
border-image-width
Свойство управляет шириной видимой части рамки, масштабирует её.
Если это значение больше ширины border-width, картинка рамки заползет под содержимое, даже если не заданно свойство fill.
Возможные значения:
<длина> — значения в px или em;
<%> — значения в процентах относительно размера изображения;
<числа> — числовое значение, на которое умножается border-width
auto — ключевое слово. Если оно задано, значение равно соответственному border-image-slice. Если подходящего размера нет, используется значение border-width, при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.
border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 80;
border-image-repeat: round;
border-image-width: 160px;
Справа рамка с border-image-width. На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.
Border-image-outset
Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.
Возможные значения:
<длина> — значения в px или em;
<числа> — числовое значение, на которое умножается border-width.
border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 120;
border-image-repeat: round;
border-image-outset: 60px 10px 50px 120px;
Справа пример с border-image-outset. Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы:
border-image — довольно сложное, но очень интересное свойство. Мне очень нравится идея использовать его вместо традиционного способа сделать графическую рамку для резиновых элементов.
Примеры в посте несколько диковаты, но я уверена, что свойство можно применять более изящно, а от его возможностей просто захватывает дух : )
Например, Вадим Макеев предложил с помощью border-image делать тень сложной формы для блока, размеры которого могут быть заранее неизвестны.
Приготовьте подходящую картинку и посмотрите как border-image легко справится с задачей с помощью всего лишь пары строчек кода:
Можно менять размеры блока и добавлять в него сколько угодно текста — тень будет растянется вслед за ним.
Прекрасная простота. Будет здорово, когда это свойство можно будет полноценно использовать без оглядки на старые браузеры.
Изображения рамок нагуглены по запросу "рамки". Картинка с джедаями — фотожаба.
- Метки:
- рамки