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

    jsdhfksdfsd

    Наткнулся на очень интересный вариант решения очень популярной проблемы многих веб-мастеров — закругление блоков.
    Для этого варианта закругления используются 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 отвечает за фон блока.

    Не буду утверждать, что этот способ наиболее правильный, но он тоже интересен и имеет право на жизнь.

    Посмотреть демо
    Прочитать статью со всем нюансами

    Подписаться на заметки Чернева.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 80

      –1
      Попробуем source.virtser.net/?
        –1
        Я им всегда пользовался, но к сожалению, код в <! code> типографируется :-(

        А <! pre> не обрабатывает теги.
        +3
        FF 2.0.0.9
        Текст лежит сам по себе от блока, ну то есть внеблока
          –13
          Я пользуюсь 3ей лисой, наверно 2ая лиса не поддерживает CSS3.
            +1
            Так там -moz-border-radius стоит =)
            0
            FF 2.0.0.16 Тожесамое. текст вне блока
              +2
              2.0.0.16 так же
              +2
              из моего парка брацузеров работает только в FF, в opere и konqueror не работает
                0
                ну тоесть в opere блок квадратный а в konqueror нет ни какого блока, просто текст
                  0
                  Работает на последней сафари еще
                    +1
                    ie7 — работает
                    ie6 — работает
                    ie 5.5 — работает
                    Opera 9.51 — не работает
                    FF2 — работает криво

                    Интересно чего вот в опере совсем не работает, css3 поддерживает!?
                      0
                      У меня в опере 9.52rc2 работает.
                    +9
                    Я конечно ещё сомневаюсь, но вроде Opera 9.51 не является старой версией? Или имелось ввиду в любых версиях?
                      –10
                      Я сам владелец, старой версии Opera, но думал что Opera выше 9.5 уже поддерживает css3, но видимо я сильно ошибался :-(
                      –5
                      нЬюансы?

                      0
                      CSS3 хорош, но рановато его на рабочих сайтах использовать. Костылей многовато получится ;)
                        +2
                        Но можно заранее добавить штуки вроде тени для текста, или скругленные углы, чтобы, когда он заработает нормально во всех основных браузерах, пользователи были приятно удивлены :)
                        +2
                        Opera
                        Версия 9.52
                        Сборка 10108
                        Платформа Win32
                        Система Windows XP

                        Не пахает. Более новых версий Оперы я пока не знаю.
                          –5
                          Opera
                          Версия 9.50
                          Сборка 10063
                          Платформа Win32
                          Система Windows XP

                          а я так ждал… ;(
                            –2
                            Opera
                            Версия 9.51
                            Сборка 2061
                            Платформа Linux

                            Почему-то работает… Точно так же как и в ff3 )
                              +1
                              Сказано же — на старых версия Оперы не работает. А вы тут старьё своё пихаете, да ещё и под Линуксом!
                              ;-)
                                0
                                Под Линухом это последняя версия Оперы…
                                +1
                                Opera
                                Version 9.51
                                Build 2061
                                Platform Linux

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

                                  В опере так
                                    +2
                                      +1
                                      Прошу прощения :(
                                        +4
                                        Ахахаххаха! Пять ))
                                      +7
                                      каптинка из статьи и у меня работает =))) под всеми версиями Оперы =))))
                                        +2
                                        Ну она разве что в links не работает ))
                                          0
                                          значит он css3 не поддерживает :)
                                +1
                                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
                                Взято отсюда
                                  +1
                                  Много всяких недометодов придумали для скругления уголков. Но все же реально рабочим сейчас является только использование картинок. Все остальное — чисто приколоться и забыть.
                                    –3
                                    Как вариант, можно попробовать SVG и VML.
                                      +1
                                      Как вариант можно делать смещение блоков. :)
                                      Правда, чем больше радиус нужен, тем больше и блоков нужно :(
                                      –4
                                      В ИЕ6 данный метод не работает
                                        0
                                        Из тех кто минусовал, кто то проверил?
                                          +1
                                          Проверил
                                            –2
                                            Думаю скорее всего проверка производилась из MultipleIEs либо IETester, по этому поводу приведу одну цитату:

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

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

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

                                                Разница в том, что у меня (в абсолютно обычном ие6 с windows xp) работает, а у вас нет :)
                                                  –2
                                                  а где эту вируальную машину взять?
                                            –5
                                            а сам-то проверял или просто так ляпнул? :)
                                              0
                                              специально для особо неверующих два скрин шота из ИЕ6 из демо страницы.
                                                +1
                                                извеняюсь ссылки почемуто не сработали
                                                cсылка на скрин — img396.imageshack.us/img396/7246/ie6rc5.png

                                                PS: проверил лично!
                                                  –26
                                                  У Вас жаба скрипт отключен не работоспособен скорее всего.
                                                    0
                                                    Возможно у вас просто фон не применяется. Скопируйте страничку себе и вместо #000 напишите #000000. Сталкивался когда ие игнорировал укороченные записи цветов, причина остается загадкой.
                                              +15
                                              (закругленный блок) — Привет! я закругленный блок!
                                              (opera 9.51) — Привет тебе, белый текст на черном квадратном фоне!
                                              (konq) — Привет тебе, черный текст на белом фоне!
                                              (webkit/ff3) — ПРЕВЕД, участнег! Клевые у тебя углы
                                              (веб.девелопер) — Ыыыы :)
                                                +3
                                                Из проверенного мной
                                                Работает:
                                                IE 6
                                                IE 7
                                                Safari for Windows

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

                                                Вывод — хреновый способ! 50% это очень мало
                                                  –6
                                                  Очень странный метод подсчета (-: Бы бы еще билды указали.

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

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

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

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

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

                                                    Вы сделали акцент на том что это работает в IE5 — так вот это как раз не критично, лучше что бы в ff2 работало (его больше используют)
                                                  0
                                                  хм, метод уже довольно старый, и придумал его не тот, кто у вас по ссылке. сейчас постараюсь оригинал найти
                                                  p.s.: ага, вот он blog.ad.by/2008/03/nice-rounded-corners-for-ie-safari.html
                                                    –17
                                                    Возможно и так.

                                                    По ссылке, есть достаточно неплохой материал. Спасибо ;-)
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                      +3
                                                      Васильев Никита решил проблему кроссбраузерности:
                                                      http://elv1s.ru/files/html+css/vector-corners.html
                                                        0
                                                        Про Konqueror забыли:
                                                        Free Image Hosting at www.ImageShack.us
                                                          0
                                                          Ой, это к следующему комментарию относится
                                                            +1
                                                            Что за ерунда, порядок комментариев меняется o_O
                                                          0
                                                          Opera 9.23, увы =\
                                                          +1
                                                          В IE и Firefox уголки выглядят по разному, а в опере не работает. Этого достаточно чтобы не использовать метод.
                                                            0
                                                            Мало того — само скругление выглядит коряво
                                                            0
                                                            В новой Опере тоже не работает
                                                              0
                                                              Обалдеть.
                                                              Специально искал по Хабру статьи о скруглении краёв и тут на тебе — свежачок.
                                                              Повторяться не стану, для меня достаточно того, что этот метод не работает пока корректно в Опере, поэтому использовать на практике его пока рановато.
                                                              Впрочем, это не значит, что метод плохой. Просто его время пока не пришло.
                                                              Я помню времена, когда многие бились над проблемой кроссбраузерного создания однопиксельной рамки у таблицы, которыми тогда верстали абсолютно все… Время пришло и сегодня для нас это не проблема вовсе.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                  +3
                                                                  Только наверное не «наткнулся», а «вот вам перевод заметки Джонатана Снука (Jonathan Snook)».
                                                                  Так будет честнее, по отношению к автору.
                                                                    +5
                                                                    Идею использовать VML для отрисовки закруглений первым предложил enternet ещё 4 марта.

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

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

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

                                                                    Минусанул карму.
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                      +6
                                                                      Есть только три вещи, на которые можно смотреть бесконечно долго, %username%:
                                                                      — как горит огонь,
                                                                      — как течет река,
                                                                      — и как други пытаются решить задачу скругления углов.
                                                                        –2
                                                                        я бы №3 перефразировал
                                                                        — как велосипедостроители пытаются решать мировые проблемы «новыми методами»
                                                                          +1
                                                                          ничего — придет время и надо будет решать задачу распрямления углов :)
                                                                          +1
                                                                          Не пашет ваш скрипт в опере avoreg.ru/v.php? id=073dc7b9d3a6abdd198a0df2e14fb742
                                                                            –2
                                                                            Привет! Я закругленный блок!
                                                                              –2
                                                                              охреневаю от глубины проблем стоящих перед верстальщиками (или кто как себя величает).

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

                                                                                По отношению данного примера, есть как минимум 2 способо, более кроссбраузерного решения.
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    0
                                                                                    прочел комменты. на способ забил. неюзабельно — гемора куда больше, чем если одним спрайтом сделать.

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

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

                                                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                        Самое читаемое