Скругление углов. Обзор методов.

Дата публикации: 26.05.2010

Последнее обновление: 25.01.2011

скругляем углы Сейчас прямо-таки эпоха скругленных уголков.

Где дизайнеры только их не используют: скругляют блоки

скругляют меню

скругляют фото

Бесспорно дизайны стали симпатичней. Да и усилий вроде не так много нужно: несколько секунд работы дизайнера и пара минут чтобы сверстать эти углы.

Но все ли так просто и безоблачно? Посмотрим на такой вот дизайн:

нужно скруглить фото расположенном на фоне с более, чем одним цветом (другая фото или градиент). Да еще учесть что блок может «плавать» по этому фону. Т.е. вырезать четыре картинки и разместить их по углам уже не получится.

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

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

быть простым в использовании
быть универсальным
минимум дополнительных тегов в коде (чтобы облегчить DOM и сохранить семантику)
минимум внешних файлов: картинок, javascript (сократить запросы к серверу)

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

Почти идеальное решение — CSS3 border-radius

В 2002 W3C начало рекомендовать разработчикам браузеров свойство border-radius, которое решало одним махом все проблемы со скруглениями.

Преимущества

нет необходимости во внешних файлах (картинках, js)
HTML код предельно чист и семантичен
рендеринг страницы максимально быстрый
скругляется что угодно (картинки, блоки с любым фоном, на любом фоне)
скругляется как угодно (задается угол скругления, какие именно углы скруглять, можно задать скругленную рамку заданным цветом и толщиной)

Недостатки

на дворе весна 2010-го, а border-radius понимает только Opera 10.5 (подпольные браузеры в счет не беру). В чистом виде идеальное решение при всем оптимизме нам светит через 2-3 года. Частично проблему кроссбраузерности исправляют свойства -moz-border-radius (для mozilla) и -webkit-border-radius (для webkit-браузеров), но в сумме это не покрывает и половины пользователей.
браузеры на движке webkit вроде как делают скругление без сглаживания

update 30.09.2010 С появлением плагина CSS3 PIE ситуация изменилась: CSS3, расширения браузеров и этот плагин, теперь можно охватить около 90% пользователей. Для большинства проектов этого достаточно, тем более, что число старых браузеров с каждым месяцем становится ощутимо меньше, плюс скругления не являются критически важным элементом дизайна (сайта): пользователи всех браузеров информацию сайта увидят. Вот как это выглядит в CSS коде:

.roundedEl {
	border: 1px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	behavior: url(PIE.htc);
}

Заметки

таким способом скруглить картинку зачастую проще, если ее поместить в бэкграунд (background);
если картинка размещена в контейнере, который имеет скругленные углы, чтобы картинка не выходила за рамку родителя, следет ему (родителю) добавить overflow: hidden;
update 25.01.11 by Денис Антонов Если применить скругление углов к таблице, ИЕ всех версий подвисает. Причем может проявиться только при обновлении страницы или переходе на другую. Решение — обернуть таблицу в дополнительный <div> и уже к нему применять скругление;
проблемы с border-radius.

Скругленные углы с помощью картинок

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

При этом он должен тянуться вертикально и горизонтально. Наши действия: вырезаем углы и склеиваем их в одну картинку чтобы минимизировать число отдельных файлов (изображение увеличено для наглядности)

Далее городим страшную конструкцию в HTML, а стилями расставляем углы по местам:

<h1>
	Холодильное оборудование
	<div class="cornterTL"></div>
	<div class="cornterTR"></div>
	<div class="cornterBL"></div>
	<div class="cornterBR"></div>
</h1>

h1 {
	background: #d9f004;
	padding: 10px 20px;
	position: relative;
}
.cornerTL,
.cornerTR,
.cornerBR,
.cornerBL {
	width: 4px;
	height: 4px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background: url(path-to/corners.png);
}
.cornerTR {
	left: auto;
	right: 0;
	background-position: 0 -4px;
}
.cornerBR {
	left: auto;
	right: 0;
	top: auto;
	bottom: 0;
	background-position: 0 -8px;
}
.cornerBL {
	top: auto;
	bottom: 0;
	background-position: 0 -12px;
}

Преимущества

простота реализации
минимальное к-во внешних файлов

Недостатки

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

Скругленные углы с помощью jQuery.corner

Плагин для jQuery, который позволяет сделать уголки разнообразной формы. На странице плагина jquery.malsup.com/corner/ можно оценить большое разнообразие доступных углов. Тут же доступна последняя версия плагина.

