Закругленные уголки с помощью VML и CSS3

[akira]

Попробуем source.virtser.net/?

[bO_oblik]

Я им всегда пользовался, но к сожалению, код в <! code> типографируется :-(

А <! pre> не обрабатывает теги.

[JetMaster]

FF 2.0.0.9
Текст лежит сам по себе от блока, ну то есть внеблока

[bO_oblik]

Я пользуюсь 3ей лисой, наверно 2ая лиса не поддерживает CSS3.

[0x62ash]

Так там -moz-border-radius стоит =)

[PiSaiK]

FF 2.0.0.16 Тожесамое. текст вне блока

[elfiki]

2.0.0.16 так же

[karapuz]

из моего парка брацузеров работает только в FF, в opere и konqueror не работает

[karapuz]

ну тоесть в opere блок квадратный а в konqueror нет ни какого блока, просто текст

[0x62ash]

Работает на последней сафари еще

[RuslanDenisenko]

ie7 — работает
ie6 — работает
ie 5.5 — работает
Opera 9.51 — не работает
FF2 — работает криво

Интересно чего вот в опере совсем не работает, css3 поддерживает!?

[Aesthete]

У меня в опере 9.52rc2 работает.

[Exwar]

Я конечно ещё сомневаюсь, но вроде Opera 9.51 не является старой версией? Или имелось ввиду в любых версиях?

[bO_oblik]

Я сам владелец, старой версии Opera, но думал что Opera выше 9.5 уже поддерживает css3, но видимо я сильно ошибался :-(

[Jons]

нЬюансы?

[vadimbelyaev]

Нюансы.

[brmn]

CSS3 хорош, но рановато его на рабочих сайтах использовать. Костылей многовато получится ;)

[proxor]

Но можно заранее добавить штуки вроде тени для текста, или скругленные углы, чтобы, когда он заработает нормально во всех основных браузерах, пользователи были приятно удивлены :)

[steck]

Opera
Версия 9.52
Сборка 10108
Платформа Win32
Система Windows XP

Не пахает. Более новых версий Оперы я пока не знаю.

[quintus]

Opera
Версия 9.50
Сборка 10063
Платформа Win32
Система Windows XP

а я так ждал… ;(

[vyalow]

Opera
Версия 9.51
Сборка 2061
Платформа Linux

Почему-то работает… Точно так же как и в ff3 )

[edelweard]

Сказано же — на старых версия Оперы не работает. А вы тут старьё своё пихаете, да ещё и под Линуксом!
;-)

[jGroger]

Под Линухом это последняя версия Оперы…

[jGroger]

Opera
Version 9.51
Build 2061
Platform Linux

Не работает.

[vyalow]

Ну как же так? В чём же дело? Ваша опера в плохом настроении?

[elfiki]

Это же картинка :)
chernev.ru/wp-content/uploads/jsdhfksdfsd-thumb.gif

[vyalow]

Прошу прощения :(

[NULL_byte]

Ахахаххаха! Пять ))

[jGroger]

каптинка из статьи и у меня работает =))) под всеми версиями Оперы =))))

[nooze]

Ну она разве что в links не работает ))

[nekt]

значит он css3 не поддерживает :)

[steck]

CSS3 — proposed properties supported by OperaNote that these properties are at an early stage of development and may be changed or removed from the specifications at any time. Use them on an experimental basis.

• selectors level 3
• the HSL color model
• partial support for Media Queries
• content applicable on all elements, not just on the :before and :after pseudo-elements
• box-sizing
• opacity
• overflow-x
• overflow-y
• text-shadow, including multiple shadows
• outline-offset
• currentColor
• -o-background-size
• -o-table-baseline
• -o-text-overflow
• nav-up, nav-right, nav-down, nav-left

Взято отсюда

[kulikoff]

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

[FloppyFormator]

Как вариант, можно попробовать SVG и VML.

[elfiki]

Как вариант можно делать смещение блоков. :)
Правда, чем больше радиус нужен, тем больше и блоков нужно :(

[clemencov]

В ИЕ6 данный метод не работает

[clemencov]

Из тех кто минусовал, кто то проверил?

[kostos]

Проверил

[clemencov]

Думаю скорее всего проверка производилась из MultipleIEs либо IETester, по этому поводу приведу одну цитату:

«В очередной раз убеждаюсь, что тестировать нужно только в реальном окружении! Что эмуляторы IE врут безбожно. Забудьте по MultipleIEs и IETester. Поставьте официально бесплатную виртуальную машину от майкрософт с официально бесплатным образом нужной винды и увидите разницу.»

[kostos]

Тестировалось в обычном ИЕ, а не в эмуляторах.

Вы перед тем как написать этот комментарий не задумывались почему столько минусов? И что возможно проблема не у всех остальных, а только у вас?

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

[BACRHR]

«Поставьте официально бесплатную виртуальную машину от майкрософт с официально бесплатным образом нужной винды и увидите разницу»

Разница в том, что у меня (в абсолютно обычном ие6 с windows xp) работает, а у вас нет :)

[tenshi]

а где эту вируальную машину взять?

[dmx]

www.microsoft.com/downloads/details.aspx? FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=en

[fiskus]

а сам-то проверял или просто так ляпнул? :)

[clemencov]

специально для особо неверующих два скрин шота из ИЕ6 из демо страницы.

[clemencov]

