Закругленные уголки с помощью VML и CSS3
Наткнулся на очень интересный вариант решения очень популярной проблемы многих веб-мастеров — закругление блоков.
Для этого варианта закругления используются VML и CSS3.
Решение без картинок, работает во всех Internet Explorer'ах включая 5ый, в Firefox, в Safari, но к сожалению в старых версиях Opera не работает.
VML(англ. Vector Markup Language — язык векторной разметки) разработан фирмой Microsoft для описания векторной графики. ©wikipedia
Не буду тянуть и сразу покажу Вам css код:
v\:roundrect {
color:#FFF;
display:block;
background-color:#000;
padding:20px;
height:100%;
/* Для закругления уголков в остальных браузерах */
-moz-border-radius:10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Для ie */
v\:roundrect {
behavior:url(#default#VML);
/background-color:transparent;
}Наверное вы уже поняли, этот css код для закругления уголков в IE использует VML, а для остальных браузеров использует CSS3.
Теперь код самих блоков:
<!-- Подключаем VML -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<v:roundrect arcsize=".04" fillcolor="#000">
Привет, я закругленный блок!
</v:roundrect>Поясню этот код. Первая строчка подключает VML. Параметр блока arcsize отвечает за радиус закругления, fillcolor отвечает за фон блока.
Не буду утверждать, что этот способ наиболее правильный, но он тоже интересен и имеет право на жизнь.
Если внедрять этот xml:namespace блок то вроде это не валидный xhtml получается. Генерить через яваскрипт тоже некрасиво и излишне
В Опере 9.51 не работает. А так все красиво реализовано.
Работает. Везде работает кроме соответстенно IE6
У меня тоже в Опере 9.5 не работает=(
и у мну не работает. мож какое шаманство надо заюзать?
И в Опере 9.21 тоже не работает..
а в FF вообще жесть. блок сам по себе, текст под блоком сам по себе )
А зачем это надо сейчас, если это не работает на основных броузерах?
чуваки ведь написано что не работает в Опере, чожь постить это по несколько раз )) ?
лучше бы нашли хак чоб заработало
Во-первых сейчас основной браузер это IE и в нем работает.
Во-вторых он работает в Firefox 3 и Safari.
В-третьих важно не количество браузеров в котором это работает, а оригинальность решения.
В IE8 не работает
как по мне это хороший толчек к побуждению в области дальнейшей разработки
Ну с одной стороны я согласен с вами.
Но почему-то ie7, правда запущенный через эмуляцию винды на маке отказался показывать вообще что-либо.
Опера, я так понимаю, тоже не очень хочет это показывать.
В опере вообще не работает, опера не поддерживает не VML, не CSS3, но зато уголки в опере можно сделать с помощью SVG.
Способ, возможно, оригинальный, но редкостно не кроссбраузерно и очень не красиво
В опере и Ие не работает, выходит что способ использовать не комильфо :)
а примерчик можно лицезреть?
Вроде бы вот —
прелестно !
кто может возразить?
VML – очередное «изобретение» Micro$oft?
В новой версии оперы (9.52) не работает.
Угу. Оказалось, что опера так и не начала поддерживать
css3, даже в новых версиях.А я ошибочно полагал, что это не так.
Я об этом уже давно написал.
А товорищ BOLK недавно добавил ещё и SVG, чтобы это и в опере работало.
Угу, уже позже наткнулся на вашу запись, очень полезно было ее прочитать ;-)
Много слышал о VML, но никак даже строчка на глаза не попадалась. ) Увидел наконец на вашем блоге. Очень интересное решение, хотя пользоваться им, конечно, сейчас вряд ли стоит.
Что делать, если у блока, которому мы скругляем углы стоит картинка фоном? Картинка встает фоном всему блоку, а не по границам скругления.
Что-то на блоге не работают у вас категории! Обратите внимание.
прием интересный, но блок получается с рамкой, причем черной, и как я понял, она не убирается и цвет ее не меняется. Иногда в дизайн не вписывается :-(
понимаю, что на момент написания статьи IE8 не был выпущен официально, но в нём не работает данный вариант. Работает только в режиме эмуляции ИЕ7.
в опере только с 10 версии обещают включить поддержку border-radius