Моя статья на Временно.нет
Часто сталкиваешься с необходимостью создания блоков с круглыми краями. Задавшись вопросом как вообще можно решить поставленную задачу, сделал подборку интересных статей и уроков на данную тему.
Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации.
Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.
Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.
Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.
Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).
Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.
Реализовано на основе списков определений. Достаточно красивое оформление, возможность создания заголовка. Отсутствует поддержка изменения ширины. Но есть удобная возможность быстрого изменения цвета заголовков и самого блока.
Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.
Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.
Не является полным уроком, но показывает принцип использования единичного бордера и картинки.
Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.
Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.
Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.
Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.
Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс — очень простая реализация.
Вполне хороший урок. Возможность отбрасывания теней. Плюс — возможность создания заголовков.
Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.
Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.
Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.
Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.
Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.
Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.
Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.
Использует один пустой для верха и два для низа. Вполне приятная реализация.
Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев :)
Большая подробная статья с большим количеством картинок. Но на каждый угол по диву, плюс див для контента.
Способ безкартиночного создания закругленных углов. Но много пустых элементов
(способ, аналогичный блокам GMail).
В статье есть несколько вариаций на тему количества используемых изображений. Минус в использовании пустых тэгов.
Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.
В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.
Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.
Отдельный сайт посвященный круглым углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.
Очень популярный скрипт, позволяющий создать круглые углы без изображений. Очень много вариантов реализации.
Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.
Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.
Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.
Очень простой генератор. Но генерирует очень большое количество элементов
.
Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.
Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.