CSS-технологии

УРОК «Как сделать рамку вокруг изображения»

Дорогие друзья!

Изображения является мощным выразительным средством для привлечения внимания посетилелей и наглядного концентрированного представления информации. Поэтому оформлению изображений и продуманному их использованию должно отводиться не меньше времени, чем всему остальному контенту.

Одним из способов сделать изображения ярче, контрастнее и привлекательнее является использование различного вида рамок и эффекта паспарту, то есть когда между рамкой и картинкой имеется пустое пространство. Это позволяет акцентировать внимание на изображении и придать картинкам и фото законченный вид.

Давайте сначала разберём, как вообще сделать рамку вокруг картинки с помощью CSS.

Для создания рамок вокруг какого-либо элемента используется стилевое свойство border с нужными значениями - можно задать толщину, стиль и цвет рамки. Это свойство добавляется к тегу img, если стиль описывается для всех изображений на сайте, или применяется для определённых классов или id, если стиль будет использован только для некоторых или уникальных изображений.

Темы границ мы уже касались в уроке "CSS и оформление границ", сейчас мы рассмотрим как это сделать применительно к изображениям, причём с использованием CSS. Возьмём какую-нибудь картинку и сделаем для неё рамку:

Для этой картинки я описала рамку толщиной в 6 пикселей, тёмно-зелёного цвета (с помощью Photoshop я подобрала цвет) и применила стиль "двойная". Вот описание правила CSS для этого случая:

Теперь сделаем так, чтобы вокруг картинки оставалась свободная цветная область, то есть создадим эффект паспарту. Воспользуемся самым простым способом: добавим к селектору img стилевые свойства padding (пространство вокруг картинки) и background (цвет фона):

CSS-правило для этого примера:

А если вы хотите, чтобы и вокруг самой картинки при этом была рамка, то нужно сделать следующее. Нужно будет поместить изображение в контейнер <div> и добавить именно к нему все нужные атрибуты. Однако, элемент div - это блочный элемент, занимающий всю доступную ширину, поэтому для него нужно будет принудительно задать размеры. А вот здесь нужно быть внимательным, потому что размеры складываются из ширины изображения, полей слева и справа (задаются через padding) и удвоенной толщины границы. Высота будет определяться контентом, поэтому её задавать не будем.

Посчитаем: 369 (ширина картинки) + (40 + 40)(поля слева и справа) + (2 + 2)(толщина границы слева и справа) = 453 пикселя.

Правила CSS для этого случая:

В самом конце всё-таки добавлю про самый простой способ добавления рамки - это в теге <img> прописать атрибут border со значением нужной толщины рамки, например:

Я не рекомендую применять этот способ, надеюсь, что после изучения уроков на нашем сайте, вы уже знаете почему :).

Пробуйте и экспериментируйте. До встречи в следующем уроке!

Нравится