Border-radius для img vs Opera

[Softlink]

Привет всем!

Вчера меня озадачили таким вопросом: как скруглить углы для img в Опере. Для тех, кто еще не пробовал такую штуку - будет сюрприз, т.к. Опера на отрез отказывается это делать.

Со скриптами, ясное дело можно все, но меня зацепила проблема, как это сделать без них?

Пошарил в наших интернетах, потом в буржуйских, покопал на dev.opera.com(там они скромно умолчали об этой проблеме), но так и не нашел решения.

Самое простое, что предлагают - это дублировать картинку в бг, а в блоке ее скрывать через visibility:hidden, для того, чтобы размер определялся нужный. Но такой вариант не катит. Не всегда есть возможность вставлять для каждого блока картинку в бг, особенно если они генеряться в cms и не контролируются пользователем.

В общем, я придумал вчера свой вариант и вот что получилось: http://www.alpatriott.ru/works/primer/opera-radius.html

Из плюсов:

1) можно вставлять любую картинку, без\с указанием размеров - она скруглится

2) не надо использовать бэграунд

3) все чисто с точки зрения семантики

Из минусов:

1) нельзя использовать на неоднорном фоне

2)...?

Форумчане, прошу потестить и может подумать о том, как допилить для неоднородного фона (пока я вообще не представляю как это сделать.)

На "мамонтов" пример не рассчитан.

Спасибо.

[psywalker]

А мне вот это решение понравилось: http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/

А вообще тоже интересно, как можно сделать тоже самое, НО, на неоднородном фоне?

[Nekromancer]

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

[psywalker]

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

В Опере? Не верю.

[Softlink]

А мне вот это решение понравилось: http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/

а мне не попался он, значит разными путями искали)

А вообще тоже интересно, как можно сделать тоже самое, НО, на неоднородном фоне?

Еще надо подождать нашу тяжелую артиллерию в лице SelenIT'a и Great Rasha'a(из отпуска)) ), может подскажут чего.

[psywalker]

А мне вот это решение понравилось: http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/

а мне не попался он, значит разными путями искали)

Да, я другой тропинкой пошёл, через старую деревню

А вообще тоже интересно, как можно сделать тоже самое, НО, на неоднородном фоне?

Еще надо подождать нашу тяжелую артиллерию в лице SelenIT'a и Great Rasha'a(из отпуска)) ), может подскажут чего.

Ага, было бы здорово их услышать.

[Nekromancer]

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

В Опере? Не верю.

Thanks for reporting this issue. I have recently fixed it and it will be in an upcoming Opera release. Unfortunately, it's unlikely to make 11.50, but you shouldn't have to wait too long after that.

Yours sincerely,

Leif Arne Storset

Layout developer

Oslo, Norway

Reply to this e-mail to respond to the query.

А мне вот это решение понравилось: http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/

а мне не попался он, значит разными путями искали)

А вообще тоже интересно, как можно сделать тоже самое, НО, на неоднородном фоне?

Еще надо подождать нашу тяжелую артиллерию в лице SelenIT'a и Great Rasha'a(из отпуска)) ), может подскажут чего.

В общем понятно почему Опера не закругляет конечно, если вставить изображение через object/embed будет тоже самое, думаю и с флешем так же. Ну не додумались они сделать скругление бинарных фреймов, чё уж тут

[Softlink]

Nekromancer, у тебя дорожка проторенная, отошли на всякий случай, если не лень.

[psywalker]

Nekromancer,

Хм...странно. Удивлён, если честно. Но раз так, то не мог бы ты отписать им ещё по паре проблем.

1) Одна связана с дробными процентами, которые не пашут в Опере.

2) Другая с прижатием футера к низу экрана, когда при обновлении экрана он остаётся висеть в воздухе.

[Nekromancer]

Может быть, вечером. Если инет дома будет. А так мне ещё нужно в Хром пожаловаться, а то у них баг с градиентом под win7 %)

П.С. Кстати на репорт ответили через 2 с половиной недели.

[Softlink]

А так мне ещё нужно в Хром пожаловаться, а то у них баг с градиентом под win7 %)

Чего там за баг? Покажи

[Nekromancer]

В общем что то типо этого. После прокрутки остаётся чёрная полоска, то есть не обновляется какое то место страницы. Раньше эта полоска была по всей ширине экрана, сейчас кажется обновился браузер. (Сейчас её можно увидеть справа почти внизу) Так же в новых версиях пофиксилось сглаживание в rotate.

[Softlink]

В общем что то типо этого. После прокрутки остаётся чёрная полоска, то есть не обновляется какое то место страницы. Раньше эта полоска была по всей ширине экрана, сейчас кажется обновился браузер. (Сейчас её можно увидеть справа почти внизу) Так же в новых версиях пофиксилось сглаживание в rotate.

Странное дело, у меня вроде нигде не возникало проблем с градиентом. А указывал значения для цветов? Делал по синтексу from>to или через color-stop?

[Nekromancer]

