Скругление углов. Обзор методов. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

Скругление углов. Обзор методов

Сейчас прямо-таки эпоха скругленных уголков. Где дизайнеры только их не используют...

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

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

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

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

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

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

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

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

  • быть простым в использовании;
  • быть универсальным минимум дополнительных тегов в коде (чтобы облегчить 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 (что-то мне подсказывает, что это не лучшим образом скажется на скорости анимаций на страницах).
Эти косяки вылезли за 10 минут тестирования. На самом деле думаю косяков больше - в топку такой плагин.

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

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, что ощутимо может повлиять на вес изображения.
Зачем этот способ знать верстальщику. Чтобы вовремя подсказать программисту(заказчику, руководителю проекта) о такой возможности для получения лучшего конечного результата командной работы.

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


Дата публикации: 07.07.2010
Евгений Рыжков,
xiper.net

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

   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:18
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий