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

закругленные углыКаждый начинающий верстальщик рано или поздно сталкивается с проблемой верстки закругленных углов. И хотя в сети масса информации об этом, единого правила, подходящего на все случаи жизни  (по крайней мере до выхода 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.

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

Еще один способ скругления углов: 12 комментариев

  1. Спасибо за информацию. Изучаю Jquery, но о такого плагина до вашей статьи не втречал

  2. Спасибо. Вещь очень нужная, но есть проблема. Многие отключают в свойстах браузера поддержку java. Как я понимаю, в таких случаях данный способ работать не будет? Да и все-таки злоупотребление ява-сценариями — это не совсем хорошо. В любом случае спасибо, есть из чего выбирать. :)

    1. Конечно с выключенным ява-скриптом, этот способ работать не будет. Но это временное решение, до прихода CSS3

    2. Проблем нет.
      1. В данном случае используется не java, а javascript.
      2. Отключают javascript вовсе не многие.
      3. При отключении js не работает основной функционал массы популярных сайтов, на этом фоне проблема с уголками выглядит смешной.

      :)

      1. Позволю с Вами не согласится. В своих работах стараюсь использовать возмжности CSS. Очень многие вещи получается делать без использования java (в том или ином виде). Довольно часто приходится пользоваться мазохистским доступом в интернет через GPRS. В этом случае в топку идет не только поддержка Java и Java-Script, но и отображение картинок. Думаю, я не один такой.

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

  3. Windows 7, IE 8 (ни разу не юзаный ибо FF rulez).

    Оформил скругление на jquery, опера — хорошо, файрфокс — хорошо, осел — тупо всё порезал. На дефолтных настройках порезал! А поскольку (как ни грустно) ослом пользуется пока подавляющее большинство, виста/7 все плотнее и плотнее входят в нашу жизнь и основная масса юзеров — ламеры не умеющие покопать настройки, то использование jquery/java в данном случае только в минус нам.

    1. Ну если ты пишешь java вместо javascript и не видишь разницы, то ты тоже ламер хахаах

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *