Rounded corners HTML+CSS+jQueryTecHMeaT

Существует множество способов сделать закругленные уголки у блоков. Некоторые из них я использовал в различных проектах, некоторые придумывал сам и через пару дней находил такой же способ в сети.

Этот способ вряд ли окажется чем-то новым, но раз уж интерес к закругленным уголкам не иссякает - покажу как я делаю их в последних проектах. Профессионалам вряд ли будет интересно.

То что Вы видите на этой странице - именно оно - уголки :). Для разнообразия слева есть блоки с различными расцветками фона заголовков, цвет меняется добавлением класса, который прописан в css. Не очень запутанно?

HTML

Возможно кому-то покажется излишняя вложенность, но это требуется для универсальности, эти блоки можно перекидывать из левой колонки в контент и наоборот - они всё равно не поломаются, да и с уголками меньше мороки. Кстати, в коде их не видно? :)

jQuery

Вот теперь наступает очередь jQuery. Так как в проекте предполагалось, что все блоки будут с закругленными уголками, а блоков будет много, да и при разработке проекта используется эта библиотека, то я решил перенести html-код в js-скрипт:

Немножко цифр: в js этот код занял около 330 байт, в каждом блоке он занимал около 250 байт. Блоков на странице около 10. Итого выигрываем больше 2х килобайт!!! В наше-то время 2 килобайта... )))

Основная цель, которую я преследовал, была конечно же не уменьшение веса странички (это просто побочное явление), хотелось очистить HTML от мусора, коим уголки и являются, т.к. не несут никакой смысловой нагрузки и выполняют лишь функцию визуального оформления.

CSS

CSS много, поэтому прошу прощения за микроскопический размер букв.

Features

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

Краткий итог:

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

Download

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



Обсуждение на Хабре