Существует множество способов сделать закругленные уголки у блоков. Некоторые из них я использовал в различных проектах, некоторые придумывал сам и через пару дней находил такой же способ в сети.
Этот способ вряд ли окажется чем-то новым, но раз уж интерес к закругленным уголкам не иссякает - покажу как я делаю их в последних проектах. Профессионалам вряд ли будет интересно.
То что Вы видите на этой странице - именно оно - уголки :). Для разнообразия слева есть блоки с различными расцветками фона заголовков, цвет меняется добавлением класса, который прописан в 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
Качайте на здоровье...
Некоторым этот способ может не понравиться, т.к. если у посетителя в настройках браузера или прокси отключен JavaScript, то уголков соответственно не будет. Но я считаю, что такие пользователи уже ко всему привыкли, сайт без круглых уголков их не сильно удивит, а функциональность мы никоим образом им не урезаем. Можете сами отключить jQuery и проверить.