В статье рассматривается процесс скругления углов блоков. Предложено несколько способов, с помощью которых можно это сделать. Также проведен обзор каждого из них с указанием сильных и слабых сторон.

В последнее время наблюдается тенденция популяризации блоков с скругленными углами. Этому скруглению начали подвергать почти все подряд: скругленные регионы страниц сайта, скругленные фото, скругленные меню и прочее. Ниже показан пример скругления на одном из сайтов компании Bizonoff:

Здесь мы видим не только скругленные блоки с картинками, но и скругленную кнопку. Для полного набора не хватало еще и скругленного меню, но я думаю глядя на это можно легко себе представить и скругленное меню.

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

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

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

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

Ниже будут приведены выбранные нами способы.

CSS-свойство border-radius

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

К существенным преимуществам этого метода можно отнести:

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

Однако, несмотря на наличие такого мощного списка приемуществ, способ имеет свою темную сторону:

• после выхода в свет нового свойства браузеры не справлялись с выводом округленных углов. Ситуация стабилизировалась только спустя 2-3 года, а до этого времени кроссбраузерность была на низком уровне, даже не смотря на наличие вспомогательных вендорных префиксов –moz и –webkit.
• браузеры семейства –webkit скругляют углы без сглаживания.

Стоит отметить, что значительно улучшил ситуацию кроссбраузерности выход нового плагина CSS3 PIE. Это позволило оптимизировать взаимодействие CSS3, расширения браузеров и нового плагина, что в свою очередь позволило охватить более 90% существующих браузеров. На основании этого можно утверждать, что с этого момента при использовании border-radius основная информация ресурса будет считываться и обрабатываться соответственным программным обеспечением.

Пример кода с использованием свойства border-radius

CSS

.block {
	border: 1px solid #ff0000;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}

А таким образом код обработается в браузере:

Скруглеяем блоки вырезанными картинками

До появления свойства border-radius верстальщики пользовались тоже достаточно простым и надежным способом. Просто на просто вырезали необходимое скругление в фотошопе и фиксировали по углам требуемого блока, основываясь на абсолютном позиционировании.

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

А вот код, согласно которому можно реализовать скругление в соответствии с описуемым способом:

HTML

<h1>
	Содержимое блока
	<div class="topLeft"></div>
	<div class="topRight"></div>
	<div class="bottomLeft"></div>
	<div class="bottomRight"></div>
</h1>

CSS

h1 {
	background: #eee;
	padding: 10px 20px;
	position: relative;
}
. topLeft,
. topRight,
. bottomLeft,
. bottomRight {
	width: 4px;
	height: 4px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background: url(round-corner.png);
}
. topRight {
	left: auto;
	right: 0;
	background-position: 0 -4px;
}
. bottomRight {
	left: auto;
	right: 0;
	top: auto;
	bottom: 0;
	background-position: 0 -8px;
}
. bottomLeft {
	top: auto;
	bottom: 0;
	background-position: 0 -12px;
}

На выходе из браузера получим примерно туже картину, которую наблюдали в первом способе

К преимуществам метода можно отнести следующие показатели:

• простота в применении;
• использование только 1 внешнего файла.

Однако недостатков оказалось немного больше, чем достоинств:

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

Плагин jQuery.corner

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

Какие приемущества можно отметить для этого метода?

• код не загрязняется лишними элементами;
• семантика кода соответствует всем требованиям;
• минимальное количество внешних файлов;
• простая процедура внесения правок в скругления и взаимодействующие с ними элементы.

В тоже время имеет место ряд недостатков:

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

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

js библиотека rocon

В качестве решения рассматриваемой задачи можно применять авторские библиотеки разных веб-разработчиков. Одна из таки библиотек принадлежит авторству С. Чикуёнку.

Эта библиотека без проблем скругляет углы контейнеров с однотонным фоном на абсолютно любых других подложках. Также этому коду поддается возможность установки границ для элемента — естественно скругленных.

Работа этого способа основывается на комплексных мерах для разных браузаров. Таким образом, для Firefox и прочих браузеров, разработанных на движке webkit, библиотека предусматривает применения специализированных свойств -moz-border-radius и -webkit-border-radius, в соответствии с каждым из типов браузера. Для скругления углов для Operа применяют тег canvas, а для старичка IE — VML.

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

Сильные стороны библиотеки:

• быстродействие;
• простота использования;
• компактный объем библиотеки;
• учтена возможность использования «резиновых» блоков;
• предусмотрено динамическое изменение скруглений в блоке;
• минимальное количество внешних файлов.

К слабым сторонам метода следует отнести:

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

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

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

Еще одна библиотека, которая реализует те же задачи похожими методами. Авторские права по этой библиотеке принадлежат Drew Diller.

Что касается принципа работы, то он практически полностью аналогичен работе rocon. Точно также реализуется скругление для продуктов на основе webkit и для Firefox. IE использует VML для осуществления скругления, а Opera — SVG. Принципиальное отличие работы этих двух библиотек заключается в том, что DD_roundies производит округление одновременно для всего контейнера, а rocon — для каждого угла отдельно. Такой способ работы приводит к ресурсоемкому процессу обеспечения «резиновых» свойств для блока.

Если Вас заинтересовала данная библиотека, то найти ее можно тут.

Какие же преимущества у этого метода?

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

Ну а недостатков чуть побольше и они посущественнее:

• недостаточный уровень крссбраузерности (проблемы могут возникать в IE и Opera);
• при скруглении блока на неоднородном фоне существует вероятность появления багов;
• не скругляет картинки;
• очень медленно отрабатывает в IE вследствие постоянного пересчета габаритных размеров контейнера и перерисовки фигуры.

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

Библиотека ImageMagick

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

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

К преимуществам данного способа относят:

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

Далее следует указать и на отрицательные эффекты использования библиотеки ImageMagick:

• может работать только с картинками;
• при обработке картинки, которая располагается на разноцветном фоне, требуется использовать формат png-24, что может увеличить размер используемого изображения.

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

Комплекс вендорных префиксов, CSS3 и PIE

Это решение практически совпадает с первым рассмотренным методом, но имеют места мелкие различности. Остановлю Ваше внимание на том, что движущей силой для этого метода, как и для первого, будет применение border-radius. Для оптимизации работы webkit-браузеров обратимся к вендорному свойству -webkit-border-radius. Аналогично обстоит ситуация для работы в браузере Firefox, ему для стабильной работы необходимо наличие свойства -moz-border-radius.

CSS

.block {
	border: 2px solid #ff0000;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}

Не стоит забывать про наш дорогой IE. Для отладки его работы обратимся к использованию плагина PIE. Собственно, это и есть единственное отличие от первого способа. Код с учетом «пилюли» для старичка IE выглядит так:

CSS

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

Как и прочие методы, этот имеет положительные и отрицательные стороны. К положительным относятся:

• простота метода;
• грамотно написанный код с точки зрения семантики и валидности;
• нет картинок;
• плагин будет подгружаться только при использовании IE-браузеров.

В плохие качества сегодня попадают:

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

Вывод

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