Автор статьи: Головин Андрей
Чтобы сделать такую или подобную рамочку необходимо заготовить 8 изображений: 4 для углов и по одному для каждой стороны.
>
![]() |
![]() |
![]() |
Текст в рамке со скругленными углами. | ||
![]() |
![]() |
![]() |
Как рисовать скругленные углы в фотошоп я уже писал, так что это не должно вызвать у вас затруднений. В данном случае я нарисовал изображения, приведенные в Таблице 1.
Таблица 1. | |
---|---|
![]() |
Верхний левый угол |
![]() |
Верхний правый угол |
![]() |
Нижний правый угол |
![]() |
Нижний левый угол |
![]() |
Верхняя граница |
![]() |
Нижняя граница |
![]() |
Левая граница |
![]() |
Правая граница |
Теперь создадим таблицу, которая должна содержать 3 строки и 3 столбца, примерно так:
|
В угловые ячейки ставим изображения углов, в центральной устанавливаем цвет фона, соответствующий цвету фона наших картинок (в дальнейшем, в этой ячейке будет содержимое рамки). В оставшихся ячейках устанавливаем соответствующее фоновое изображения (можно установить атрибуты фона background-repeat, о которых я писал. Подумайте какие значения здесь подойдут).
изображения сторон задаются в качестве фона для того, чтобы мы могли безболезненно вставлять любое содержание в центральную ячейку, не глядя на изменение ширины или высоты. А углы установлены в качестве изображения, чтобы не мучаться в дальнейшем с заданием ширины и высоты угловых ячеек.