Демонстрация свойства border-radius

    Нет-нет, я не буду вам показывать простые закруглённые прямоугольники, которые порядком приелись. Но те же самые простые закруглённые прямоугольники могут складываться во вполне осмысленные фигуры. У меня они сложились в слово «twitter».

    Работает только в браузерах на движках Gecko и Webkit.

    Выглядит так:
    image


    А вот так на других, не так симпатично, но читабельно:
    image

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

    Все браузеры, в той или иной мере, дразнят нас теми свойствами, которые прямо сейчас использовать если и можно, то они не критичны. А критичные свойства CSS3 использоваться сейчас противопоказано, когда тот же border-radius не стесняются использовать многие, в том числе и я.

    Я вполне понимаю, что CSS3 ещё не оформлено должным образом, и ругать браузеры за то, что они как хотят, так и вертят вызовом свойства border-radius, ну понятное дело, речь о -moz- и -webkit-. Ну а атрибуты свойства — так и вовсе рознятся, но тут всё более серьёзно упирается в неготовность спецификации CSS3.

    И вот что непонятно, почему такая прогрессивная Opera не научила свой движок рендерить border-radius? Или я плохо искал, и что-то пропустил? Даже 10beta не рендерит — чем меня сильно расстроила.

    Как вы думаете, стоит ли использовать некритичные для пользователей прелести CSS3, игнорируя тех, кто сидит на других браузерах, естественно, не в ущерб функционалу?

    Ладно, хватит о теории, перейдём к практике. Пару дней назад, отдыхая с коллегой у него дома, и откровенно сказать, маясь со скуки, решили убить время тем. что бы наверстать слово «twitter», естественно используя border-radius.

    Код можно ещё долго оптимизировать, уменьшить количество слоёв, почистить и оптимизировать стили, и так далее, и тому подобное + выстроить код и стили логично. Кстати, если извратиться, то можно сделать и кроссбраузерную версию этой верстки, но это на любителя, у меня такой цели не было. Тем более, это в разы усложнит вёрстку, или, если пойти иным путём, будет подвешивать нежные IE6 на скромных, по мощности, компьютерах.

    Ну ещё. из общих проблем, есть проблемы с масштабированием, причём всё равно, в каких величинах верстать. Если будет время — решу проблему.

    Ну а в действии посмотреть вы можете на этой странице — http://absolvo.ru/tmp/18/ — там и код, и стили — ну всё что надо в общем.

    А может стоит сделать сервис, который будет генерировать такие буквы, наверстать пару шрифтов — будет симпатично и бестолково — зато может какому-нибудь маргиналу понравиться.

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

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

      +6
      на букве «e» вы немного схалтурили =)
        +2
        Согласен, да и «w» далеко от идеала.
        +2
        по поводу использования «некритичных прелестей CSS3» — думаю вполне можно. Пусть и 10-ая опера не поддерживает, но все равно это вопрос времени. Трешка все равно придет. Здесь нет неразберихи как в будущем языке разметки для веба: HTML 5 или XHTML 2 (или я что-то пропустил?).
          +4
          Я боюсь, что полноценно использовать CSS3 мы сможем нескоро, IE только-только, с выходом IE8, начал поддерживать CSS2.
            +3
            Дим, с оперой все проще. По версии которую я слышал (кстати на хабре) внутренние билды с бордер радиусом есть, он работает. Выпускать на свет их не хотят из-за некоторых разногласий в поведении вебкита и геко по этому вопросу. Грубо говоря Опера не готова принять ни чью сторону пока не выйдет четкая спецификация. Что за разногласия в поведении, не спрашивай, я не вдавался в подробности :) Для меня важнее что на свойство не забито, оно есть и в нужный момент его просто включат :)
              +1
              Я согласен с тобой, потом его бы включили по спецификации, а сейчас и с -o- было бы здорово.
                +3
                Это все-таки увеличивает количество реализаций ^^ и оттягивает момент принятия окончательного решения из-за этого (как будет в случае с тегом видео, для которого не прописан кодек, и разные браузеры используют разные — а значит, будет война форматов).

                Конкретно про разногласия о рендере тоже сказать ничего не могу, но наглядно видна разница в том, как они скругляют (впрочем, это даже хорошо, в некотором смысле) :)

                Также есть мизерная проблема в именовании www.css3.info/preview/rounded-border/ и проблема с разной размерностью в скруглении одного уголка (надо использовать border-top-left-radius: 5px 20px; вместо того чтобы прописать border-radius с 8 значениями)
                +2
                Вот приблизительная разница в рендеренге (кликабельно)
                free image host
                  0
                  Да, в фаерфоксе выглядит волшебно :)
            • НЛО прилетело и опубликовало эту надпись здесь
                0
                Ну развиваться он может и не будет, но версия XHTML5 — эквивалентная HTML5 плюс соответствующая XML естественно будет.
                • НЛО прилетело и опубликовало эту надпись здесь
              0
              извращение
                +3
                Демонстрация. :)
                  0
                  ага… я тоже когда-то такими демонстрациями занимался — даже написал прогу преобразующую bmp в
                    0
                    Демонстрация извращения :)
                  0
                  За Оперу действительно обидно, такой прогресивный браузер, Асид тест на 100% проходит, а бордер-радиус так и не научилась использовать. Если бы и опера умела так делать, на ие можно было бы спокойно положить, а так приходится извращаться.
                    0
                    честно говоря, вместо «ложить на IE» — я был бы более рад если бы мелкомягкие это научились это делать в IE — вот это было бы действительно круто.

                    А за оперой не постоит, они и так семимильными шагами развиваются, что не неделя — новая функциональность.
                      +6
                      Сейчас буду жаловаться: %)

                      А еще Опера до сих пор считает проценты integer'ами. Это дико бесит, невозможно быстро создать три равные колонки из дивов, задав им 33.3%, дробные части отбрасываются (даже не округляются).

                      Еще иногда сильно необходимо задать разные overflow для высоты и ширины, это она тоже не умеет. В то время как это есть у всех, включая шестого осла (overflow:[x] [y],overflow-x,overflow-y).

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

                      PS: Опероводы, — у вас замечательный браузер ;) Это так, крик души, приходится много сталкиваться со сложной версткой и манипулированием кучей элементов через JS.
                        +2
                        > Еще иногда сильно необходимо задать разные overflow для высоты и ширины
                        С 9.5 можно.

                        По скорости анимации, да, иногда медленее чем остальные, а иногда фаерфокс медленнее, и почти всегда ИЕ сильно медленнее. Но в целом не хуже остальных.
                          0
                          >> Еще иногда сильно необходимо задать разные overflow для высоты и ширины
                          >С 9.5 можно.

                          это как? Они подперли что то свое? Даже 10 бета до сих пор не понимает классический синтаксис.
                          • НЛО прилетело и опубликовало эту надпись здесь
                      +5
                      за старание — 5, за верстку — 5+, за букву «е» заберу "+" от «5+», которую дал за верстку :)
                      молодец!
                        0
                        за комент тоже +5) круто!
                        +1
                        давно использую прелести ксс3, где это возможно (бордер-радиус, техт-шадов и так по мелочи) и поддерживается. самое, наверное, более нужное свойство ксс3 это сабж, весьма жалко что опера (об ие и не мечтаем) его не держит :(
                          0
                          Для оперы можно применять SVG, в котором закругленны уголки.
                            +3
                            Ага, а для ie VML! Только смысл стрмится к нулю.
                              +1
                              Не так. Для IE — VML, для остальных — SVG. Тогда всё упростится.
                              • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            а скрытый счётчик LI для проверки хабраэффекта? :)
                              0
                              Конечно — интересно же, сколько раз просмотрят демку. Ну а скрытый, хоть и нарушает правила, но что бы глаза не мозолила хабралюдям, решил убрать.
                              +1
                              не о технологии вообще, а о примере в частности
                              страница весит 11,4 Кб
                              принтскрин надписи в gif — 6,7 Кб и, о чудо!, он одинаково выглядит во всех браузерах
                              ;)
                                0
                                ради справедливости «взвесил» только стили: 8,8 Кб
                                  0
                                  Если стили оптимизировать то получим 7069 байт
                                    0
                                    Более того, их можно оптимизировать не только убиранием табов да переносом строк, но и группировкой стилей.
                                      0
                                      вообще-то смысл моего комента был не в оптимизации, а простоте и надежности использования картинки в подобном случае :)
                                        0
                                        В любом случае, у меня даже мысли не стояло заменить картинки подобным извратом видом скальной живописи.
                                    0
                                    Ради справедливости, кстати, нужно сохранять принтскрин в png ибо пример можно перенести на любой фон.
                                      0
                                      Gif, между прочим, тоже прозрачность поддерживает.
                                        0
                                        Но не альфа прозрачность :) А для хороших плавных уголков нужна альфа.
                                    +1
                                    Ради справедливости же стоит отметить что любой уважающий себя сервер сжимает передаваемый контент Gzip-ом.
                                    Степень сжатия картинки и текста отличается примерно на порядок
                                    0
                                    ваша визитка —… :)
                                      0
                                      Классно стили у дивов назыаются
                                        0
                                        а почему некоторые буквы разной высоты? должны же быть одинаковой ;)
                                          0
                                          По хорошему да, надо привести всё к одной высоте и по ширине кое-что поправить. Спасибо, что заметили.
                                            0
                                            Выровнял ^_^
                                              +1
                                              молодец
                                              хорошая работа, хороший опыт!
                                              думаю, многим будет полезна эта статья, только жаль, что не все браузеры это поддерживают… а можно было бы так классно оформлять блоки всякие
                                                0
                                                Сколько по времени у вас это заняло?
                                                  0
                                                  Именно выровнять? Хм — около пяти-семи минут.

                                                  Вот так — floomby.ru/content/mxeCvw1keU/ — эта задача становится и вовсе простой (красные линии — это дивы с красным фоном, на необходимых высотах).
                                                    0
                                                    Прошу прощения, я имел в виду все вместе взятое.
                                                      0
                                                      Ну вот тут точно не скажу, так как я прерывался — положим около четырёх часов, это от «нарисовать на бумажке», но скриншота сверху.
                                                        0
                                                        Как демонстрация возможностей неплохо. Но думаю для разработки пока не подходит. Как считаете?
                                                          0
                                                          Конечно рано — так, поиграться — не более.
                                              –1
                                              доставило. спасибо

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

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