Заработок с сайта Скрипты
создание сайтов раскрутка сайтов поддержка сайтов
статьи справочик

Статьи -> Интересные скрипты -> Закругление углов без использования изображений.

Закругление углов без использования изображений.

Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейнера, в худших случаях используются теги img, в лучших свойство background, для некоторых браузеров есть специфические решения, например -moz-border-radius для FireFox, но их полезность сомнительна. Простой и удобный способ скругления уголков без использования изображений или малораспространенных свойств был бы очень полезен.

У закругленных уголков выполненных с помощью изображений есть как несколько недостатков:

Так и преимущества:

Но во многих случаях, можно избежать использования изображений. Метод, который я хочу предложить, не оригинален и возможно многим известен, но наверняка, не всем, придуман он не мной, а подсмотрен на GMail, немного развит и адаптирован, для его работы требуется только HTML и CSS.

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

Разметка будет достаточно простой:

<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>

Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.

.r1, .r2, .r3 {
    display: block;
    height: 1px;
}

.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 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 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.

На этом теоретическую часть можно закончить и перейти к примерам:

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

Преимущества метода:

Недостатки:

Можно пойти дальше и создать на PHP (Ruby, Perl или любом другом языке, которому вы отдаете предпочтение) функцию которая будет генерировать код для уголков, на основе заданного радиуса закругления, что должно упростить шаблоны и поддержку.

Если Вы заметили какие-либо неточности или ошибки в размещенной информации, просим сообщить о них администрации.