Xiper

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

Автор: Евгений Рыжков Дата публикации:

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

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

блок со скругленными углами

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

меню со скругленными углами

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

фото со скругленными углами

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

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

фото со скругленными углами на фотофоне

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

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

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

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

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

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

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

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

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

Недостатки

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

update С появлением плагина 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 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 используется в большинстве наших проектов, поэтому можно считать, что только один дополнительный файл)
  • легко менять цвет блоков и радиус скругления

Недостатки

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

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

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

Кто делает

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

Что делает

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

Как делает

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

Где взять

  • скачать rocon
  • баг лист

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

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

Недостатки

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

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

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

Кто делает

Автор 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.

Что делает

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

Где почитать

  • Официальный сайт
  • Обработка изображений с помощью ImageMagick

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

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

Недостатки

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

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

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

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

update: суть простая — используем 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 скругления, несколько по разному могут отобразить скругленные углы.

Подытожим

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

Материалы

  • W3C draft :: border-radius
  • jQuery Corner Demo
  • rocon — подробности
  • Code-only rounded HTML boxes
  • Официальный сайт ImageMagick