июля
20

Скругленные углы с помощью jQuery

Author admin    Category CSS, jQuery     Tags

Скругленные углы с помощью jQuery

Способов создания закруглённых уголков с помощью CSS – многое множество. Многие из них достаточно простые, а некоторые требуют изрядно пошевелить мозгами при освоении.

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

В чем заключается основная суть этих плагинов? Вы подключается JS-библиотеку и просто указываете элемент, углы которого вы хотите скруглить. Что-то вроде того:

1
$("#main").corner();

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

Отсюда, правда, вытекает и некоторые минусы (для некоторых критичные) – необходимость подключать дополнительную библиотеку и возрастание объема отдаваемого пользователю кода, т.е. увеличение веса странички. Если это для вас неважно – тогда можете попробовать один из следующих плагинов:

1. jQuery Corner

Cсылка

Скругленные углы с помощью jQuery - jQuery Corners

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

2. CurvyCorners

Cсылка

Скругленные углы с помощью jQuery - jQuery CurvyCorners

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

Актуальная версия CurvyCorners находится здесь.


Эти два jQuery плагина для скругления углов являются самыми популярными в Интернете. Однако есть и кое-какие ещё экземпляры, например этот…

3. Cornerz

Cсылка

Закругленные углы с помощью jQuery - Cornerz

Но всё же посоветовал бы вам выбирать из первых двух – смотря что больше понравится.


Похожие статьи:

Комментарии

  • Олег 24 декабря 2010 в 20:44

    Учитывая, что блог называется по имени фреймворка CakePHP, нельзя ли подробно разъяснить как подключить jquery в кейке. Ведь не секрет, что кейк заточен под prototype…

  • admin 25 декабря 2010 в 02:41

    Я использую обычный способ подключения скриптов – с помощью хэлпера Javascript.

    В вашем layout (app/view/layouts) в разделе HEAD прописываем:

    1
    <?php echo $javascript->link('jquery-1.4.2.min');?>

    Путь тут идёт относительно папки app/webroot/js

  • Спартак 27 июня 2011 в 06:12

    И все же закругленности написанные на CSS работают куда бустрее, да и ресурсов меньше едят… Представь, что у тебя на страничке около сотни картинок… Да слабые компы и нэтбуки повиснут, пока жкери обработает массив из 100 картинок….

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

Перед отправкой формы:
Human test by Not Captcha