извеняюсь ссылки почемуто не сработали
cсылка на скрин — img396.imageshack.us/img396/7246/ie6rc5.png

PS: проверил лично!

[bO_oblik]

У Вас жаба скрипт отключен не работоспособен скорее всего.

[komjah]

Возможно у вас просто фон не применяется. Скопируйте страничку себе и вместо #000 напишите #000000. Сталкивался когда ие игнорировал укороченные записи цветов, причина остается загадкой.

[jodaka]

(закругленный блок) — Привет! я закругленный блок!
(opera 9.51) — Привет тебе, белый текст на черном квадратном фоне!
(konq) — Привет тебе, черный текст на белом фоне!
(webkit/ff3) — ПРЕВЕД, участнег! Клевые у тебя углы
(веб.девелопер) — Ыыыы :)

[kostos]

Из проверенного мной
Работает:
IE 6
IE 7
Safari for Windows

Не работает:
FF 2.0.0.16
Opera 8.54
Opera 9.51

Вывод — хреновый способ! 50% это очень мало

[bO_oblik]

Очень странный метод подсчета (-: Бы бы еще билды указали.

Работает:
IE 5-7
Firefox 3
Safari(webkit)

Не работает:
FireFox 2
Opera

Вот так более логичней.
Мне небыло интересно во скольких браузерах это решение работает, мне было интересно само решение.

[kostos]

Что же тут странного?

IE 6, 7 () — имеют каждый свои особенности, тоесть отображают содержимое по разному, то же самое относится к ff2 и ff3, а так же уж очень разные opera 8 и 9 (про safari под мак и виндовз ничего сказать не могу).

А так как все эти броузеры используются, проверять нужно в каждом и не обобщать.

Вы сделали акцент на том что это работает в IE5 — так вот это как раз не критично, лучше что бы в ff2 работало (его больше используют)

[fiskus]

хм, метод уже довольно старый, и придумал его не тот, кто у вас по ссылке. сейчас постараюсь оригинал найти
p.s.: ага, вот он blog.ad.by/2008/03/nice-rounded-corners-for-ie-safari.html

[bO_oblik]

Возможно и так.

По ссылке, есть достаточно неплохой материал. Спасибо ;-)

[SamDark]

Васильев Никита решил проблему кроссбраузерности:
http://elv1s.ru/files/html+css/vector-corners.html

[Mr_Floppy]

Про Konqueror забыли:

[Mr_Floppy]

Ой, это к следующему комментарию относится

[Mr_Floppy]

Что за ерунда, порядок комментариев меняется o_O

[croatian]

Opera 9.23, увы =\

[grokinn]

В IE и Firefox уголки выглядят по разному, а в опере не работает. Этого достаточно чтобы не использовать метод.

[vladalv]

Мало того — само скругление выглядит коряво

[rimmer333]

В новой Опере тоже не работает

[maggg]

Обалдеть.
Специально искал по Хабру статьи о скруглении краёв и тут на тебе — свежачок.
Повторяться не стану, для меня достаточно того, что этот метод не работает пока корректно в Опере, поэтому использовать на практике его пока рановато.
Впрочем, это не значит, что метод плохой. Просто его время пока не пришло.
Я помню времена, когда многие бились над проблемой кроссбраузерного создания однопиксельной рамки у таблицы, которыми тогда верстали абсолютно все… Время пришло и сегодня для нас это не проблема вовсе.

[pepelsbey]

Только наверное не «наткнулся», а «вот вам перевод заметки Джонатана Снука (Jonathan Snook)».
Так будет честнее, по отношению к автору.

[Delka]

Идею использовать VML для отрисовки закруглений первым предложил enternet ещё 4 марта.

18 июля Евгений Степанищев привёл кроссбраузерный (Opera 9.5, FF 1.5, IE 5, Konqueror и Safari3) код с использованием SVG.

Вы знаете что на хабре есть такой вид топиков — ссылка называется?

Я так понимаю вы всё это закопипастили, даже не удосужившись найти первоисточник, чисто ради того чтоб в конце поставить ссылочку на ваш сайт?

Минусанул карму.

[vadimus]

Есть только три вещи, на которые можно смотреть бесконечно долго, %username%:
— как горит огонь,
— как течет река,
— и как други пытаются решить задачу скругления углов.

[nooze]

я бы №3 перефразировал
— как велосипедостроители пытаются решать мировые проблемы «новыми методами»

[nekt]

ничего — придет время и надо будет решать задачу распрямления углов :)

[Dangelweb]

Не пашет ваш скрипт в опере avoreg.ru/v.php? id=073dc7b9d3a6abdd198a0df2e14fb742

[dpritula]

Привет! Я закругленный блок!

[smalex]

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

когда уже это будет работать без проблем?

[kostos]

Отрисовка векторной графикой в веб — плохой вариант.
Лично использовал 3-4 варианта (без использования изображений), но универсального решения не нашел.

По отношению данного примера, есть как минимум 2 способо, более кроссбраузерного решения.

[nicothin]

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

CSS3 — очень хорошо, но когда еще он будет внедрен…
а когда еще умрет IE6 (великий говнобраузер всех времен и народов)…

в общем, право на жизнь у описанного метода есть, но лишь на жизнь лабораторную, не имеющую пока связи с жизнью реальной.

[spelesto]

ужасная реализация имхо

[Naddaka]

А тем временем вышел IE8 в котором данный пример работать перестал.