Обновить

Rounded corners HTML+CSS+jQuery

Чулан
Закругленные уголки опять волнуют хабравчан, за последние 24 часа наблюдал 2 интересных топика с различными способа закругления этих самых уголков. Решил показать то, чем пользуюсь сам.
Сразу хочу оговориться, что я не претендую на уникальность данного способа, но додумался до него сам.
image

Приведу краткое описание и скрин-код. Подробнее здесь.

HTML


image

jQuery


image

CSS


image

Features


Как видим, каждый набор элементов <b class='..'><em></em></b> образует полосу в один пиксель с границами по краям.

Краткий итог:
  • Размер уголков можно изменять добавлением новых элементов по аналогии.
  • Можно использовать градиент просто меняя фон у каждой полосы (подчеркнуто красным)
  • У уголков есть border. По сути каждая полоса может иметь 4 оттенка цвета: border у b, background у b, border у em, background у em
  • HTML вычищаем от созданного нами мусора и помещаем код уголков в JS.

Download


Качайте на здоровье...

Кстати, если кто-то сможет показать, как сделать не на jQuery, а на других библиотеках — включу как альтернативу в страничку.

====

Вот появилось решение на JavaScript без использования jQuery, спасибо Zitrix.
Теги:Rounded cornersHTMLCSSjQuery
Хабы: Чулан
Рейтинг +16
Количество просмотров 461 Добавить в закладки 52
Комментарии
Комментарии 10

Похожие публикации

Frontend разработчик
от 100 000 до 130 000 ₽Diamond Personnel R&CМосква
Программист PHP
от 30 000 ₽TimeМоскваМожно удаленно
PHP Программист
от 80 000 до 90 000 ₽SEMPROGROUPМожно удаленно
Front end developer (Senior)
от 180 000 ₽SellaviМосква
Frontend Developer (Vue.js)
от 1 500 €TR LogicМожно удаленно

Лучшие публикации за сутки