Скругленные углы с помощью jQuery
Способов создания закруглённых уголков с помощью CSS – многое множество. Многие из них достаточно простые, а некоторые требуют изрядно пошевелить мозгами при освоении.
Однако есть и уж совсем простые способы создания скругленных углов – с помощью jQuery.
В чем заключается основная суть этих плагинов? Вы подключается JS-библиотеку и просто указываете элемент, углы которого вы хотите скруглить. Что-то вроде того:
1 | $("#main").corner(); |
Плагин обворачивает ваш элемент кучей дивов, и как результат – идеальное сглаживание при минимуме работы.
Отсюда, правда, вытекает и некоторые минусы (для некоторых критичные) – необходимость подключать дополнительную библиотеку и возрастание объема отдаваемого пользователю кода, т.е. увеличение веса странички. Если это для вас неважно – тогда можете попробовать один из следующих плагинов:
1. jQuery Corner
С этим плагином можно создавать какие-то совершенно нереальные закругления и обрамления у элементов.
2. CurvyCorners
Отличный плагин, которые, ко всему прочему, позволяет создавать сглаживание и отлично справляется с прозрачностью.
Актуальная версия CurvyCorners находится здесь.
Эти два jQuery плагина для скругления углов являются самыми популярными в Интернете. Однако есть и кое-какие ещё экземпляры, например этот…
3. Cornerz
Но всё же посоветовал бы вам выбирать из первых двух – смотря что больше понравится.
Похожие статьи:
Комментарии
Добавить комментарий

admin






Учитывая, что блог называется по имени фреймворка CakePHP, нельзя ли подробно разъяснить как подключить jquery в кейке. Ведь не секрет, что кейк заточен под prototype…
Я использую обычный способ подключения скриптов – с помощью хэлпера Javascript.
В вашем layout (app/view/layouts) в разделе HEAD прописываем:
Путь тут идёт относительно папки app/webroot/js
И все же закругленности написанные на CSS работают куда бустрее, да и ресурсов меньше едят… Представь, что у тебя на страничке около сотни картинок… Да слабые компы и нэтбуки повиснут, пока жкери обработает массив из 100 картинок….