Округлые уголки, CSS

В этой статье мы рассмотрим пример создания панелей веб-сайта с округлыми углами на заранее известном сплошном цвете фона, при этом панели будут как угодно изменять свои размеры.

I. Начнем работу с Adobe Photoshop:

1. Создадим новое изображение (Ctrl+N) небольшого размера, например: 300х200 пикселей, на белом фоне;
2. Воспользуемся инструментом Rounded Rectangle Tool (U). Поставим радиус округления углов Radius равным 10 пикселей, и управление размерностью добавляемого объекта Round Rectangle Options - Unconstrained
   
   Выберем какой-нибудь цвет для панели, например:  #74c44c 
   Используем данный инструмент на нашем холсте, затем нажмем правой кнопкой мыши в панели Слои (Layers) по названию появившегося слоя Shape 1 и выберем пункт Resterize Layer. В итоге должно получиться что-то похожее на изображение ниже:
   
3. Увеличим масштаб изображения до максимального (Ctrl++) и используя инструмент Crop Tool (C) выделим левый верхний угол нашей фигуры (Rounded Rectangle) как показано на рисунке
   
   Т.е. захватим только область где идет скругление углов, все что залито сплошным не попадет в зону выреза. Далее нажмем правой кнопкой мыши внутри выделенного прямоугольника и выберем пункт Crop, получим:
   
4. Сохраним полученное изображение в файл, для этого нажмем Ctrl+Shift+Alt+S или выберем пункт Save for Web (Сохранить для Веб) в меню File (Файл). В появившемся окне проделаем следующие настройки:
   1. GIF - формат в который будем сохранять изображение;
   2. Adaptive - режим коррекции цветом, в нашем случае является наилучшим;
   3. Параметры уменьшающие качество и четкость изображения (Dieter, Lossy, Web Snap) выключаем и ставим на минимум;
   4. Убираем галочку напротив Transparency (Прозрачность);
   5. Выберем количество цветов Colors так чтобы не было потери качества;
   6. Параметр Matte устанавливаем в значение none
   7. Далее нажимаем кнопку Save (Сохранить) и сохраняем изображение, например под именем: panel_top_left.gif
      
5. Проделаем пункты 3-4 с тремя оставшимися углами, в итоге получим набор изображений:
   1. panel_top_left.gif - левый верхний угол;
   2. panel_top_right.gif - правый верхний угол;
   3. panel_bottom_left.gif - левый нижний угол;
   4. panel_bottom_right.gif - правый нижний угол.

На этом работа с Adobe Photoshop закончена.

Для проверки приёма можно открыть самостоятельный пример панели и сохранить четыре готовых угловых фрагмента. Радиус — 10 пикселей, цвет внутри — #74c44c, фон снаружи — белый. В новом коде та же задача решается одним элементом с border-radius:10px.

Открыть рабочий пример →

II. Далее действия могут производится в любом текстовом редакторе, например Notepad (Блокнот). Рекомендуем воспользоваться специализированным решением, например Adobe Dreamweaver, ActiveState Komodo Edit, PSPad и др.

1. Создадим html - документ (далее планируется что, читатель данной статьи обладает начальными знаниями HTML и CSS);
2. Добавим 4 вложенных друг в друга тега <div>

   <div><div><div><div>Hello World !</div></div></div></div>

3. Опишем для первого тега <div> класс и назовем его panel:

   .panel { background: #74c44c url(/assets/media-examples/panel_top_left.gif) top left no-repeat; }

   Цвет фона следует задать только у первого (родителького) тега <div>;

4. Далее относительно родительского тега <div> опишем стили для всех вложенных тегов <div>:

   .panel div {
   	background: url(/assets/media-examples/panel_top_right.gif) top right no-repeat;
   }
   .panel div div {
   	background: url(/assets/media-examples/panel_bottom_left.gif) bottom left no-repeat;
   }
   .panel div div div {
   	background: url(/assets/media-examples/panel_bottom_right.gif) bottom right no-repeat;
   }

   Т.е. для каждого тега <div> задаем в виде неповторяющегося фона ранее созданные изображения. Для первого тега <div> фоном будет изображение panel_top_left.gif, которое с помощью комбинации параметров top left свойства background разместим в верхнем левом углу. Изображение panel_top_right.gif, являющееся фоном первого вложенного тега <div> в тег <div> с классом panel с помощью комбинации параметров top right свойства background разместим в верхнем правом углу и т.д.

5. Опишем отступ текста от краев панели и применим некоторое оформление к тексту, который будет содержаться внутри панели:

   .panel div div div {
   	background: url(panel_bottom_right.gif) bottom right no-repeat;
   	padding: 15px;
   	color: #fff;
   	text-align: center;
   }

6. Соберем теперь все это в один документ:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Округлые уголки (CSS: Урок № 1)</title>
   <style type="text/css">
   .panel {
   	background: #74c44c url(panel_top_left.gif) top left no-repeat;
   	width: 200px;
   }
   .panel div {
   	background: url(panel_top_right.gif) top right no-repeat;
   }
   .panel div div {
   	background: url(panel_bottom_left.gif) bottom left no-repeat;
   }
   .panel div div div {
   	background: url(panel_bottom_right.gif) bottom right no-repeat;
   	padding: 15px;
   	color: #fff;
   	text-align: center;
   }
   </style>
   </head>
   <body>
   	<div class="panel">
   		<div>
   			<div>
   				<div>Hello World !</div>
   			</div>
   		</div>
   	</div>
   </body>
   </html>

   и получим результат:

   Hello World ! Наша панель может изменять свои размеры, как в высоту, так и в ширину, при этом качество округления уголков не теряется Создавайте сайты так,
   чтобы они радовали глаз!

Заключение: данный способ позволяет создать эффект округления уголков контейнеров, находящихся на заранее известном сплошном цвете фона (в нашем случае белый), как создать такой эффект в случае градиентного или текстурированного фона, рассмотрим в следующей статье.
Так же стоит отметить, что при наличии большого количества разноцветных панелей, сделанных таким способом, получается большое количество запросов на сервер, например, у нас есть 5 цветов панелей, по 4 файла на каждую, уже получается 20 изображений, в этом случае такой способ не рекомендуется использовать. О том как уменьшить количество запросов изображений на сервер, а так же почему лучше использовать фоновые изображения рассмотрим отдельно в ближайших статьях.

Для современных браузеров обычную панель достаточно оформить через border-radius: 10px;; дополнительные изображения углов не нужны. Историческая техника с четырьмя GIF была обходным решением до широкой поддержки border-radius.

Статья перенесена из нашего корпоративного блога ввиду полной переделки сайта. Подробнее можно узнать тут.