Преимущества

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

Недостатки

нет возможности сделать углы изображениям (в описании скрипта сказано, что применим только к блочным элементам)
не работает кроссбраузерно на неоднородном фоне
косяки, если скругляемый элемент имеет неоднородный фон
возможны косяки с расположением углов в IE6
углы реализуются с помощью миллиона динамически вставленных элементов в DOM (что-то мне подсказывает, что это не лучшим образом скажется на скорости анимаций на страницах)

Эти косяки вылезли за 10 минут тестирования. На самом деле думаю косяков больше — в топку такой плагин.

rocon — js библиотека для создания скругленных углов

Кто делает

Автор библиотеки Сергей Чикуёнок.

Что делает

Скругляет углы у элементов с однородным фоном на любом фоне. Плюс есть возможность добавления скругленного бордюра. Примеры — chikuyonok.ru/playground/rocon/.

Как делает

Для mozilla и браузерах на движках webkit используются специфические CSS правила -moz-border-radius, -webkit-border-radius. Для Opera используется canvas, для IE VML.

Где взять

code.google.com/p/rocon/downloads/list

Преимущества

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

Недостатки

пока не реализованы скругления для блока с неоднородным фоном (например с градиентом)
не применимо для изображений (<img>)
местами еще сыровата библиотека

Верим, что Сергей найдет время доработать скрипт. Ждем этого дня не меньше, чем Нового года.

DD_roundies — еще одна библиотека для скругления углов

Кто делает

Автор www.dillerdesign.com/ Drew Diller. Он же автор библиотеки DD_belatedPNG для решения проблемы прозрачности png24 в IE6.

Как делает

Принцип несколько схож с библиотекой rocon — для mozilla и webkit используются CSS правила -moz-border-radius и -webkit-border-radius. Для IE используется VML, для Opera SVG. Главное отличие от rocon — скгругленный блок отрисовывается целиком, что делает резиновость блока довольно трудной (ресурсоемкой). В rocon каждый угол — это отдельный элемент.

Где взять

Скачать библиотеку, посмотреть примеры, прочитать о синтаксисе можно на странице скрипта.

Преимущества

прост в применении
работает на неоднородном фоне
есть возможность задания разных радиусов для разных углов

Недостатки

слабая кроссбраузерность (как минимум есть проблемы в IE8, Opera версии меньше 10)
с багами работает скругление блоков с неоднородным фоном
не применимо к картинкам
медленная работа в IE при изменении размеров блока из-за постоянного пересчета размера блока и перерисовки фигуры

Вывод

В реальных сайтах малоприменимо.

Скругление картинок на стороне сервера. Библиотека ImageMagick.

Что делает

Дает возможность преобразовывать изображения на стороне сервера: изменять размеры, поворачивать и еще многое чего. Меня же сейчас интересует возможность создания изображения со скругленными углами. Т.е. уже с сервера приходит картинка нужной формы и версткой с ней ничего делать не нужно.

Преимущества

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

Недостатки

применимо только к изображениям (img)
если изображение на веб странице должно быть расположено на неоднородном фоне, тогда придется картинки выдавать в формате png-24, что ощутимо может повлиять на вес изображения

Зачем этот способ знать верстальщику

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

CSS3 + вендорные префиксы + PIE

update 10.09.10: суть простая — используем CSS3 свойство border-radius для Opera 10.5+ и новых браузеров, которые будут появляться дальше, для некоторых продвинутых браузеров используем специфические (вендорные) свойства, для IE6-8 плагин PIE:

#roundedBox {
	border: 2px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;	
}

А для IE6-8:

#roundedBox {
	behavior: url(path-to/PIE.htc);
	zoom: 1;
}

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

простота и скорость реализации;
чистый HTML код;
отсутствие картинок;
только IE6-8 будут подгружать дополнительный файл PIE.htc.

Недостатки:

не все старые браузеры поддерживают вендорные префиксы (например, скругленные углы таким способом не увидят пользователи браузеров FF ниже версии 3.6, Opera версии ниже 10.5);
браузеры поддерживающие CSS скругления, несколько по разному могут отобразить скругленные углы.

Подытожим

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

Материалы

www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius — W3C draft :: border-radius
jquery.malsup.com/corner/ — jQuery Corner Demo
chikuyonok.ru/2009/02/rocon-more/ — rocon
www.imagemagick.org/ — Официальный сайт ImageMagick

Теги: разгоняем сайт, оптимизация