Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейнера, в худших случаях используются теги img, в лучших свойство background, для некоторых браузеров есть специфические решения, например -moz-border-radius для FireFox, но их полезность сомнительна. Простой и удобный способ скругления уголков без использования изображений или малораспространенных свойств был бы очень полезен.
<b>У закругленных уголков выполненных с помощью изображений есть как несколько недостатков:</b><ul><li> несемантические элементы при верстке,</li><li> дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки группируются по 4 в одном изображении), </li><li> не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background).</li></ul><b>Так и преимущества:</b><ul><li> можно закруглять, что угодно и как угодно.</li></ul>Но во многих случаях, можно избежать использования изображений. Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.
Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки. В оригинале используется устаревший тег b, вероятно выбор пал на него по причине краткости написания, имеющей для нас большое значение, так как его придется часто повторять.
Разметка будет достаточно простой:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><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>Этот способ закругления углов подсмотрен на GMail.</p>
</div>
<b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div><!--c2--></div><!--ec2-->
Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }<!--c2--></div><!--ec2-->
Затем указываем цвет фона и отступы:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}
.inner-box {
padding:1em;
}<!--c2--></div><!--ec2-->
Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden
Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7 добавим правило font-size:1px:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}<!--c2--></div><!--ec2-->
Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.
На этом теоретическую часть можно закончить и перейти к примерам:
Внимательный разбор кода примеров поможет понять особенности работы этого метода.
<b>Преимущества метода:</b><ul><li> кроссбраузерность (тестировался в IE6, IE7, Opera 9, FireFox 2)</li><li> никаких дополнительных запросов</li><li> просто реализуется и проще поддержка, чем при работе с изображениями (например, можно поменять цвет блока, изменив только одно значение в CSS, правда это работает и с уголками в виде полупрозрачных изображений).</li></ul><b>Недостатки:</b><ul><li>невозможность создания сложных эффектов, </li><li>несемантические элементы при верстке.</li></ul>Можно пойти дальше и создать на PHP (Ruby, Perl или любом другом языке, которому вы отдаете предпочтение) функцию которая будет генерировать код для уголков, на основе заданного радиуса закругления, что должно упростить шаблоны и поддержку.
<b>У закругленных уголков выполненных с помощью изображений есть как несколько недостатков:</b><ul><li> несемантические элементы при верстке,</li><li> дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки группируются по 4 в одном изображении), </li><li> не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background).</li></ul><b>Так и преимущества:</b><ul><li> можно закруглять, что угодно и как угодно.</li></ul>Но во многих случаях, можно избежать использования изображений. Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.
You must be registered for see images attach
Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки. В оригинале используется устаревший тег b, вероятно выбор пал на него по причине краткости написания, имеющей для нас большое значение, так как его придется часто повторять.
Разметка будет достаточно простой:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><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>Этот способ закругления углов подсмотрен на GMail.</p>
</div>
<b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div><!--c2--></div><!--ec2-->
Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }<!--c2--></div><!--ec2-->
Затем указываем цвет фона и отступы:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}
.inner-box {
padding:1em;
}<!--c2--></div><!--ec2-->
Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden
Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7 добавим правило font-size:1px:
<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}<!--c2--></div><!--ec2-->
Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.
На этом теоретическую часть можно закончить и перейти к примерам:
You must be registered for see images attach
You must be registered for see images attach
Внимательный разбор кода примеров поможет понять особенности работы этого метода.
<b>Преимущества метода:</b><ul><li> кроссбраузерность (тестировался в IE6, IE7, Opera 9, FireFox 2)</li><li> никаких дополнительных запросов</li><li> просто реализуется и проще поддержка, чем при работе с изображениями (например, можно поменять цвет блока, изменив только одно значение в CSS, правда это работает и с уголками в виде полупрозрачных изображений).</li></ul><b>Недостатки:</b><ul><li>невозможность создания сложных эффектов, </li><li>несемантические элементы при верстке.</li></ul>Можно пойти дальше и создать на PHP (Ruby, Perl или любом другом языке, которому вы отдаете предпочтение) функцию которая будет генерировать код для уголков, на основе заданного радиуса закругления, что должно упростить шаблоны и поддержку.
