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

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

Большая подборка различных решений для создания круглых углов.

В этой статье представлены варианты с использованием пустых тегов, без пустых тегов и с использованием Javascript.

Кроме того, есть небольшая подборка генераторов блоков с закругленными углами.

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

Простой, семантически правильный CSS блок с чистым кодом

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

Простой, семантически правильный CSS блок с чистым кодом

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

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

Круглые углы в CSS

CSS тизер-блок

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

CSS тизер-блок

Ссылки на последние новости

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

Ссылки на последние новости

CSS и закругленные углы: Границы с дугами

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

CSS и круглые углы: Границы с дугами

Озаглавленные сверху углы

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

Озаглавленные сверху углы

Создание скругленного блока или дизайн с CSS и XHTML

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

Создание скругленного блока или дизайн с CSS и XHTML

Резиновый блок с легко изменяемыми углами и поверхностью

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

Резиновый блок с легко изменяемыми углами и поверхностью

Закругленные углы бордера

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

Закругленные углы бордера

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

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

Круглые угла в CSS

Создание произвольных углов и границ

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

Создание произвольных углов и границ

«Пуленепробиваемые» закругленные углы

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

Пуленепробиваемые круглые углы

Рисование теней и рамок элементов оформления

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

Рисование теней и рамок элементов оформления

Закругленные углы с фиксированной шириной

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

Круглые углы с фиксированной шириной

CSS тянущийся блок с 4 произвольными углами

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

CSS тянущийся блок с 4 произвольными углами

Делаем закругленные углы с помощью псевдоэлементов :before и :after

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

Делаем закругленные уголки с помощью псевдоэлементов :before и :after

Создание произвольных углов и границ. Часть II

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

Создание произвольных углов и границ. Часть II

Закругленные углы в DIVах

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

Круглые углы в DIVах

Закругленные углы и блоки с тенью

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

Круглые углы и блоки с тенью

Занимательная верстка

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

Занимательная верстка

 

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

Еще больше закругленных углов с CSS

Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.

Еще больше круглых углов с CSS

CSS резиновые закругленные углы

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

CSS резиновые круглые углы

CSS: Умные углы

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

CSS: Умные углы

Как сделать тянущиеся по ширине divы с круглыми краями

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

Как сделать тянущиеся по ширине divы с круглыми краями

Тянущиеся закругленные углы

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

Тянущиеся круглые углы

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

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

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

 

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

Представление DomCorners

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

Представление DomCorners

Прозрачные произвольные углы и границы. Версия 2

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

Прозрачные произвольные углы и границы. Версия 2

Nifty углы со сглаживанием

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

Nifty углы без сглаживания

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

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

Круглые углы

www.curvycorners.net

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

www.curvycorners.net

Nifty Corners Cube

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

Nifty Corners Cube

RUZEE.Borders — закругленные углы с помощью яваскрипта

Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.

RUZEE.Borders – круглые углы с помощью яваскрипта

jQuery скругление

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

jQuery скругление

 

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

RoundedCornr

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

RoundedCornr

Spiffy Corners

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

Spiffy Corners

Spanky Corners 1.1

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

Spanky Corners 1.1

Spiffy Box

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

Spiffy Box

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 50

Владислав Мёдов
Ооо, спасибо! Как раз вчера искал подобные статьи.
#
Владислав Мёдов
Павел Плахотя
Отличная статья, спасибо за столько интересных и разнообразных подходов к блокам! Добавил в избранное!
#
Павел Плахотя
jeenart
Спасибо за обзор, супер.
azeff
Гут. Спасибо за интересную подборку статей.
#
azeff
Dem
Блин, ну почему я раньше не прочитал... Столько бы времени и нервов на одном из проектов сэкономил. Некоторые решения куда проще, чем я намудрил с кодом... Спасибо за статью, в читалке RSS достойное месте.
#
Dem
Tata
:) 5+
#
Tata
Амаль
Как раз то, что уже некоторое время пытался найти =)
Deniss
Хорошо но не удобно, ведь ссылки на английские страницы и там надо лазить и искать. Разместите пожалуста всё у себя.ПЛИИИИИИИИИИИИИИИЗЗЗЗЗЗЗ
#
Deniss
 Nbv
