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

В живой природе, как известно, нет прямых углов. Не от того ли дизайнеры всех мастей в попытке достичь совершенства тоже стремятся их избегать? Не остались в стороне и веб-дизайнеры. За что, нужно отметить, зачастую подвергаются острой критике и осмеянию. Вот, например, мнение, обнаруженное мною на одном из сайтов, посвященных вебдизайну:

Дизайнеры - люди зараженные страшной болезнью - болезнью "скругления уголков".
Посмотрите на любой предмет, отличающийся современным дизайном - на предметы бытовой техники, на автомобили, на визитные карточки, на компьютеры и на всё такое прочее - все уголки там скруглены (я гарантирую, что в 99% случаев вы не найдёте там нормального геометрического угла, уголок обязательно будет скруглён). А теперь задайтесь простым вопросом: "зачем?". Скругление углов у автомобилей оправдывается требованиями аэродинамики (правда, не внутри салона), но зачем нам нужны аэродинамичные телевизоры, компьютеры, кофеварки, кухонные комбайны, плееры и видеокамеры? А зачем нужны аэродинамичные элементы интерфейса в новых releas`ах ОС (будь то Mac OS X или Windows XP), или аэродинамичные web-сайты? Какова функция скруглённых уголков? Каково их эстетическое значение? Кому нравится смотреть на скругленные уголки? Я знаю кому - дизайнерам, которые их производят с маниакальной настойчивостью, web-дизайнерам, которые фанатично верят, что скруглённый интерфейс - это круто. А почему им нравятся скруглять уголки? Возможно, скругление уголков заложено в дизайнеров генетически, как в пчёл заложено умение строить шестиугольные (и никакие другие) соты. Возможно скруглением уголков дизайнеры от кого-то заразились, скорее всего друг от друга, также, как и твёрдой уверенностью в том что они - дизайнеры. Как и все больные люди дизайнеры могут быть бесполезными для общества или даже опасными для него. Представьте секту фанатиков - скруглятелей уголков, которые ходят по городу с напильниками и спиливают все прямые или острые углы...

Вот такие забавные люди, эти критики. Но действительно, в вебдизайне скругленные уголки не несут в себе никакой полезной функции, кроме эстетической. А при этом требуют вполне изрядного дополнительного кода и графики, увеличивающих размер страницы и, как следствие, время её загрузки. Так оправдано ли это? Но не будем задаваться философскими вопросами, пусть их каждый решает для себя сам. А мы лишь будем помнить, что мудрецы обещали, что однажды именно красота спасет мир.

Поэтому, мы с вами и научимся на всякий случай эту закругленную красоту создавать.
Вообще, существует несколько способов создания скругленных уголков, в частности, простые варианты можно осуществить вообще без графики при помощи использования каскадных таблиц стилей (CSS, Cascading Style Sheets), использующих прием чередования цветных пикселей. А в версии CSS3 сделать это будет еще проще, поскольку в ней можно будет задавать скругление при помощи всего одного параметра border-radius, заданного любому блочному элементу. Но пока спецификацию CSS3 ни один из браузеров в полной мере не поддерживает.
Поэтому мы воспользуемся самым простым, но и самым функциональным способом, позволяющим воплотить любые дизайнерские изыски, а именно, используя графические элементы.

Для этого нарисуем в каком-нибудь графическом редакторе, например, PhotoShop нужный нам блок.
(Сам я в возможностях и тонкостях PhotoShop не силен, поэтому в этой части описания буду краток, обозначив лишь основные шаги. Напомню также, что на нашем форуме существует специальная тема Photoshop'им потихоньку..:), где любой желающий может задать свои вопросы или поделиться опытом.)
Итак, при помощи инструмента "Прямоугольник со скругленными углами" рисуем прямоугольник. Задаем ему нужный цвет, рамку, а также все мыслимые и немыслимые эффекты оформления в "Стилях слоя". Далее, при помощи инструмента "Раскройка" нарезаем нужные нам фрагменты по четырем углам, а также две узкие полоски шириной в 1 пиксель сверху и снизу (они будут у нас заполнять, соответственно, верх и низ блока) и две полоски высотой 1 пиксель слева и справа, итого восемь фрагментов.

Выполняем команду "Файл" -> "Сохранить для Web...". Если наш блок будет располагаться на белом фоне, формат сохраняемого рисунка можно указать GIF, если же фон страницы у нас не белый, лучше выбрать формат PNG24. Вес полученных рисунков в этом случае будет несколько больше, но зато по краям не будет никаких рваных краев.

Итак, после сохранения у нас получилось 8 частей, необходимых нам для нашего скругленного блока:

1-	2 -	3 -
4 -		5 -
6 -	7 -	8 -

 Теперь осталось рассовать их по нужным местам.

Создаем при помощи кнопки , расположенной на панели инструментов редактора, таблицу нужной нам ширины из трех строк и трех столбцов. Задаем в контекстном меню средней ячейки, в которой у нас будет располагаться текст, её ширину в 100%. Для надежности еще можно задать размеры крайних ячеек в соответствии с размерами наших фрагментов, но обычно, если в центральной ячейке будет располагаться текст достаточного объема, делать этого не нужно, браузер сам растянет центральную ячейку с текстом на всю доступную ширину и высоту, оставив крайним ячейкам ровно столько, сколько им нужно для уголков.

В крайних ячейках нашей таблицы (1,3,6,8) мы помещаем только рисунки уголков, а вот в ячейках 2,4,5,7, в которых изображение должно быть растянуто по ширине и высоте, мы задаем его в качестве фонового изображения в контекстном меню "Ячейка" -> "Свойства ячейки таблицы" вкладка "Расширенные" поле "Фоновое изображение". На этой же вкладке в поле "Стиль" нужно прописать свойства повторяемости для фоновых изображений. В верхней и нижней ячейках 2 и 7 фон должен повторяться у нас только по горизонтали, поэтому здесь пишем background-repeat:repeat-x , а в правой и левой ячейках 4 и 5 фон, напротив, должен повторяться только по вертикали, поэтому зедсь пишем background-repeat:repeat-y
При добавлении адреса рисунка в поле "Фоновое изображение", он автоматически прописывается также и поле "Стиль", поэтому в поле "Стиль" у вас получится строка вида:
background-image: url(адрес_вашего_рисунка); background-repeat: repeat-y;

В центральной ячейке мы задаем значение "Цвет фона" (Или можно и здесь установить фоновое изображение, если вы рисовали ваши уголки именно для него и уверены, что это не приведет к появлению видимых границ.
Конечный код нашей таблицы будет выглядеть следующим образом:

<table border="0" cellspacing="0" cellpadding="0" width="300">
<tbody>
 <tr>
  <td><img src="https://lady.webnice.ru/forum/users/2/img20080822120101.png" border="0" alt="1" /></td>
  <td style="background-repeat:repeat-x;background-image:url(https://lady.webnice.ru/forum/users/2/img20080822120111.png);">
   <img src="https://lady.webnice.ru/forum/users/2/img20080822120111.png" border="0" alt="2" /></td>
  <td><img src="https://lady.webnice.ru/forum/users/2/img20080822120118.png" border="0" alt="3" /></td>
 </tr>
 <tr>
  <td style="background-image:url(https://lady.webnice.ru/forum/users/2/img20080822120123.png);background-repeat:repeat-y;"></td>
  <td style="width: 100%; background-color: #a4e8ad;" align="center"><p>Здесь наш текст</p></td>
  <td style="background-image:url(https://lady.webnice.ru/forum/users/2/img20080822120128.png);background-repeat:repeat-y;"></td>
 </tr>
 <tr>
  <td><img src="https://lady.webnice.ru/forum/users/2/img20080822120132.png" border="0" alt="6" /></td>
  <td style="background-image:url(https://lady.webnice.ru/forum/users/2/img20080822120136.png);background-repeat:repeat-x;">
   <img src="https://lady.webnice.ru/forum/users/2/img20080822120136.png" border="0" alt="img20080822120136.png" /></td>
  <td><img src="https://lady.webnice.ru/forum/users/2/img20080822120140.png" border="0" alt="8" /></td>
 </tr>
</tbody>
</table>


Обратите внимание, что в ячейки 2 и 7, кроме указания фонового изображения, я вставляю еще и сам рисунок. Без этого, если высота нашего фонового рисунка меньше размера шрифта по умолчанию, в некоторых браузерах могут появляться белые границы.

А формировать этот код будет вот такой блок:

	Здесь наш текст

Вот и все, если нужны еще такие же блоки на странице, просто копируете эту таблицу далее и заменяете текст. Если нужны блоки другого цвета - рисуете в PhotoShop ещё блоки и заменяете в таблице рисунки и фон.

Если нарисованные вами уголки являются однотонными и не используют разные тени, отсветы и прочие спецэффекты, то вам понадобится не 8 фрагментов, а только 4 для уголков, но раскраивать их в PhotoShop в этом случае нужно по самому краю изображения, а не с отступом, как в нашем примере. В этом случае в ячейках 2, 4, 5, 7 указываете просто цвет фонового изображения такой же, как и для центральной ячейки с текстом.

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

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

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

<div style="width:300px; background: #FFCC33 url(https://lady.webnice.ru/forum/users/2/img20080911085558.gif) left top no-repeat;">
 <div style="background: url(https://lady.webnice.ru/forum/users/2/img20080911085642.gif) right top no-repeat;">
  <div style="background: url(https://lady.webnice.ru/forum/users/2/img20080911085729.gif) bottom left no-repeat;">
   <div style="background: url(https://lady.webnice.ru/forum/users/2/img20080911085806.gif) bottom right no-repeat;">
    <div style="padding:10px;">Здесь наш текст</div>
   </div>
  </div>
 </div>
</div>

Вот что получится:

В общем, выбирайте для себя любой понравившийся способ. Сравнение способов верстки слоями и таблицами мы с вами рассматривали в другой моей статье Как рассовать все по нужным местам.

А пример использования блока, созданного при помощи таблицы, можно посмотреть в моей статье Ботанический сад.

По той же статье возник вопрос о рамках вокруг фотографий. Ну это вообще просто. Создаем таблицу с одной ячейкой, указываем в свойствах таблицы в значении "Отступ в ячейках" нужную нам ширину (именно такой ширины у нас и получится рамка), а на вкладке "Расширенные" задаем нужное фоновое изображение рамки (или просто можно задать "Цвет фона", тогда рамка получится однотонная).

Затем в полученную таблицу просто вставляем нужную картинку или фотографию. Вставка картинки, напомню, осуществляется кнопкой , расположенной в верхней строке панели инструментов визуального редактора. И вот что у нас получится:

Добавлено 09.09.08

Прозвучал вопрос "а как быть тем, у кого нет Фотошопа?" Ну, вообще говоря, каждом дизайнеру, вебдизайнеру и блоггеру, пусть даже начинающему, какой-либо графический пакет иметь нужно. Замечательно, если вы прекрасно владеете словом, но встречают все-таки по одежке. Поэтому, если ваша статья, кроме хорошего содержания будет еще и хорошо оформлена, это пойдет ей только на пользу.

Нарезать уголки, собственно, можно и в стандартном Paint. Инструменты "Прямоугольник со скругленными уголками" и "Выделение" в нем есть. Можно даже изловчиться и создать некое подобие спецэффектов, накладывая один прямоугольник на другой. Вот, например, что у меня получилось на скорую руку: Правда, сказать, что заниматься подобной работой в Paint удобно, нельзя.

Существует еще расширенная версия Paint от Microsoft, но лично мне её, даже на лицензионную Windows XP SP2 установить не удалось. Он потребовал сначала обновить пакет NET, потом Windows Installer, потом ... потом мне это дело надоело :)

Также для тех, кто не ищет легких путей, существует множество абсолютно бесплатных, но при этом весьма функциональных графических редакторов. Например, уже довольно известный и популярный редактор растровой графики GIMP - мощный, но небольшого размера (всего порядка 15МБ), редактор векторной графики Inkscape, входящий в состав офисного пакета OpenOffice редактор Draw.