Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне.
Есть множество вариантов их реализации часто, заключающихся в размещении изображений
по углам контейнера, в худших случаях используются теги img, в лучших свойство background,
для некоторых браузеров есть специфические решения, например -moz-border-radius для FireFox,
но их полезность сомнительна. Простой и удобный способ скругления уголков без
использования изображений или малораспространенных свойств был бы очень полезен. У закругленных уголков выполненных с помощью изображений есть как несколько недостатков:
несемантические элементы при верстке,
дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета
и размера (в лучшем случае уголки группируются по 4 в одном изображении),
не лучший вид страницы, если у пользователя отключена загрузка изображений
(особенно если используются img, а не свойство background).
Так и преимущества:
можно закруглять, что угодно и как угодно.
Но во многих случаях, можно избежать использования изображений. Метод,
который я хочу предложить, не оригинален и возможно многим известен, но наверняка,
не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован,
для его работы требуется только HTML и CSS.
Картинка пояснение http://soft-ucoz.ucoz.ru/_fr/5/9776783.png
Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки.
В оригинале используется устаревший тег b, вероятно выбор пал на него по причине
краткости написания, имеющей для нас большое значение, так как его придется часто повторять.
Разметка будет достаточно простой:
Code
<div id=”rounded-box-3″>
<b class=”r3″></b><b class=”r1″></b><b class=”r1″></b>
<div class=”inner-box”>
<h3>Элемент с закругленными углами R=3px</h3>
<P>Добро пожаловать на <A href="http://soft-ucoz.ucoz.ru">SOFT & uCoz</A> сайт для WEB-мастеров</P>
</div>
<b class=”r1″></b><b class=”r1″></b><b class=”r3″></b>
</div>
Дальше все просто, делаем b блочным элементом высотой 1px и задаем
ему соответствующие поля.
Code
.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
Затем указываем цвет фона и отступы
Code
#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}
.inner-box {
padding:1em;
}
Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение.
Пустые блоки, для которых задана высота 1px, растягиваются до 2px,
что не способствует закруглению уголков, решить проблему можно
указав overflow:hidden
Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7,
по совету читателя tapazukk, добавим правило font-size:1px
Code
.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}
Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет
необходимости использовать хаки или условные комментарии.
Посмотреть этот пример в действии на веб-странице тут http://soft-ucoz.ucoz.ru/HTML/3/3.htm