Спасибо, искал везде, нашёл у вас!
#
Nbv
Ричард
Спасибо за предоставленную информацию!
#
Ричард
Слава
Не знаю, кто автор статьи, но за материал огромное спасибо! Благодаря статье был спасен проект интернет-магазина и отношения с заказчиком. (Дожить бы скорее до CSS 3.0 ...:))
#
Слава
Rost
Пример в статье Токмакова, во первых, с пустыми тегами, во вторых, не является кроссбраузерным. При заданном Doctype (ЛЮБОМ!!!) в IE 7 блок фиксируется по ширине и у него исчезают углы. В IE6, FF+, Opera 9 , Safari 3 все ОК. Но практического значения этот ОК не имеет!
Почему же в его примере все красиво и в IE 7? Потому что в хэде сайта Лебедева отсутствует Doctype. Народ, вопрос: реально ли сделать кроссбраузерный (IE6 , FF, Opera) 100% резиновый по высоте и ширине блок с закругленными краями, полупрозрачными png-тенями и произвольной заливкой (например, градиент)??? Вариант таблиц неинтересен:)
#
Rost
grang
Спасибо огромное! Очень долго искал!
#
grang
Алексей
Умеют же люди статьи писать!
Слава
Нашел решение проблемы примера Токмакова. Первой строкой ставим
Работает. Правда ограничение по ширине/высоте все равно зависит от размера картинки, но и х..н с ними, поставим 3000px по ширине (1,7 Кб) 6000px по высоте (4 Кб). Не книгу же мы в этот блок собираемся засунуть! А так вообще это самый нормальный из работающих примеров.
#
Слава
nepa3ot
А про "border-radius:;" для css3 там где-нибудь говорят? А то влом всё читать.
#
nepa3ot
Дмитрий
Спасибо, буду использовать у себя вариант с jQuery, как самый простой
Ефим
Хорошая подборочка сайтиков!
Сейчас будем штудировать Спасибо!
TigraS
Отличная подборочка, узнал много нового. Спасибо за предоставленную информацию!
vlad275
Отличная подборка. Жаль не нашел сразу. Потерял день.
#
vlad275
Игорь
А мне не понравилось, автор просто нашел буржуйские сайты и выложил их у себя, даже не постаравшись их перевести. Или я не прав? Буржуйский я зык не все знают
#
Игорь
AS
Спасибо!
#
AS
shinjuhn
Так учите буржуйский. Весь IT на английском давно и с самого начала. Кто не знал, тот сам виноват.
#
shinjuhn
artalex
thanks,thanks and again thanks.It is the most useful article ever about rounded corners.
#
artalex
Нежадный
Отлично! Добавил в избранное!
#
Нежадный
voland
Недавно пришлось реализовать скругленные уголки для тянущегося div - может способ и описан выше, все не просматривал - описал его тут. А тут можно посмотреть пример.
Юрий
Возможно, не совсем внимательно просмотрел статьи, но не нашел способа с флоатами. Это первое что пришло на ум впервые верстая закругленные углы на дивах. Причем этот способ более функционален чем многие другие - внутри можно использовать флоаты.
Вот код:

.tl, .tr, .bl, .br {float:left; width:9px; height:9px; background:url(tl.gif);overflow:hidden;}
.tr, .br {float:right; background:url(tr.gif);}
.bl {background:url(bl.gif);}
.br {background:url(br.gif);}
.header, .bottom {float:left;width:520px;height:9px;background:#fff7df;}
.middle {float:left;width:520px;background:#fff7df;}






вывод




#
Юрий
gps
Спасибо такое большое количество закругления углов ....
#
gps
Integra
А есть примеры скругления углов на активную ссылку без jquery и прочих скриптов? То есть наводишь на ссылку а под ней например однородная скругленная картинка?
#
Integra
Toshi Young
Jquery закругления ведут к тормозам в IE6, проверенно на себе((
Dogger
Спасибо, интересные решения закругления углов, то что нужно:).
Вадим
ПоЛНАЯ Херня! Все скрипты говно практичски не работают все под ie
#
Вадим
Eugene
Спасибо, помогло.
#
Eugene
Oleg
Честно говоря примеры громоздкие, с картинками и т.д. можно обойтись более меньшим кодом.
Антон
Есть стоящие примеры. Однако много хлама
Aion-Top
> Все скрипты говно практичски не работают все под ie
Да нет, это ваш любимый IE говно.
Аноним
>Все скрипты говно практичски не работают все под ie
>Да нет, это ваш любимый IE говно
Признанные народом браузеры IE,Safari/Mozila,Opera - это факт статистики. Каждый из этих браузеров достоин внимания.
"тормоза png в IE при большом количестве", - это миф. На хабре и у Лебедева информация поверхностная, советую изучить техническую документацию, разгадка почти на первых страницах руководства (загадка для тех, кто не читал)
#
Аноним
axel
вот здесь еще есть один урок http://prootime.ru/css-zakruglennie-ugli
AlexF
Ещё один генератор, генерирует только css без js и картинок - border-radius
#
AlexF
Дмитрий
Автоматическое закругление уголков
http://www.roundpic.com/

Оптимизация изображения
http://tools.dynamicdrive.com/imageoptimizer/
#
Дмитрий
Валентин
По ссылкам многие примеры не открываются, к сожалению. А хотелось бы, особенно урок с закругленными углами без картинок..
Иван
Спасибо статье! Реально встал вопрос по отказу от картинок и пренебрежение IE, ибо сайтик весит много и дешевизна хоста не позволяет использовать 1-2 мб под груз.

А вообще, МОЛОДЦЫ! Весь сайт полезный! Только сегодня заметил, что пользуюсь,практически, только Вашим "творением"!

RESPECT ,Парни))
#
Иван
Joliat
А как меню сделать растягивающееся с закругленными краями?
Александра
Я на своем сайте еле поставила закругленные рамки на изображение - ссылку на главной странице. В Лисе все отлично, а опере никак не проходило. Пришлось сделать для изображения padding:3px; со всех сторон, иначе никак не шло в опере. Использовала вот такие строки
border-radius: 6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
-khtml-border-radius:6px 6px 6px 6px;
Семен
А вот одна статья как правильно применять закругления http://kvadracom.com/projects-okneok.html#3
#
Семен
Gloria
Текст с тенью, закругленные углы, фон с flash и более
http://brindisreflexionestutorial.jimdo.com/tutorial-codigos/texto-con-fondo/con-esquinas-originales/
Михаил
небольшой туториал по закруглениям http://siteacademy.ru/index.php/web-design/61-quick-tip-rounded-corners-done-right
#
Михаил

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler