|
Сейчас прямо-таки эпоха скругленных уголков. Где дизайнеры только их не используют...
Скругляют блоки
Скругляют меню
Скругляют фото
Бесспорно дизайны стали симпатичней. Да и усилий вроде не так много нужно: несколько секунд работы дизайнера и пара минут чтобы сверстать эти углы.
Но все ли так просто и безоблачно? Посмотрим на такой вот дизайн:
Нужно скруглить фото расположенном на фоне с более, чем одним цветом (другая фото или градиент). Да еще учесть что блок может "плавать" по этому фону. Т.е. вырезать четыре картинки и разместить их по углам уже не получится.
В таких случаях имеем несколько секунд работы дизайнера и полный ступор с головной болью у верстальщика.
Столкнувшись очередной раз с такой задачей, нашей командой было решено выделить наконец время на детальное изучение этой проблемы и поиск решения. Тема эта довольно избита. Инет кишит готовыми решениями и советами. Но т.к. мы взяли курс на разработку высокоскоростных, нагруженных сайтов с большим количеством анимаций, решение должно было попадать под требования:
- быть простым в использовании;
- быть универсальным минимум дополнительных тегов в коде (чтобы облегчить 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, а стилями расставляем углы по местам:
<h1> Холодильное оборудование <div class="cornterTL"></div> <div class="cornterTR"></div> <div class="cornterBL"></div> <div class="cornterBR"></div> </h1>
h1 { background: #d9f004; padding: 10px 20px; position: relative; } .cornerTL, .cornerTR, .cornerBR, .cornerBL { width: 4px; height: 4px; overflow: hidden; position: absolute; top: 0; left: 0; background: url(path-to/corners.png); } .cornerTR { left: auto; right: 0; background-position: 0 -4px; } .cornerBR { left: auto; right: 0; top: auto; bottom: 0; background-position: 0 -8px; } .cornerBL { top: auto; bottom: 0; background-position: 0 -12px; }
Преимущества:
- простота реализации;
- минимальное к-во внешних файлов.
Недостатки:
- наличие внешнего файла(ов);
- избыточность 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, что ощутимо может повлиять на вес изображения.
Зачем этот способ знать верстальщику. Чтобы вовремя подсказать программисту(заказчику, руководителю проекта) о такой возможности для получения лучшего конечного результата командной работы.
Подытожим. Идеального решения для скругления углов ныне нет. Поэтому в зависимости от поставленных задач и целей конкретного проекта ищем возможности реализации из доступных решений.
|
