Круглі кути засобами JavaScript та jQuery - Хочу веб-сайт
Вітаю, дорогі друзі. Продовжую тему розпочату в уроці:"Круглі кути, border-radius і CSS3" і як обіцяв, розгляну можливість перемогти завзятість браузерівInternet Explorer таOpera у небажанні правильно відображати закруглені кути на веб-сторінці.
Крім того, за допомогою цього методу ви зможете взагалі не морочитися з написанням кросбраузерного коду, запам'ятовуючи різні префікси для властивостіCSS3 -border-radius і хитрощі у виглядіVML - скриптів - дляInternet Explorer таOpera.
А надає нам таку можливість бібліотекаjQuery та її плагінjquery.corner. Не стомлюватиму вас довгими прелюдіями і перейду відразу до діла. Для демонстрації скористаюся тим же прикладом, що і в уроці:"Круглие кути, border-radius і CSS3" - блоковим тегомDIV, якому надаю клас: , і задам йому властивості>CSS : ширину, висоту та колір фону.
Результат:
Всі! Плагін підключений та працює! При завантаженні сторінки кутиDIV -а з класом стають закругленими.
Результат:
Звичайно ж плагін corner не обмежується лише однією командою. Можна задавати радіус кривизни кутів у пікселах, наприклад:
Результат:
Але і це ще не все Так само як і у властивостіCSS3 -border-radius можна змінювати форму не всім кутам, а вибірково, використовуючи такі ключові слова:
- tl - верхній-лівий кут;
- tr - верхній-правий кут;
- 2 - нижній-правий кут;
- bl - нижній-лівий кут.
Однак це ще не кінець. Крім стандартної командиround – закруглити кути, плагін Corner надає велику кількість різних команд на будь-який смак: