38 статей о создании закругленных углов

Закругленные углыБольшая подборка различных решений для создания закругленных углов на Ваших сайтах. В этой статье представлены варианты с использованием пустых тегов, без пустых тегов и с использованием Javascript. Кроме того, есть небольшая подборка генераторов блоков с закругленными углами.

Без использования пустых тегов

Простой, семантически правильный CSS блок с чистым кодом
Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.

Закругленные углы

Закругленные углы в CSS
Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.

Закругленные углы

CSS тизер-блок
Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.

Закругленные углы

Ссылки на последние новости
Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).

Закругленные углы

CSS и закругленные углы: Границы с дугами
Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.

Закругленные углы

Озаглавленные сверху углы
Реализовано на основе списков определений. Достаточно красивое оформление, возможность создания заголовка. Отсутствует поддержка изменения ширины. Но есть удобная возможность быстрого изменения цвета заголовков и самого блока.

Закругленные углы

Создание скругленного блока или дизайн с CSS и XHTML
Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.

Закругленные углы

Резиновый блок с легко изменяемыми углами и поверхностью
Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.

Закругленные углы

Закругленные углы бордера
Не является полным уроком, но показывает принцип использования единичного бордера и картинки.

Закругленные углы

Закругленные углы в CSS
Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.

Закругленные углы

Создание произвольных углов и границ
Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.

Закругленные углы

«Пуленепробиваемые» закругленные углы
Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.

Закругленные углы

Рисование теней и рамок элементов оформления
Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.

Закругленные углы

Закругленные углы с фиксированной шириной
Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс — очень простая реализация.

Закругленные углы

CSS тянущийся блок с 4 произвольными углами
Вполне хороший урок. Возможность отбрасывания теней. Плюс — возможность создания заголовков.

Закругленные углы

Делаем закругленные углы с помощью псевдоэлементов :before и :after
Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.

Закругленные углы

Создание произвольных углов и границ. Часть II
Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.

Закругленные углы

Закругленные углы в DIVах
Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.

Закругленные углы

Закругленные углы и блоки с тенью
Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.

Закругленные углы

Занимательная верстка
Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.

Закругленные углы

Использующие пустые теги

Еще больше закругленных углов с CSS
Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.

Закругленные углы

CSS резиновые закругленные углы
Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.

23

CSS: Умные углы
Использует один пустой <span> для верха и два для низа. Вполне приятная реализация.

Закругленные углы

Как сделать тянущиеся по ширине divы с круглыми краями
Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев 🙂

Закругленные углы

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

Закругленные углы

Закругление углов без использования изображений
Способ безкартиночного создания закругленных углов. Но много пустых элементов <B> (способ, аналогичный блокам GMail).

Закругленные углы

Использующие JavaScript

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

Закругленные углы

Прозрачные произвольные углы и границы. Версия 2
Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.

Закругленные углы

Nifty углы со сглаживанием
В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.

Закругленные углы

Закругленные углы
Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.

Закругленные углы

www.curvycorners.net
Отдельный сайт посвященный закругленным углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.

Закругленные углы

Nifty Corners Cube
Очень популярный скрипт, позволяющий создать закругленные углы без изображений. Очень много вариантов реализации.

Закругленные углы

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

Закругленные углы

jQuery скругление
Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.

Закругленные углы

Генераторы круглых краев

RoundedCornr
Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.

Закругленные углы

Spiffy Corners
Очень простой генератор. Но генерирует очень большое количество элементов <B>.

Закругленные углы

Spanky Corners 1.1
Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.

Закругленные углы

Spiffy Box
Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.

Закругленные углыИсточник: Временно.нет

Теги: ,
Рубрика: Разное | 26 апреля 2009

Предыдущие записи из рубрики `Разное`

Один комментарий

спасибо большое автору!

ОтветитьОтветить

Комментировать