Скругляют блоки

Скругляют меню

Скругляют фото

Бесспорно дизайны стали симпатичней. Да и усилий вроде не так много нужно: несколько секунд работы дизайнера и пара минут чтобы сверстать эти углы.

Но все ли так просто и безоблачно? Посмотрим на такой вот дизайн:

Нужно скруглить фото расположенном на фоне с более, чем одним цветом (другая фото или градиент). Да еще учесть что блок может "плавать" по этому фону. Т.е. вырезать четыре картинки и разместить их по углам уже не получится.

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

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

• быть простым в использовании;
• быть универсальным минимум дополнительных тегов в коде (чтобы облегчить DOM и сохранить семантику);
• минимум внешних файлов: картинок, javascript (сократить запросы к серверу).

Почти идеальное решение - CSS3 border-radius

В 2002 W3C начало рекомендовать разработчикам браузеров свойство border-radius, которое решало одним махом все проблемы со скруглениями.

Преимущества:

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

• на дворе 2010-й год, а border-radius понимает только Opera 10.5 (подпольные браузеры в счет не беру). В чистом виде идеальное решение при всем оптимизме нам светит через 2-3 года. Частично проблему кроссбраузерности исправляют свойства -moz-border-radius (для mozilla) и -webkit-border-radius (для webkit-браузеров), но в сумме это не покрывает и половины пользователей;
• браузеры на движке webkit вроде как делают скругление без сглаживания.

Скругленные углы с помощью картинок

Метод предельно прост - каждый уголок будет картинкой, которую абсолютным позиционированием размещаем внутри блока по углам блока-родителя. Например, имеем по дизайну вот такой заголовок:

При этом он должен тянуться вертикально и горизонтально. Наши действия: вырезаем углы и склеиваем их в одну картинку чтобы минимизировать число отдельных файлов (изображение увеличено для наглядности)

Далее городим страшную конструкцию в HTML, а стилями расставляем углы по местам:

1. <h1>  
2.     Холодильное оборудование  
3.     <div class="cornterTL"></div>  
4.     <div class="cornterTR"></div>  
5.     <div class="cornterBL"></div>  
6.     <div class="cornterBR"></div>  
7. </h1>

1. h1 {  
2.     background: #d9f004;  
3.     padding: 10px 20px;  
4.     position: relative;  
5. }  
6. .cornerTL,  
7. .cornerTR,  
8. .cornerBR,  
9. .cornerBL {  
10.     width: 4px;  
11.     height: 4px;  
12.     overflow: hidden;  
13.     position: absolute;  
14.     top: 0;  
15.     left: 0;  
16.     background: url(path-to/corners.png);  
17. }  
18. .cornerTR {  
19.     left: auto;  
20.     right: 0;  
21.     background-position: 0 -4px;  
22. }  
23. .cornerBR {  
24.     left: auto;  
25.     right: 0;  
26.     top: auto;  
27.     bottom: 0;  
28.     background-position: 0 -8px;  
29. }  
30. .cornerBL {  
31.     top: auto;  
32.     bottom: 0;  
33.     background-position: 0 -12px;  
34. }

Преимущества:

• простота реализации;
• минимальное к-во внешних файлов.

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

Скругленные углы с помощью jQuery.corner

Плагин для jQuery, который позволяет сделать уголки разнообразной формы. На странице плагина можно оценить большое разнообразие доступных углов. Там же доступна последняя версия плагина.

Преимущества:

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

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

Скачать плагин и примеры

rocon - js библиотека для создания скругленных углов

• Кто делает. Автор библиотеки Сергей Чикуёнок.
• Что делает. Скругляет углы у элементов с однородным фоном на любом фоне. Плюс есть возможность добавления скругленного бордюра. Примеры.
• Как делает. Для mozilla и браузерах на движках webkit используются специфические CSS правила -moz-border-radius, -webkit-border-radius. Для Opera используется canvas, для IE VML. Детали в статье автора "rocon - подробности".
• Где взять. Скачать rocon. Баг лист.

• быстро работает;
• довольно прост в применении;
• небольшой вес библиотеки;
• продумана возможность резиновости блоков;
• продумано динамическое добавление блоков со скруглениями;
• один внешний файл при любом числе углов.

• пока не реализованы скругления для блока с неоднородным фоном (например с градиентом);
• не применимо для изображений (<img>);
• местами еще сыровата библиотека.

DD_roundies - еще одна библиотека для скругления углов

• Кто делает. Автор Drew Diller. Он же автор библиотеки DD_belatedPNG для решения проблемы прозрачности png24 в IE6.
• Как делает. Принцип несколько схож с библиотекой rocon - для mozilla и webkit используются CSS правила -moz-border-radius и -webkit-border-radius. Для IE используется VML, для Opera SVG. Главное отличие от rocon - скгругленный блок отрисовывается целиком, что делает резиновость блока довольно трудной (ресурсоемкой). В rocon каждый угол - это отдельный элемент.
• Где взять. Скачать библиотеку, посмотреть примеры, прочитать о синтаксисе можно на странице скрипта.

• прост в применении;
• работает на неоднородном фоне;
• есть возможность задания разных радиусов для разных углов.

• слабая кроссбраузерность (как минимум есть проблемы в IE8, Opera версии меньше 10);
• с багами работает скругление блоков с неоднородным фоном;
• не применимо к картинкам;
• медленная работа в IE при изменении размеров блока из-за постоянного пересчета размера блока и перерисовки фигуры.

Скругление картинок на стороне сервера. Библиотека ImageMagick

• Что делает. Дает возможность преобразовывать изображения на стороне сервера: изменять размеры, поворачивать и еще многое чего. Меня же сейчас интересует возможность создания изображения со скругленными углами. Т.е. уже с сервера приходит картинка нужной формы и версткой с ней ничего делать не нужно.
• Где почитать. Официальный сайт. Обработка изображений с помощью ImageMagick.

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

• применимо только к изображениям (img);
• если изображение на веб странице должно быть расположено на неоднородном фоне, тогда придется картинки выдавать в формате png-24, что ощутимо может повлиять на вес изображения.

Подытожим. Идеального решения для скругления углов ныне нет. Поэтому в зависимости от поставленных задач и целей конкретного проекта ищем возможности реализации из доступных решений.

Статьи по теме:

• Регистрация сайта в каталогах. Обзор сервисов
• Градиент: CSS3 против CSS2 + картинка
• Фотомонтажим на PHP
• Спрайты: меньше картинок - больше скорость
• Обрезаем изображение с помощью CSS