Закругляем уголки с помощью Javascript

Еще один пост для ленивых верстальщиков. На этот раз поговорим о создании закруглённых уголков. Я думаю, вы согласитесь со мной, если я скажу что это довольно муторный процесс. Конечно, я надеюсь, что когда-нибудь к нам на помощь придет 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 — включает прозрачность, нужен если для блока задано фоновое изображение.
  • toprightbottomlefttop-lefttop-rightbottom-leftbottom-right — используются для скругления определенных уголков.

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

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

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

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' });

В архиве лежат два файла: 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'); 

About: neadmin


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

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

Перейти к верхней панели