Еще один способ скругления углов

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

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

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

1. C использованием картинок по углам блока (абсолютным позиционированием или в свойство background)
2. Обрамлением целевого блока, множеством маленьких блоков, разной ширины
3. С использованием js.

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

Способ 1

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

Способ 2

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

Способ 3

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

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

Рискуя вызвать недовольство гипотетических читателей, признаюсь, что когда дело касается закругленных углов, я предпочитаю использовать javascript, а точнее плагин к JQuery — curvyCorners. Закругляет углы он замечательно, и работает независимо от фонового бэкграунда, и собственного фонового изображения.

Пользоваться им крайне просто. Для этого нам понадобиться конечно же JQuery, и сам плагин соответственно. Скачиваем, рапаковываем в папку с нашей hmtl-страницей, далее подключаем в head:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.curvycorners.min.js"></script>

Далее для того чтобы просто скруглить все четыре угла нужного нам блока, нужно определиться какой блок мы будем закруглять (в примере это блок с id=main) и написать следующее:

$(document).ready(function(){
	$("#main").corner();
});

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

$(document).ready(function(){
	$("#main")
                 .corner({tl:{radius: 20}, tr:{radius:20}, bl:{radius: 0}, br:{radius:0}, antiAlias:false,  autoPad: true
	});
});

здесь tr, tl, bl, br — это соответствующие имена каждого из углов (top right, top left, bottom left, bottom right).

Свойство antiAlias — установленное в false  отключает сглаживание углов, делает их очертания более резкими, но в то же время значительно уменьшает время, загрузки страницы.

Свойство autoPad — также может принимать значения true и false, уставновленное в значение true, позволяет сохранить назначеныый через css паддинг, скругляемому блоку.

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

Примеры использования можно посмотреть здесь