Разделы

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

Метки:

Для создания рамки вокруг блока используется стилевой атрибут border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.

Вначале рисуем рамку в графическом редакторе (рис. 1). В нашем случае она имеет толщину два пиксела и серый цвет (#808080).

Рис. 1. Рамка на прозрачном фоне

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

Поскольку на рисунке нас интересуют только уголки, то для сайта изображение следует изменить — вырезать уголки и разместить их рядом по горизонтали или вертикали (рис. 2).

Рис. 2. Изображения для публикации

Увеличенный рисунок с уголками на прозрачном фоне представлен на рис. 3. Сверху вниз располагаются уголки: левый верхний, правый верхний, левый нижний и правый нижний.

Рис. 3. Увеличенное изображение уголков

После того, как рисунок подготовлен, пора переходить к коду. Для создания уголков нам потребуется четыре элемента, в их качестве можно использовать теги , , , и другие, для удобства вкладывая их один в другой. Для верхних уголков заведем класс с именем bt, а для нижних — класс bb (пример 1).

Пример 1. Код для создания блока

<div class="color_block">
  <em class="bt"><b>&nbsp;</b></em>
  <div class="block_content">
    Содержимое
  </div>
  <em class="bb"><b>&nbsp;</b></em>
</div>

В стилях к блоку добавляем рамку через атрибут border, а вывод уголков делаем через универсальный атрибут background. Рамка отображается вокруг блока, поэтому фоновый рисунок окажется внутри границы. Так что придется сдвигать фон на толщину линии через атрибуты top и left, предварительно установив относительное позиционирование (пример 2).

Пример 2. Добавление закруглений через один рисунок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Закругленные  уголки</title>
  <style type="text/css">
   .color_block {
    border: 2px #808080 solid; /* Параметры рамки */
    background: #e3ffec; /* Цвет фона */
   }
   em.bt, em.bt b, em.bb, em.bb b {
    display: block; /* Блочный элемент */
    height: 10px; /* Высота уголка */
    font-size: 0; /* Размер шрифта */
    background: url(corner.gif) no-repeat; /* Путь к файлу с уголками */
    position: relative; /* Относительное позиционирование */
   }
   em.bt { 
    top: -2px; /* Сдвигаем левый верхний уголок вверх */
    left: -2px; /* Сдвигаем влево */
   }
   em.bt b {
    background-position:  100% -10px; /* Рисунок сдвигается к следующему уголку */
    left: 4px; /* Сдвигаем вправо */
   }
   em.bb { background-position: 0 -20px; top:  2px; left: -2px; }
   em.bb b { background-position: 100% -30px;  left: 4px; }
   .color_block .block_content {
    padding: 0 7px;  /* Поля вокруг текста */
   }
  </style>
  </head>
  <body> 

   <div class="color_block">
    <em class="bt"><b>&nbsp;</b></em>
    <div class="block_content">
     Чтобы изготовить  пугало для горного поля, делают фигуру человека, 
     который держит в  руках лук и стрелы. Птицы и звери видят его 
     и убегают. И  хотя у пугала нет никаких намерений, олень не 
     подойдет к нему  близко. Так пугало выполняет свое назначение, 
     и поэтому  говорят, что оно стоит в горном поле не напрасно. 
    </div>
    <em class="bb"><b>&nbsp;</b></em>
   </div>

 </body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4

Рис. 4. Закругленные уголки у блока

Обратите внимание на следующие моменты. Сам рисунок с уголками в виде фона выводится только один раз и далее для определенных элементов меняет свою позицию через атрибут background-position. Так как высота блока ограничена значением height, то увидеть весь рисунок целиком нельзя, поэтому мы видим нужный нам фрагмент. Для вложенных тегов сдвигать рисунок приходится с учетом смещения его родителя, поэтому в качестве значения left выступает удвоенная толщина границы.

В заключение приведем плюсы и минусы указанного метода добавления уголков.

Плюсы

Компактный и универсальный HTML-код;
Работа во всех браузерах;
Возможность задать желаемый цвет фона.

Минусы

Для изменения цвета рамки придется менять рисунок;
Радиус закругления также меняется только через правку рисунка.

Учитывайте приведенные преимущества и недостатки метода при добавлении блока с закругленными уголками на сайт.

blagoy, 30.10.2008

Спасибо за урок! Подскажите, как эту самую рамку на прозрачном фоне в Фотошопе нарисовать. Буду очень признателен.

ALHIMIK, 23.04.2009

Отличная работа. Очень полезные статьи. Желаю успехов...

blagoy,

Вот стятья на этом же сайте: http://webimg.ru/basic/prozrachnost-v-risunkakh
Там хорошо объясняют. Это можно сделать в фотошопе используя формат GIF. При сохранении рисунка есть параметр "Transparency", там можнов выбрать цвет фона для прозрачных мест либо оставить прозрачнцми.

Антон, 02.05.2009

Ещё третий недостаток:

Такой рисунок весит больше, чем если использовать спрайт/отдельные уголки.

Admin, 04.05.2009

Антон, во-первых, 400-500 байт в наше время это несерьезный размер, а во-вторых, рисунки кэшируются, поэтому грузятся только при первом показе. Если подобные уголки применяются достаточно часто на сайте, то размер файла особой роли не играет.

Марк, 09.08.2009

Спасибо! Всё очень просто.

Одесский бомж, 11.09.2010

Большое спасибо. Статья очень помогла при создании меню с закругленными уголками!

region029, 24.10.2010

Отлично, то что искал, только вот про фотошоп бы подробнее, а то вообще в нём не разбираюсь :(

Разделы

Термины

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

Плюсы

Минусы

Отправить комментарий