IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

 IZONE 


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

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

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

 

Теперь создадим таблицу, которая должна содержать 3 строки и 3 столбца, примерно так:

       
     
   
   
 
       

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

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

Источник: http://exper.ural.ru/

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.