Блог вебмастера

Еще один пост для ленивых верстальщиков. На этот раз поговорим о создании закруглённых уголков. Я думаю, вы согласитесь со мной, если я скажу что это довольно муторный процесс. Конечно, я надеюсь, что когда-нибудь к нам на помощь придет CSS 3, а пока посмотрим, как же можно облегчить эту работу с помощью Javascript. Итак, представляю обзор нескольких скриптов, с помощью которых можно без особых усилий закруглять уголки.

Jquery Corners

Начну обзор с Jquery плагина Jquery Corners. Этот плагин не использует изображений при создании уголков, как в принципе и все остальные скрипты, описанные ниже. Закругленные уголки создается при помощи нескольких дополнительных div-блоков высотой в 1px сверху и снизу основного блока. В интернете можно найти уйму описаний этого способа. Например, об этом неплохо расписано здесь.

Применение скрипта очень простое:

$('селектор').corners(параметры);

Можно использовать следующие параметры:

• 4px - радиус уголков (по умолчанию равен 4 пикселям);
• 10px 5px - задает размер уголков по оси x и y соответственно;
• webkit -создает уголки с помощью CSS параметра -webkit-border-radius, который поддерживают браузеры на движке Webkit (Safari, Google Chrome);
• anti-alias - сглаживание уголков (по умолчанию работает);
• transparent - включает прозрачность, нужен если для блока задано фоновое изображение.
• top, right, bottom, left, top-left, top-right, bottom-left, bottom-right - используются для скругления определенных уголков.

Все параметры указываются через пробел. Пример:
$('.rounded').corners('6px transparent top');

Так же есть возможность задавать параметры прямо в атрибуте class:

<div class="rounded {8px top}">...</div>

• Страница плагина Jquery Corners
• Документация и demo

Jquery Canvas Rounded Corners

Еще один Jquery плагин. Для закругления уголков использует тег canvas. Не смотря на то, что тег canvas относится к спецификации HTML 5, скрипт работает во всех основных браузерах, включая IE 6 и выше.

Использование:

$(селектор).corners(параметры);

Параметры создаваемых уголков:

• radio - радиус;
• inColor - цвет уголков;
• outColor - цвет фона элемента canvas;
• borderSize - размер бордера;
• borderColor - цвет бордера.

Пример использования:
$('#example').corners({ radio: 40, inColor: '#FFCC66', outColor: '#D2FBAE' });

• Описание и документация;
• Demo;
• Canvas Rounded Corners (9Кб).

В архиве лежат два файла: jquery.corners.js и newExcanvas.js. Файл jquery.corners.js - сам файл скрипта, а файл newExcanvas.js необходим для создания элементов canvas в Internet Explorer. Поэтому, второй файл думаю лучше подключать через условные комментарии.

RUZEE.ShadedBorder

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

• Создание теней;
• Создание эффекта свечения;
• Использование градиентов для фона блоков с закруглёнными уголками;
• Создание границ с произвольной шириной и эффектом прозрачности;
• Очень маленький размер файла скрипта - всего 9 Кб;
• Не требует дополнительных Javascript-библиотек.

На demo-страничке можно увидеть воочию, на что способен этот скрипт.

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

var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });

Элемент, к которому будут применяться эффекты не должен напрямую содержать текста, весь текст должен быть вложен в другие элементы, например в еще один DIV или абзац:

<div id="round_me">
   <p>I want to be rounded!</p>
</div>

Затем, в конце HTML документа добавляем код, который будет применять все эффекты к выбранным элементам:

<script type="text/javascript">
    border.render('round_me');
</script>

Скачать ShadedBorder.zip (20Кб)

Вот в принципе и все, на этом мой обзор закончен. Какой из скриптов использовать - решайте сами.