Рубрика Веб-строительство

Создание простого блока со скругленными углами

В настоящее время существует много способов создания блоков со скругленными углами. Каждый способ обладает своими преимуществами и недостатками. Ниже представлен простой, но в то же время эффективный способ создания блока со скругленными углами.

Итак, начнем!

Для начала необходимо нарисовать будущий макет блока в графическом редакторе. Для этого открываем Фотошоп и создаем новый документ размерами 350х150 пикселей с белым фоном.

Создаем новый слой, выбираем инструмент «Прямоугольник со скругленными углами», устанавливаем радиус округления 15 пикселей и создаем фигуру (рисунок ниже).

Далее растрируем фигуру и заливаем #e7dafd цветом. Теперь к нашей фигуре применяем стиль слоя «Тень» со следующими параметрами.

Далее нам необходимо объединить все слои и с помощью инструмента «Прямоугольная область» выделить начало, середину и конец с последующим копированием и вставкой в новый документ для сохранения.  Следует отметить,  что средняя часть заготовки должна равняться одному пикселю.

В итоге должны получиться такие заготовки.

HTML

<div id="wrapper">
<h2>Блок с закругленными углами</h2>
<div class="content"><p>Содержание блока</p></div>
</div>

CSS

<style type="text/css">
 #wrapper {
 width:350px;
 margin: 20px auto;
 background:url(content.gif) repeat-y;

 }
 #wrapper h2 {
 padding-top:20px;
 margin:0;
 background: url(top_bg.gif) no-repeat left top;
 }
 #wrapper .content {
 background:url(bottom_bg.gif) no-repeat left bottom;
 }
 #wrapper h2, p {
 padding-left:20px;
 padding-right:20px;
 margin:0;
 }
 #wrapper p {
 padding:20px;
 padding-top:5px;
 margin:0;
 }
 </style>