В общем что то типо этого. После прокрутки остаётся чёрная полоска, то есть не обновляется какое то место страницы. Раньше эта полоска была по всей ширине экрана, сейчас кажется обновился браузер. (Сейчас её можно увидеть справа почти внизу) Так же в новых версиях пофиксилось сглаживание в rotate.

Странное дело, у меня вроде нигде не возникало проблем с градиентом. А указывал значения для цветов? Делал по синтексу from>to или через color-stop?

Да сделано по простому, конечно может быть дело и не в градиенте, но градиент был бы самым логичным.

background: #b7c4cf;
background: -moz-linear-gradient(#b7c4cf, #272727);
background: -o-linear-gradient(#b7c4cf, #272727);
background: -ms-linear-gradient(#b7c4cf, #272727);
background: -webkit-gradient(linear, from(#b7c4cf), to(#272727));
background: -webkit-linear-gradient(#b7c4cf, #272727);
background: linear-gradient(#b7c4cf, #272727);

[psywalker]

Может быть, вечером. Если инет дома будет.

Спасибо, буду тебе признателен очень.

[SelenIT]

Ну какая из меня тяжелая артилерия... Вот максимум, на что меня хватило. Очевидные минусы — требуется задание размеров в CSS и повторное указание пути к картинке там же (фокус с background: url(attr(src)); у меня почему-то не удался). Зато на неоднородном фоне работает

К тому же, ЕМНИП, где-то видел слухи, что content для любого элемента собираются из CSS3 убрать и в Опере, соотв-но, прикрыть. Одна надежда, что к тому моменту и исходный баг пофиксят... Но буду рад подтверждениям, что это мне лишь показалось

[Softlink]

Ну какая из меня тяжелая артилерия... Вот максимум, на что меня хватило. Очевидные минусы — требуется задание размеров в CSS и повторное указание пути к картинке там же (фокус с background: url(attr(src)); у меня почему-то не удался). Зато на неоднородном фоне работает

Эх, вся надежда на тебя была Не скромничай, ты, да Great Rash на выдумки горазды. Но тут, наверное, и правда невозможно сделать для неоднородного фона. Будем ждать пока пофиксят этот баг. Даже ИЕ9 послушно и хладнокровно отрезал углы у картинки, а Опера подкачала.

[SelenIT]

Так мой пример как раз на неоднородном фоне работает вроде, только с другими ограничениями... разве нет?

[psywalker]

Ну какая из меня тяжелая артилерия... Вот максимум, на что меня хватило. Очевидные минусы — требуется задание размеров в CSS и повторное указание пути к картинке там же (фокус с background: url(attr(src)); у меня почему-то не удался). Зато на неоднородном фоне работает

Хаа, прикольно))

Ну какая из меня тяжелая артилерия... Вот максимум, на что меня хватило. Очевидные минусы — требуется задание размеров в CSS и повторное указание пути к картинке там же (фокус с background: url(attr(src)); у меня почему-то не удался). Зато на неоднородном фоне работает

Эх, вся надежда на тебя была Не скромничай, ты, да Great Rash на выдумки горазды. Но тут, наверное, и правда невозможно сделать для неоднородного фона. Будем ждать пока пофиксят этот баг. Даже ИЕ9 послушно и хладнокровно отрезал углы у картинки, а Опера подкачала.

Да Опера много где уже, подкачала. И самое интересное, что когда выйдет ИЕ11 или ИЕ12, то Опера 100% будет самым бажным и хреновым браузером. У неё багов очень много, причём некоторые настолько старые, что ппц. И при этом исправлять они их не планируют к сожалению. Сколько не жалуйся, бесполезно всё.

Так мой пример как раз на неоднородном фоне работает вроде, только с другими ограничениями... разве нет?

Да, работает.

[Softlink]

Так мой пример как раз на неоднородном фоне работает вроде, только с другими ограничениями... разве нет?

Ну да, работает. Это как раз то, о чем я писал сразу, что везде предлагают подмену картинки бэкграундом. Только выполнено несколько иначе. А вот если бг убрать, то все, капец

Изначально мне еще ставили задачу, что картинку нельзя заталкивать в бг.

[psywalker]

Так мой пример как раз на неоднородном фоне работает вроде, только с другими ограничениями... разве нет?

Ну да, работает. Это как раз то, о чем я писал сразу, что везде предлагают подмену картинки бэкграундом. Только выполнено несколько иначе. А вот если бг убрать, то все, капец

Изначально мне еще ставили задачу, что картинку нельзя заталкивать в бг.

Да, видимо решения на данный день ещё не существует. А если допустим взять JS, то чем бы он помог?

[Vlad]

На JS можно автоматом картинку в бакраунд засовывать, а саму её прятать.

[psywalker]

На JS можно автоматом картинку в бакраунд засовывать, а саму её прятать.

Ну да, логично. Вот пожалуй самый надёжный и лучший вариант. Я бы выбрал именно его.

[SelenIT]

А почему всё-таки не работает url(attr(src))? Буду благодарен за любую наводку!

[psywalker]

А почему всё-таки не работает url(attr(src))? Буду благодарен за любую наводку!

Да может потому что новый ещё?