Главная
К библиотеке


Рамки со скругленными углами

Текст в рамке со скругленными углами.



Таблица 1.
верхний левый Верхний левый угол
верхний правый Верхний правый угол
нижний правый Нижний правый угол
нижний левый Нижний левый угол
верхняя Верхняя граница
нижняя Нижняя граница
левая Левая граница
правая Правая граница

Чтобы сделать такую или подобную рамочку необходимо заготовить 8 изображений: 4 для углов и по одному для каждой стороны. Как рисовать скругленные углы в фотошоп я уже писал (тут и тут), так что, это не должно вызвать у вас затруднений. В данном случае я нарисовал изображения, приведенные в Таблице 1. Теперь создадим таблицу, которая должна содержать 3 строки и 3 столбца, примерно так:

       
     
   
   
 
       

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

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

Hosted by uCoz