Как сделать рамку вокруг картинки в css
Рамки в CSS
Рамка в CSS создаётся при помощи свойства CSS border. Это свойство создаёт границу вокруг элемента. Подробнее про это свойство вы можете прочитать по ссылке, а в этой статье я в общих чертах опишу как оно работает. Данной информации будет достаточно для того, чтобы понять, как делать рамки при помощии CSS.
Синтаксис свойства border прост: border: 1px solid black; . Это свойство имеет три значения:
- 1px — толщина границы.
- solid — тип рамки, solid — это сплошная линия, double — двойная сплошная, dashed — пунктиром. Есть ещё несколько типов рамок, информацию про них найдёте тут: CSS border.
- black — устанавливает цвет границы. Цвета можно задавать по названию, допустимые значения находятся тут: таблица цветов CSS, или по шестнадцатеричному коду. Как это сделать напсано в статье: цвета в CSS.
Рамка текста CSS
Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:
Этому абзацу присвоен класс example-1.
В этом примере мы также использовали свойство CSS padding , или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).
Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).
Этому абзацу присвоен класс example-2.
Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.
Как сделать рамку картинки в CSS
Рамки для картинок задаются аналогично при помощи свойства border . Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.
Вот как сработает этот код:
Как закруглить углы рамки в CSS
Округление углов рамки в CSS делается при помощи свойства border-radius . Это свойство появилось в CSS3, и работает во всех современных браузерах.
Свойство border-radius может иметь от одного до четырёх значений. Если значение одно, то оно устанавливает степень закругления для всех углов. Давайте приведём пример, как будет работать это свойство с одним значением.
Вот как он работает:
Свойство border-radius: 15px.
Если у блока нет рамки, то есть граница border-width: 0; , то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:
Вот как работает этот пример:
Свойство border-radius: 15px.
Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.
Использование изображений рамок CSS
Не так давно добавление рамок требовало обрезки изображений и длительной настройки 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 » , подготовленной дружной командой проекта Интернет-технологии.ру
Создание рамок средствами CSS
Теперь давайте перейдём от преобразований текста, к созданию различных красивостей вокруг него, и первой такой красивостью будет рамка.
Для начала рассмотрим, самые простые рамки. Для их создания, в CSS используется свойство border , которому можно задать следующие значения:
solid – сплошная рамка;
dashed – пунктирная рамка;
dotted – точечная рамка;
double – рамка двойной линией;
groove – рамка с тенью;
ridge — с рельефом;
Ещё два свойства необходимые для создания простых рамок — это
widht – толщина рамки;
color – цвет рамки;
Согласно техники сокращения, записываются значения, одной строкой, через пробел.
Далее задаются отступы для рамок. Задаются они следующими свойствами:
padding – внутренний (отступ рамки от содержания);
margin — внешний (отступ рамки от внешних объектов);
Ещё для отступов задаются направления (с какой стороны на сколько отступить). Эти свойства применяются, когда возникает необходимость разместить содержимое не по центру рамки, или саму рамку с каким либо смещением.
top – отступ сверху;
righnt – отступ cправа;
bottom – отступ снизу;
left – отступ слева
Записываются значения этих свойств в сокращённом варианте друг за другом ( padding: 10px 30px 15px 20px ), и первым ставится значение top , а дальше по часовой стрелке остальные.
Если поставить только одно значение, то это будет значить, что отступ со всех сторон будет одинаковый.
Если нужно разместить текст, или изображение по центру рамки, то в селектор «p» можно добавить свойство text-align: center ;
Далее рассмотрим, как задаются высота и ширина рамки. Высота рамки задаётся браузером автоматически, и выбирается таким образом, чтобы в нем уместилось содержание, с учётом заданных отступов. А вот ширину мы с вами будем задавать самостоятельно.
Задаётся она свойством width, и в значении его указывается желаемый размер в пикселях, или других мерах длины, принятых в веб.
Кстати, запомните, что при задании ширины, браузер это значение понимает, как ширину только содержимого. Затем к этому значению он добавляет заданные отступы и толщину рамки, и окончательный размер отображает на странице.
И последнее, что необходимо сделать — это расположить рамку на странице. Делается это при помощи, уже имеющегося, свойства margin.
А если нужно просто расположить блок рамки по центру страницы, то в свойство margin добавляется значение auto.
Для первого примера создадим html документ, и создадим рамки solid для блока body (тело документа), и одному абзацу.
В следующих примерах будет изменяться только CSS (то, что заключено в тег style ).
Следующая рамка dashed (пунктир).
Дальше немного интереснее. Создадим рамку с закруглёнными уголками.
Для этого уберём border , и добавим border-radius и box-shadow .
Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.
Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.
Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius
Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.
Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.
И последнее, что мы сегодня сделаем — рамка с изменяющимся цветом. Изменяться он будет при наведении курсора.
Реализуется эта опция при помощи псевдокласса :hover .
В спокойном состоянии:
При наведении курсора:
Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.
Желаю творческих успехов.
Перемена
На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться.
Источники:
https://komotoz.ru/uroki/css/ramki_v_css.php
https://www.internet-technologies.ru/articles/ispolzovanie-izobrazheniy-ramok-css.html
https://starper55plys.ru/css/ramki-css/
