Настоящее скругление углов картинок на клиенте

Гм, делаю так уже давно (правда, без поддержки IE) и понятия не имела, что это принципиально новый способ…

Вот буквально несколько минут назад искал решение скругленных углов. Нашел NiftyCube .

Сейчас попробую ваше решение.

Спасибо огромное за то, что напомнили про CSS3 Pie!
Отсутсвие border-radius в IE для меня некритично не пользуюсь, а вот поддержка нескольких фоновых изображений очень нужна.

У Сергея Чикуёнка есть хорошая библиотека ictinus.

Вы уверены, что после предпоследнего шага оптимизации браузер не будет 2 раза дёргать картинку (делать 2 запроса к серверу)?

1. Грузить картинку два раза не гут. Умный браузер второй раз качать конечно не будет, но вот в оперативе сколько картинок будет не совсем ясно (к картинкам в IMG есть доступ через JS как к графическому обьекту, к бекграундам нет, то есть это, возможно, различные инстансы).

2. Указывать размеры картинок — это хорошая практика. Иначе у вас сайт будет прыгать, как это было в 90-х. Поэтому смысла во второй картинке нет в принципе.

3. CSS3 Pie и схожие решения работают до тех пор, пока у вас нет сложной вёрстки с кучей навороченного CSS3. В таких условиях всё ломается нафиг, а порой IE умирает. Так что я бы не советовал увлекаться — у вас дев машина мощная, а ребята с нетбуками будут вас ненавидеть.

Вобщем, плохой способ.

только вот картинку прятать не надо, а то пользователь захочет её сохранить и обломается.
неделю назад как раз задался такой проблемой webcocktail.ru/sandbox/border-radius/
задавал картинкам прозрачность, чтобы через контекстное меню она была доступна.
а ещё, лучше использовать border-radius.htc, с ним особых тормозов не наблюдается даже при большом количестве картинок, если его немного пофиксить

Как мне кажется правильнее будет все-же картинку оставить картинкой а не запихивать ее в div (простой контент менеджер в wysiwyg редакторе при добавлении фото не будет париться с дивами и лезть в код), а уже сверху нее накладывать уголки и прочие спецэффекты средствами js+css.
Понятно, что фон в этом случае нужен однотонный.
Опять же если юзер захочет сохранить картинку у него в случае с div это не получится + не напечатает на принтере (фон как правило не печатается).

Настоящее скругление углов картинок на клиенте
…
В результате мы получили что хотели, элемент остается инлайновым как обычная картинка

Чую подвох — настоящее ли скругление мне предлагают ;) И вот еще:

Есть очень мощная библиотека CSS3 Pie которая реализует на VML многие CSS3 свойства для IE6-8, включая border-radius, она невероятно проста и весит всего 28кб.

Вопрос: есть ли смысл загружать 28 Кб js, который может быть и отключен, когда мне надо на одной из страниц сайта скруглить 3 картинки общим весом 12Кб?

Внимание! Да, PIE — это благо, однако у меня в ИЕ7 бывают глюки, когда закругляется только первый элемент класса, который мы пропустили через behavior. Так же случается так, что не закругляются элементы, которые находятся в закругленном родителе.

Кстати, в вашем примере для правого блока используются ксс свойства
background none repeat scroll 0 0 #555555;
opacity:0.7;

Чтоб это работало в ИЕ6-8, нужно написать:
-background:rgba(red,green, blue, 0.7);
-pie-background:rgba(red,green, blue, 0.7);
(где rgb — это rgb-цвет вашего 16ричного #555, лень лезть за ним в фотошоп…)

И тогда прозрачность заработает и в ИЕ.

PIE перед скругляемым элементом генерирует пачку неизвестных браузеру элементов (внутри которых кладутся VML элементы), что на практике частенько карежит верстку (к примеру между скругляемым и предыдущим элементами переастаем работать margin).

Фоновые картинки грузятся позднее обычных, это огромный недостаток решения.

ИЕ8, увеличенный масштаб:

есть сомнения, если принцип как у border-radius.htc
В случае AJAX при перерисовке контента с закруглениями, эти закругления остаются на странице ) и жопа…

у каждой картинки рядом с путём должны быть заданы размеры. если путь задаётся в css, то и размеры в css. если в html, то и размеры в html. надо объяснять почему?

исключение — data-uri

также картинкам нужно указывать альтернативное текстовое содержимое

Если для IE все равно придется дополниительно подключать скрипты, то проще пользоваться библиотечкой rocon от С. Чикуенка сразу, без хитростей в разметке.

Как хорошо, что политика относительно скругления углов у меня в компании такова, что все юзеры, кто способен увидеть — видят эти уголки, остальные смотрят на прямоугольные и ничего не теряют при этом.

> она невероятно проста и весит всего 28кб
а с включённым gzip она будет весить ещё меньше, где-то 9.5 кб.

Ещё есть такой кроссбраузерный jQuery плагин: plugins.jquery.com/project/imgr

[irony]всего 28кб[/irony]

А с какой целью у вас в примере
behavior: url(css/PIE.htc);
подключается в общем css файле, если это ie only? Можно же в ie.css вынести

Спасибо за CSS3PIE

Это известный баг, самый элегантный способ, по моему скромному мнению, вот:

$('img.r_corners').wrap(function() {
return '/>';
}).css('opacity', 0);


ну и соответственно для картинки класс r_corners, для обертки image_replacment

Придумал не сам, давно где-то видел в сети, да вот только где не найду вот так с нахрапу — стыд и срам.

в опере не работает