Благодаря CSS можно прикрутить красивые раки ко всем изображениям на сайте. Как правило для создания рамок используется свойство border, но в некоторых случаях и box-shadow.

Линейные рамки

Свойство border создает линию, которая обволакивает все изображение или конкретную её часть.

1

Существуют 8 типов border-линий: Solid, Double, Dotted, Dashed, Groove, Ridge, Inset, Outset

Border линии

2

Свойство border делится на три составные части – размер линии, тип линии и цвет линии:

border: 30px ridge yellow; /* рамочка - обволакивает все изображение */

  • 30px – размер линии
  • ridge – тип линии
  • yellow – цвет линии

Border рамка

3

Свойство border можно присуждать конкретной стороне – левой (left), правой (right), верхней (top) и нижней (bottom) стороне.

border-left: 30px ridge green;
border-right: 40px solid orange;
border-top: 50px groove purple;
border-bottom: 22px dotted navy;

 

Теневые рамки

CSS-свойство box-shadow добавляет тени к изображениям.

1

box-shadow содержит пять изменяемых параметров для тени: смещение по ширине, смещение по высоте, радиус размытия, растяжение, цвет.

Box-shadow

2

Не нужно недооценивать тени, например, только с помощью них можно иллюзорно возвысить картинку над страницей.

box-shadow: 0 14px 28px gray, 0 10px 10px gray;

Тень подьем

3

Красивые рамочки создаются при помощи нескольких теней.

box-shadow: 0 0 0 6px orange, 0 0 4px 15px black;

Тень с двумя цветами

4

В некоторых случаях используется множество цветов для создания градиентной тени.

box-shadow: 0 5px 10px hsla(0,100%,50%,.5),
-5px 5px 10px hsla(60,100%,50%,.7),
5px -5px 10px hsla(120,100%,50%,.5),
5px 0 10px hsla(240,100%,50%,.5);

Цветная тень много цветов

 

Картинки рамки

Любое изображение превращается в рамочку с помощью CSS-свойства border-image Рамочку делают одинаковой по ширине и длине ( например 400 на 400 пикселей).

1

Рамочка поделена на 4 края и на 4 промежуточные части:

  • A – это четкая область, которую желательно делать одинаковой по ширине и длине.
  • B – это промежуточная область, она может состоять из узоров и иных связующих путей.

border image наглядно как работает

2

Размер рамочки задается через border.

border: solid 20px; 

Определите какое количество пикселов занимают уголки рамки и внесите это количество в border-image.

border-image: url(адрес картинки) 95;

Размер углов пикселы

3

Предоставляем вам готовый пример рамки: каждый ромбик содержит ровно сто пикселей по ширине и длине.

border-image: url(адрес картинки) 100;

Рамка

4

Вот так выглядит рамочка с размерами 300 на 300 px в редакторе. У рамочки не должно быть фона, его можно убрать при помощи волшебной кисточки или ластика.

Ромбики создавались в редакторе Paint.net! Вы тоже можете создать рамочку в этом редакторе – https://www.getpaint.net/download.html

рамка в паинте

5

Для рамочки существует три типа отображения: растянутый вид(stretch), повторение (repeat), повторение с грамотным масштабированием (round).

100 пиксельные уголки не повторяются, зато промежуточная часть между уголками повторяется. Лишь в stretch промежуточные ромбики не дублируются, а растягиваются.

border: solid 50px;

border-image: url(ramb.png) 105 round;

border-image: url(ramb.png) 105 stretch;

border-image: url(ramb.png) 105 repeat;

Красивые рамки

6

В border-image допускается применение двойных рамок – например stretch по горизонтали и round по вертикали.

border-image: url(ramb.png) 105 stretch round; /* адрес картинки, пиксельный размер красного ромба, растяжение, повторение */

Рамки разные для картинок

7

Рамки могут работать после наведения курсора мышки на изображения. Добавляем hover к img, чтобы это произошло.

img:hover {
box-shadow: 0 0 10px 20px orange;
}

hover

 

Вот мы и разобрали три самых популярных способа для создания рамок: сначала мы использовали цветные линии, потом прибегнули к теням, а после задействовали картинки.

 

Добавление рамок в WordPress

WordPress имеет в своем арсенале специальную область для работы с CSS свойствами.

1

Заходим в админку, выбираем “внешний вид” и отправляемся в “настроить”.

Внешний вид настроить

2

Внешний вид картинок определяется через “img” – введите img и положите код рамки между скобочками.

img {

border: 10px solid blue;

}

Волшебная палочка

3

Конкретную картинку можно наделить рамкой, например, вы хотите, чтобы только одно изображение было с тенями.

Для начала нужно изображению присвоить класс:

<img class="zavlekyxa" src="адрес картинки">

Потом придуманное название класса вставить в CSS:

.zavlekyxa { box-shadow: 0 0 40px yellow; }

Картинка с рамочкой

Вот и подошла к концу очередная статья! Оставляйте комментарии под этим материалом, чтобы мне не было скучно, да и вы могли получить ответ на то, что вас волнует.