Закругленные углы, одна из популярнейших тенденций в современном
веб-дизайне. Есть множество вариантов их реализации часто,
заключающихся в размещении изображений по углам контейнера, в худших
случаях используются теги img, в лучших свойство background, для некоторых браузеров есть специфические решения, например -moz-border-radiusдля
FireFox, но их полезность сомнительна. Простой и удобный способ
скругления уголков без использования изображений или
малораспространенных свойств был бы очень полезен.
У закругленных уголков выполненных с помощью изображений есть как несколько недостатков:
несемантические элементы при верстке,
дополнительная
нагрузка на сервер в виде запросов множества уголков различного цвета и
размера (в лучшем случае уголки группируются по 4 в одном изображении),
не
лучший вид страницы, если у пользователя отключена загрузка изображений
(особенно если используются img, а не свойство background).
Так и преимущества:
можно закруглять, что угодно и как угодно.
Но во многих случаях, можно избежать использования изображений.
Метод, который я хочу предложить, не оригинален и возможно многим
известен, но наверняка, не всем, придуман он не мной, а подсмотрен на
GMail, немного развит и адаптирован, для его работы требуется только
HTML и CSS.
Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки. В оригинале используется устаревший тег b,
вероятно выбор пал на него по причине краткости написания, имеющей для
нас большое значение, так как его придется часто повторять.
Разметка будет достаточно простой:
Делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.
#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, добавим правило font-size:1px
.r1, .r2, .r3 { overflow: hidden; font-size:1px;}
Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.
Внимательный разбор кода примеров поможет понять особенности работы этого метода.
Преимущества метода:
кроссбраузерность (тестировался в IE6, IE7, Opera 9, FireFox 2)
никаких дополнительных запросов
просто
реализуется и проще поддержка, чем при работе с изображениями
(например, можно поменять цвет блока, изменив только одно значение в
CSS, правда это работает и с уголками в виде полупрозрачных
изображений).
Недостатки:
невозможность создания сложных эффектов,
несемантические элементы при верстке.
Можно пойти дальше и создать на PHP (Ruby, Perl или любом другом
языке, которому вы отдаете предпочтение) функцию которая будет
генерировать код для уголков, на основе заданного радиуса закругления,
что должно упростить шаблоны и поддержку.
