Не так давно добавление рамок требовало обрезки изображений и длительной настройки CSS . Теперь ситуация изменилась. Несколько строк кода — это все что вам нужно, чтобы украсить изображение сложными рамками. Из этой статьи вы узнаете, как это делается.
Содержание
Свойства рамки изображения
Общий способ определения стиля рамок заключается в использовании предустановленных значений стилей: dotted , dashed , solid , double , groove , ridge , inset и outset .
Но вы можете пойти еще дальше и установить фоновые изображения для рамок с помощью следующих свойств CSS .
Свойство border-image-source
С помощью этого свойства назначается фоновое изображение для элемента рамки. Принимаемое значение – это URL-адрес изображения:
Также это свойство отлично работает с градиентами CSS :
В браузере это выглядит примерно так:
Если вы установите для этого свойства значение none , или изображение не может быть отображено, то браузер будет использовать значения свойства border-style . Поэтому нужно использовать border-style в качестве запасного варианта.
Изображение, которое вы используете, не обязательно должно совпадать с рамкой по ширине и высоте. CSS установит нужные размеры автоматически.
Свойство border-image-slice
После того как вы выбрали изображение с помощью border-image-source , вы применяете его к рамке, используя свойство border-image-slice :
Это свойство задает внутренние смещения от верхней, правой, нижней и левой стороны. Смещения разделяют изображение на 9 областей: четыре угла, четыре стороны и посередине:
В качестве значения вы можете указать от одного до четырех чисел или проценты. При указании четырех значений они применяются для смещений сверху, справа, снизу и сверху. Если вы пропускаете смещение слева, оно задается таким же, как справа. Если вы пропускаете смещение снизу, оно будет таким же, как сверху. Если вы пропустите значение смещения справа, оно будет установлено таким же, как смещение сверху. Если использовать только одно значение, оно будет использоваться для всех четырех смещений.
Процентные значения обозначают проценты от размеров изображения — ширины изображения для горизонтальных смещений и высоты для вертикальных.
Числа обозначают пиксели изображения, или координаты в случае, если это векторное изображение. Не добавляйте px после числа – в этом случае свойство не будет работать.
Вот как вы можете использовать border-image-slice :
Используя для рамки изображение размером 100 на 100 пикселей, которое выглядит следующим образом:
мы получим что-то выглядящее вот так:
Средняя область выводится полностью прозрачной, поэтому она не видна. Если вы хотите сделать ее видимой, добавьте ключевое слово fill .
Например, использовав изображение с непрозрачной центральной областью, вы получите такой же результат, как на рисунке выше.
Применив ключевое слово fill следующим образом:
с изображением, содержащим в центральной области детализированный контент:
мы получим область с полностью видимым изображением, хотя оно и будет размытым и деформированным:
Свойство border-image-width
Это свойство задает площадь границ рамки. По умолчанию, границы этой области совпадают с границами блока рамки. Так же, как и свойство border-image-slice , border-image-width задает внутренние смещения, которые разделяют изображение на девять областей.
Это свойство принимает до четырех значений ( смещение сверху, справа, снизу и слева ), число или процентное значение.
Проценты задаются относительно области изображения рамки ( по ширине для горизонтальных смещений и высоте для вертикальных смещений ). Если вы используете числа без указания px, это будет приравниваться к умножению соответствующего значения border-width . Например, следующий код:
… устанавливает ширину изображения рамки в три раза больше значения border-width , которое равно 19 пикселям. В результате получится что-то наподобие этого:
Я пришла к выводу, что определение для свойств border-image-width и border-image-slice одинаковых значений обеспечивает наилучшее отображение рисунка рамки без искажений.
Свойство border-image-outset
Рассмотренные нами свойства используются для вставки изображения рамки внутрь блока рамки. Но мы можем сдвинуть область изображения рамки за пределы блока с помощью свойства border-image-outset .
Это свойство принимает до четырех значений ( смещение сверху, справа, снизу, слева ) выражаемых в единицах длины: как пикселях, так и Em. Если вы используете число, изображение рамки будет смещено за пределы границы рамки на величину, кратную значению border-width .
Для большей ясности я нарисовала зеленый пунктирный контур, представляющий границу блока рамки. Область изображения рамки содержит внутри розовое изображение. По умолчанию изображение должно находиться внутри зеленого контура. Это означает, что область изображения рамки размещается внутри блока рамки:
Добавление правила border-image-outset : 19px; приводит к тому, что розовое изображение выводится за пределы зеленого пунктирного контура:
При размещении изображения рамки вне блока рамки, оно не охватывается прокруткой элементов и событиями мыши.
Посмотрите все примеры, обсуждаемые на данный момент на CodePen :
Свойство border-image-repeat
Это свойство предлагает несколько вариантов отображения фонового изображения рамки по сторонам и в средней части рамки. Первое значение применяется к горизонтальным сторонам ( сверху и снизу ), а второе значение к вертикальным ( справа и слева ). Если вы установите только одно значение, оно будет применяться и к горизонтальным, и к вертикальным сторонам.
- stretch — значение по умолчанию, если вы не используете свойство border-image-repeat . Растягивает изображение, чтобы оно заполняло всю доступную площадь;
- repeat — изображение повторяется, чтобы заполнить всю доступную площадь. Изображение может отображаться не полностью, если доступная площадь не может быть заполнена по ширине кратное количество раз;
- round — то же самое, что repeat , но если доступного пространства недостаточно, чтобы вместить копии изображения рамки без обрезки, они растягиваются, пока не будут подогнаны соответственно. Фрагменты плитки никогда не обрезаются, но могут выглядеть немного искаженными;
- space — то же самое, что repeat, но если доступное пространство не может вместить кратное количество копий, оставшееся пустое пространство равномерно распределяется между всеми фрагментами.
На момент написания данной статьи Firefox выводит space так же, как stretch , а Chrome выводит space так же, как repeat .
Свойство border-image
Вы можете использовать все свойства, описанные выше, в свойстве border-image следующим образом:
- border-image-source ;
- border-image-slice ;
- border-image-width ;
- border-image-outset ;
- border-image-repeat .
Ниже приводится фрагмент кода:
Поэкспериментируйте с примерами кода свойства 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 .
С нетерпением жду ваших отзывов!
Данная публикация представляет собой перевод статьи « Decorating the Web with CSS Border Images » , подготовленной дружной командой проекта Интернет-технологии.ру
Как сделать паспарту?
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Как добавить рамку к изображению?
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .
CSS3-рамка дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.
Закруглённые углы и рамки-изображения
- Содержание:
- 1. Закругление углов с помощью border-radius
- 2. Рамки-изображения border-image
- 2.1. Ширина рамки-изображения border-image-width
- 2.2. Ресурс рамки-изображения border-image-source
- 2.3. Элементы рамки-изображения border-image-slice
- 2.4. Повтор рамки-изображения border-image-repeat
- 2.5. Смещение рамки-изображения border-image-outset
- 3. Градиентная рамка
1. Закругление углов с помощью border-radius
Поддержка браузерами
Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip .
Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно.
Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый и нижний правый угол, а второе — верхний правый и нижний левый.
Значения, заданные через / , определяют горизонтальные и вертикальные радиусы. Свойство не наследуется.
| border-radius (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) | |
|---|---|
| Значения: | |
| длина | Позволяет закруглить углы блока с помощью значений единиц длины — px , em . |
| % | Значения, закругляющие углы, задаются в процентах от длины и ширины сторон элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 1. Примеры различных вариантов закругления углов блока
2. Рамки-изображения border-image
Поддержка браузерами
IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42
Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: .
| border-image | |
|---|---|
| Значения: | |
| краткая запись | Устанавливает рамку-изображение с помощью одного свойства, являющегося краткой записью свойств border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat . Значения по умолчанию: . |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
При помощи такого простого изображения можно получить вот такие рамки для элемента.
Рис. 2. Пример оформления границ блока с помощью изображения
Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30 ), задается с помощью значения свойства border-image-slice .
2.1. Ширина рамки-изображения border-image-width
Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .
| border-image-width | |
|---|---|
| Значения: | |
| длина | Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д. |
| число | Числовое значение, на которое умножается значение border-width . |
| % | Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. |
| auto | Соответствует значению border-image-slice . |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
2.2. Ресурс рамки-изображения border-image-source
Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.
| border-image-source | |
|---|---|
| Значения: | |
| none | Отсутствие изображения для рамки. Значение по умолчанию. |
| url(url) | Относительный или абсолютный путь к изображению. |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
2.3. Элементы рамки-изображения border-image-slice
Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть.
| border-image-slice | |
|---|---|
| Значения: | |
| число | Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений. Одно значение устанавливает границы одинакового размера для каждой стороны элемента. Два значения: первое определяет размер верхней и нижней границы, второе — правой и левой. Три значения: первое определяет размер верхней границы, второе — правой и левой, а третье — нижней границы. Четыре значения: определяет размеры верхней, правой, нижней и левой границы. Числовое значение представляет количество px . |
| % | Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты. |
| fill | Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
Рис. 4. Пример задания срезов рамки-изображения
2.4. Повтор рамки-изображения border-image-repeat
Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений.
| border-image-repeat | |
|---|---|
| Значения: | |
| stretch | Растягивает изображение на все пространство. Значение по умолчанию. |
| repeat | Повторяет заполняющую часть изображения, при этом видны места стыков с угловой частью, и если длины образца не хватает, то он растягивается. |
| round | Наиболее точно заполняет промежуток между углами рамки, дублируя заполняющую часть изображения, при этом может образовать стыки по середине стороны рамки. |
| space | Действует аналогично с repeat . |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений
2.5. Смещение рамки-изображения border-image-outset
Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений.
| border-image-outset | |
|---|---|
| Значения: | |
| длина | Отступ рамки-изображения задается с помощью любого положительного числа, указанного в px или em . |
| число | Числовое значение, на которое умножается border-width . |
| initial | Устанавливает это свойство в значение по умолчанию. |
| inherit | Наследует значение этого свойства от родительского элемента. |
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений
3. Градиентная рамка
Значением border-image может выступать не только изображение, но и градиентная заливка.
Полупрозрачная рамка
В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .
