Делаем закругленные уголки с помощью псевдоэлементов: before и: after

    Внимание! Это все устарело, но публикацию не удаляю, чтобы все знали как мы мучались в 2007 году из-за IE6 :-)

    Задача: сделать врезку с закругленными уголками с минимумом html-кода.


    Все наверное сталкивались с врезками с закруглёнными уголками. Поскольку множественный бекграунд современные браузеры (кроме Safari) не поддерживают, то такие вещи приходится делать несколькими элементами, вложеными друг в друга. Есть способ уже сейчас избежать подобных вещей.
    html-код:
    Текст



    css-код:
    Задаем голубой фон врезки:
    .incut{background: #dff7ff;padding: 20px;}

    Четыре уголка навешиваем на элементы :before и :after
    .incut:before{
    content:url();
    background: url(i/border_tr.gif) no-repeat 100% 0;
    height: 7px;
    display: block;
    margin: -20px -20px 13px -20px;
    }
    .incut:after{
    content:url();
    background: url(i/border_br.gif) no-repeat 100% 0;
    height: 7px;
    display: block;
    margin:13px -20px -20px -20px;
    }

    Работает во всех современных броузерах кроме ie (проверял в Firefox 1-2 Opera 7-9,Safari 3). Для ie аналогичный функционал навешиваем с помощью js (лучше помещать в отдельный файл css – специальный для ie):
    .incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '' + this.innerHTML + '') : '');}

    Работает в ie6-7. При отключеных скриптах пользователь ie увидит голубой фон у врезки, т.е. ничего не сломается.

    В результате имеем «пуленепробиваемую» врезку с минимум html-кода. Заметьте, что вы можете указать ещё одну картинку у врезки, которая будет её бекграундом.

    Применяя эти псевдоэлементы аналогичным образом можно значительно увеличить семантичность верстки. Всё зависит от вашей фантазии.

    UPD:
    Примеры смотреть тут.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 146

      +14
      Очень элегантное решение, вот только ие как всегда все портит :(
        0
        Портит, но не совсем. Костыли всё-таки есть =)
        Думаю в данном случае вполне допустимы.
          +3
          Да ну это не то... Отдельный css под ie и содержимое этого самого css портит всю простоту и красоту решения. А если бы этот нехитрый метод работал везде... Но это уже из разряда мечтаний и молитв к разработчикам ослика =)
            0
            жто наступит тогда, когда МС начнет признавать не свои стандарты...
              –2
              С чего вы взяли, что есть стандарты на CSS? Приведите ссылку на них ;)
              С чего вы взяли, что в разработке спецификации не было MS CSS? Опять же был бы рад ссылке на беспочвенное утверждение.
              В одном предложении 2 существенные ошибки...
                0
                ясное дело, что *стандарта* не существует, но w3c тоже ведь не проходимцы и было бы выгодно всем, если бы *все* веб браузеры поддерживали одну спецификацию...

                конечно проще закрыть глаза на проблему и не признавать ее, нежели единожды решить... но куда девать маркетинг? каким еще "магическим" способом заставить пользователей "сидеть" на своей поделке?.. приведите хоть один (не промоушен) сайт, скажем, опера-онли...

                не считайте себя умнее тысяч веб-разработчиков и веб-дизайнеров, для которых этот продукт даже не кость в горле...
                  0
                  А кто по вашему w3? Марсиане, или кристально честные специалисты или высшая сила? Вы читали цели и задачи w3? Если читали, то глупых вопросов и криков было бы меньше...

                  С чего вы взяли, что IE поделка? На поделке сидит > 2/3 пользователей. Что за тон в отношении компаний? Вы хоть раз занимались поддержкой продукта имеющего > 10000 копий(я не говорю уже о нескольких десятках миллионов продуктов основаных на движке IE)? Вы представляете сколько будет стоить переделки всех систем использующих движок IE? Мы не в состоянии собрать даже 0.00001% этой суммы. А кричите - долой\бойкот.

                  Ни кому он ни кость, поскольку, тысячи веб-разработчиков, в отличии, от кричащих, прекрасно знают все 'особенности' IE и способы как решать эти проблемы. MS прекрасно общается с ними. Попробуйте немного почитать их сайт.Не будте смешны в их глазах с криками о бойкоте.

                  За '-' отдельное спасибо. Это самый самый сильный довод с вашей сторон ;). Попробуйте научиться вести дискуссию, хотя бы уважая собеседников.
                    0
                    С чего у вас такая истерика? Похоже, что "кричаший" здесь пока вы один...

                    > Это ваше право считать нормальным то количество костылей и подпорок, которые заставляют ие показывать так, как этого хочет дизайнер

                    > На поделке сидит > 2/3 пользователей.

                    Это вообще никак не характеризует программу... На ВАЗ тоже много народу ездит, но лучше он от этого не становится.

                    > Вы представляете сколько будет стоить переделки всех систем использующих движок IE?

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

                    > Что за тон в отношении компаний?

                    ммм... а каким должен быть тот? и что за тон у меня?

                    > Не будте смешны в их глазах

                    Буду стараться, спасибо
                0
                он (МС) и свои-то иногда не соблюдает...
                +3
                Красоту решения не особо портит если хорошо понять, что написано для ie.
                Попробую разобрать по полочкам.
                zoom:1; - исправляет баг с лайот для ие, где-то на хабре была статья про это. Это универсальный способ правки многих глюков для ie.
                behavior фактически искуственно добавляет требуемые псевдоэлементы для ie. Наша задача: добавить два элемента - перед основным содержимым элемента и после, для этого используем this.innerHTML=Элемент1+this.innerHTML+Элемент2. Но добавить это нужно всего один раз, поэтому используем expression: для элемента искусственно вводим некий атрибут isInserted. Если этот элемент еще неопределен (!this.isInserted=true), то задаем этому атрибуту значение (this.isInserted=(что-то определенное)), если уже определен (!this.isInserted!=true), то ничего не делаем. Как видно Элемент1 и Элемент2 в точности соответствуют псевдоэлементам :before и :after
                  0
                  Лучше использовать zoom: expression(runtimeStyle.zoom=1, innerHTML = ...);

                  В этом случане не вводится переменная и не проверяется постоянно.
              0
              Я бы сказал, что в данном случае такое решение не очень интересно, ввиду того, что есть решения, которые все браузеры поддерживают. А про ИЕ - это отдельный разговор. Да и вообще, пора уже как стандарт использовать закругления. Вроде они в CSS3 есть.
                0
                а можно ссылочку на такое решение? div content /div
                  0
                  самое смешное, что когда закругления станут стандартом они перестанут быть модными, и все будут делать что-то другое
                    0
                    почему вы так считаете?
                      0
                      Закон жизни. Вещь, которая есть уже у всех - по определению немодна.
                        0
                        сейчас это уже очень модная фишка, как мне кажется
                      0
                      Утверждение верно только в тех случаях, когда тенденция не несет практической пользы. В данном случае возможно это и не так (Мне попадались результаты исследований, сводившиеся к тому, что текст лучше запоминается читателем в в блоке со скругленными краями или в окружности, нежели в прямоугольнике. Правда авторететность авторов под вопросом. Да и они объяснили это тем, что это сильно контрастирует на фоне личного опыта большинства людей. Так как блоки текста вписаные в прямоугольник гораздо более распространены. )
                  +1
                  Очень здорово! Прямо сейчас попробую на текущем проекте. Спасибо!
                    –3
                    Полный ништяг
                      –6
                      Удобно, конечно, но зачем использовать хаки, когда можно их не использовать? Есть способы сверстать то же самое не менее "непробиваемым" образом, но более надёжно. Вот тут — http://www.cssplay.co.uk/boxes/ — обвыбираться можно.

                      Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?
                        +1

                        Вот выпустит через пару лет Майкрософт какой-нибудь нормальный браузер, или пользователь юзает браузер, не умеющий ни :after, ни expression в цссках — что будем делать?

                        Псевдоэлементы :after и :before — стандартные. И если вдруг случится чудо и Microsoft выпустит «нормальный» браузер, поддерживающий стандарты, то все будет просто хорошо =)
                        У пользователя с таким браузером просто будет блок одного цвета и все.
                        Лично я не могу сказать, что вот этот способ превосходит метод, описанный выше. Просто сравните html-код.
                          –3
                          Я говорю о том, что если выйдет нормальный браузер от МС, то он будет поддерживать И :after, И экспрешшены. Вы сможете гарантировать в таких условиях работоспособность данного примера?
                            0
                            Лично я да, могу. А вы?)
                              0
                              Эти уголки по идее поверх элементов :before и :after лягут, так что будет всё ок.
                              Можно подключать css-файл для ie не выше 7.0
                                –1
                                А можно использовать, например, вот такой — http://www.cssplay.co.uk/boxes/snazzy.html — подход, и не заботиться ни о будущих версиях браузеров, ни о браузерах, которые не поддерживают :after, ни об проблемах с яваскриптами, которые у некоторых пользователей убивают эксплорер, а у других начинается мерцание всей страницы.

                                Этот вариант валиден, работает везде, работает с отключёнными картинками и яваскриптом. Да, он захламляет код по сравнению с обсуждаемым вариантом, но без жертв в нашей профессии никак. Лично мне четыре-пять строк в коде не мешают.
                                  0
                                  Товарищ, это просто жесть. Одним словом...
                                    0
                                    Это нормальное вполне нормальное решение.
                                    Которое, в отличии от описанного в статье работает без всяких ограничений. И нечего ставить "-" если вы не в теме...
                                0
                                если правильно подключать css — через условные комменты, можно в них написать "lte IE7" (ну или с пробелом, не уверен), то 8 и более IE уже не будут этот стиль грузить
                                  0
                                  Да ладно вам спорить, не выйдет никогда нормальный браузер от МС. Если бы им это было надо, давно бы уже сделали.
                                  0
                                  они там один хуже другого… вот этот способ при масштабировании в FF глючит жутко… зажал я ctrl, покрутил колесом мыши вверх, да и закрыл
                                  а то что автор поста предлагает — вполне ничего
                                    0
                                    Уважаемый, приведите ссылку на "стандарты"...
                                  –3
                                  Хорошее решение, но мне все-таки больше нравится jQuery для создания углов. jOuery более универсально, а соответственно проще.
                                    +2
                                    А как же JS, который не у всех работает?
                                      0
                                      Безотносительно к jQuery и закруглённым уголкам, мне представляется, что такой вопрос уже становится неактуальным. Хотя я и сторонник того, чтобы сайт смотрелся хорошо или хотя бы приемлемо везде, но сейчас, боюсь, уже можно не принимать во внимание пользователей без Javascript'а: при таком распространении Ajax, визуальных JS-эффектов и прочего JS нужен почти для любого сайта.
                                        0
                                        Вопрос весьма актуален.
                                        Многие движки по генерации превьюшек не понимают JS, зато понимают стили и бекграунды.
                                        Уж лучше код будет на 2 Кб больше, но валидно и однозначно отображаться везде.
                                          0
                                          Но в IE без JS он ведь не будет отображаться.

                                          А что такое движок по генерации превьюшек? (Простите, если вопрос глупый ;) )
                                            0
                                            Если бекграунд реализован через стили и/или таблицы, дивы, то он будет отображаться и без JS.

                                            Генератор превьюшек - это программа, генерирующая уменьшенный вид страницы и отображающая его в виде графического файла. Например, расширения для огненного лиса и Google: http://ackroyd.de/googlepreview/
                                      +1
                                      Согласен.
                                      По сравнению с multiple backgrounds (поддерка только в Safari) — это всё костыли, поэтому играем по правилам военного времени.
                                        0
                                        Подскажите решение у jQuery, которое так делает?
                                        Если просто wrap, то не интересно.
                                          0
                                          Уже готового решения у jQuery не видел, у меня есть скрипт на jQuery который добавляет в том числе и закругления. Для создания закруглений создаются дополнительные дивы для которых указывается свой back-ground. Примеры есть тут
                                      +1
                                      Небольшое дополнение: для лисы также можно использовать -moz-border-radius: Npx;
                                        0
                                        Можно, но что-то выглядит оно как-то не очень, нет антиальязинга, заметны лесенки из пикселей, давно не смотрел правда, может что-то поменялось?
                                        P.S.:
                                        И в Сафари можно так: -webkit-border-radius: 10px; =)
                                          0
                                          Да нет, ничего не поменялось.
                                          Анти-алиасинга не было и нет, увы :(
                                          Вообще, конечно, странно и обидно, что до сих пор браузеры не научились делать качественные элементарные графические "рюшечки" вроде -moz-border-radius + anti-aliasing.
                                            0
                                            -webkit-border-radius: 10px;
                                            -moz-border-radius

                                            это черновые реализации css3
                                        0
                                        А реально сделать точно так же, но с перламутровыми пуговицами с рамкой по краям 1px (на gif пусть такая окантовка уже есть)?
                                          +1
                                          Nifty cube - более громоздкий, но более работающий вариант.
                                            0
                                            я вот тоже в первую очередь про него подумал, прочитав из заголовка про скруглённые углы.
                                              0
                                              Не понравился за неумение делать бордюры... А это принципиально :)
                                              0
                                              Полностью поддерживаю. Очень хорошая реализация. Правда в Опере бывают сложности, если фон не белый. Это можно обойти, добавив вложенный div, но всё равно неприятно. Не исключаю, впрочем, что этот недостаток уже устранён — давно не смотрел относительно новых версий.
                                              0
                                              Если б не осёл, то всё было бы прекрасно.

                                              НО:

                                              Для проектов, нацеленных на рядового пользователя это рак. Доля ИЕ - значительно больше половины. Джаваскрипт хаки приводят к мерцанию для hover элементов.

                                              Кроме того решение не универсально, как уже сказал prolis.
                                                0
                                                Ну решение это не может быть сто процентов универсальным, но в 95% процентах случаев современных сайтов пройдет.

                                                >>Джаваскрипт хаки приводят к мерцанию для hover элементов
                                                Не понимаю, что замерцание. У меня ничего не мерцает, поясните подробнее
                                                0
                                                спасибо. Как раз сегодня по работе такакя задача стоит. Вот и испробуем :)
                                                  0
                                                  Пробуйте :)
                                                  Это не конкретно вам - замечу что пример в статье будет работать при правильном DOCTYPE
                                                    0
                                                    так это не только здесь
                                                  0
                                                  Решение конечно отличное!!! Но все смазывает javascript для IE.... К сожалению пользователей ИЕ очень большое количество от 50 до 80%... ИМХО юзать js для оформления страниц зло... тем более что ie рендерит js медленнее всех :(((

                                                  Но на проектах где пользователи ИЕ составляют не доминирующий процент я думаю юзать этот метод обязательно!!!
                                                    0
                                                    извините за тупой вопрос...

                                                    А какого размера в пикселях должны быть эти гифы border_*.gif?
                                                      0
                                                      У меня были 7 в высоту и 8 в ширину
                                                      Но естествено можно использовать и другие, поправив код
                                                        0
                                                        у меня такие же эти гифы, но результат в Firefox/2.0.0.7
                                                        вот такой:
                                                        http://design.loreto.ru/ff.jpg

                                                        Пример "экспериментального" html такой:




                                                        Example
                                                        @import "main.css";
                                                        @import "print.css";

                                                        @import "fix_ie.css";







                                                        Текст




                                                        css Ваш на 100%

                                                        Почему глюк имеет место быть?

                                                        Кстати, в IE все OK!
                                                          0
                                                          у вас куда-то уехали уголки левые. верхний даже видно, куда
                                                            0
                                                            я понял, что уехали, вот и спрашиваю почему!!!
                                                              0
                                                              а это уже к разработчику метода…
                                                                +1
                                                                кстати, если доктайп убрать они оказываются там где быть и должны
                                                                  0
                                                                  Спасибо! Получилось!!!
                                                                    0
                                                                    это по-вашему «получилось»? я лично не думаю что есть смысл жертвовать доктайпом ради этого. хотя… когда как)
                                                            0
                                                            у меня такие же эти гифы, но результат в Firefox/2.0.0.7
                                                            вот такой:
                                                            http://design.loreto.ru/ff.jpg

                                                            Пример "экспериментального" html такой:

                                                            http://design.loreto.ru/ex.html



                                                            css Ваш на 100%

                                                            Почему глюк имеет место быть?

                                                            Кстати, в IE все OK!
                                                              +1
                                                              Пока не исследовал почему, но при strict некоректно работает
                                                              Берите этот DOCTYPE:
                                                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                                0
                                                                спасибо за подсказку, осталось лишь сравнить FF-стили для Strict и Transitional и понять что не так… *пошёл делать*
                                                                  0
                                                                  *нифига не получил*
                                                                  0
                                                                  работает!
                                                                    0
                                                                    кстати, у Вас доктайп стоит странноватый какой-то в примере:
                                                                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                                  0
                                                                  Гм... у меня в ИЕ-6, в Опере и ФФ тоже всё ОК
                                                                    0
                                                                    автор комментария код уже поправил
                                                                      0
                                                                      Ага ))) понятно.
                                                                      Ну супер. Это решение на порядок элегантнее, чем с различными использованиями ява-скриптов. Надо будет использовать.

                                                                      И протестировать с доктайпом strict
                                                                        0
                                                                        читаем: раз, идва (всю ветку обсуждения)
                                                              –2
                                                              к сожалению фраза «Работает во всех современных броузерах кроме ie» значит что технология не работает.
                                                                0
                                                                если дочитать до конца - то можно обнаружить решение и для ie
                                                                а то что для ie применяются отдельные правила (которые даже рекомендуют выносить в отдельный файл) - это уже давно норма.
                                                                  0
                                                                  Я дочитал до конца. Мне больше нравиться CrazyForms потмоу что он кросс платформенный.
                                                              +3
                                                              Спасибо за заметку. Для моего локального проекта как раз самое то, ибо всех своих пользователей перевел на Opera/Firefox, а начальнег пользуется Safari на своем Mac`е. :)
                                                                +2
                                                                предостерегаю от использования expressions в css на IE: при наличие скриптов, которые работают с dom моделью, будет тормозить. сам на эти грабли накололся.
                                                                не уверен, что во всех случаях, правда. у меня был css класс с expression на ie, который был проаплпен на input элементы. при создании input'а через скрипты начинались жуткие тормоза.
                                                                  0
                                                                  Если бы все так просто...
                                                                    0
                                                                    а где можно посмотреть на такое решение в действии?
                                                                    А то полдня бьюсь - не получается полностью красиво.
                                                                      0
                                                                      К сожалению в сети пока нет. Чтобы не мучались выложу исходный код полностью:

                                                                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                                                      <html>
                                                                      <head>
                                                                      <title></title>
                                                                      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
                                                                      <style>
                                                                      body{padding:30px}
                                                                      .incut{background: #dff7ff;padding: 20px;}
                                                                      .incut:before{content:url(i/border_tl.gif);background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;}
                                                                      .incut:after{content:url(i/border_bl.gif);background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;}
                                                                      .incut{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}
                                                                      </style>
                                                                      </head>


                                                                      <body>
                                                                      <div class="incut">
                                                                      Текст
                                                                      </div>
                                                                      </body>

                                                                      </html>

                                                                      Картинки с уголками имеют ширину 8px а высоту 7px
                                                                      0
                                                                      Впервые видел реализацию на http://mozilla.ru. Потом только когда начал и сам юзать понял что под ИЕ не работает нифига :)
                                                                        +1
                                                                        вот лично меня и смущает что там — Strict, а во всех примерах выше работает лишь при Transitional… завтра хочу разобраться
                                                                          0
                                                                          Я разобрался и довёл эту фигню до состояния работы в Strict. дело было в CSS — у Mozilla для :before и :after прописано "line-height: 0.1;". Углы встают на место моментально.
                                                                            0
                                                                            Огромное спасибо за находку! Менять доктайп некошерно, а у разработчика этого не сказано :)
                                                                        0
                                                                        экспрешены периодически подвешивают IE
                                                                        • UFO just landed and posted this here
                                                                            +1
                                                                            Каких ещё старых браузерах? Написал же, что пример работает в Firefox 1, Opera 7, даже в Netscape 7.2 работает. Вы знаете ещё какие-то старые браузеры, доля которых больше 0.1%?
                                                                            В очень старых браузерах пользователи просто не увидят закругленные уголки. Из-за этого сайт ваш поверьте не покинут, они даже знать не будут, что там должны быть уголки.
                                                                              +1
                                                                              >Куда лучше написать 4 div'а
                                                                              При редизайне сайта, тоже будете по всему контенту лазить, менять на пять дивов если вдруг дизайнеры сложнее перерисуют? А если сайт большой, корпоративный? Поверьте, подобных сайтов встречал не мало.
                                                                              • UFO just landed and posted this here
                                                                                  +1
                                                                                  это бы прокатило лет 5 назад. сейчас народ движется к семантике, и оформление через html-код уже не катит… вот например техника Sliding doors, она вполне рабочая без затрат html, но использовать можно только для двух уголков.
                                                                                0
                                                                                а можно вот так делать, если дивы интересны
                                                                                • UFO just landed and posted this here
                                                                                +2
                                                                                Конкретно каждому ответить, к сожалению, не получиться, потому буду писать здесь.
                                                                                Товарищи, все эти методы закругления уголков у элементов БЕЗ использования картинок — это, конечно, прекрасно, но посмотрите в самом начале темы, как звучит задача проекта.
                                                                                Если далее. Вот вы говорите, что тема не раскрыта, ибо в ie используется js. А теперь скажите, кто в основном эти люди: пользователи ie? Я сам отвечу. В основном это те, которые даже не подозревают о существовании других браузеров, более удобных, быстрых, функциональных, которые не могут себе представить, что ie, идущему в стандартной комплектации Windows, существует множество альтернатив. Вы думаете, этим людям интересно, как сделаны закругленные уголки у элементов? Они есть. И это главное.
                                                                                  0
                                                                                  Вот что значит Веб не для людей делают. Ведь видит W3C сколько хаков люди придумывают для этого закруглении. Почему просто нельзя -moz-boreder-round ввести в спецификацию? Ведь правила парсинга и отображения уже есть у геко.
                                                                                    0
                                                                                    по моему, они там есть, потому что это прототип того, что делается сейчас в w3c :)
                                                                                      0
                                                                                      -moz-boreder-round///как видите -moz.. это прикол мозилы, как это ввести в спецификацию??

                                                                                      а в css 3 есть стиль для скругления углов...
                                                                                      http://www.w3.org/TR/css3-background/#th…
                                                                                        0
                                                                                        По теме: css3.info. Там есть примеры.
                                                                                          0
                                                                                          я уж давно туда захаживаю))
                                                                                      0
                                                                                      после небольшой доработки удалось "завести" в режиме соответствия стандартам в Opera, SeaMonkey, Safari

                                                                                      всё на своих местах, кроме правого верхнего уголочка =/
                                                                                      что-то не придумывается как его опустить)
                                                                                        0
                                                                                        соврал, есть косяки в разных правильных браузерах
                                                                                          0
                                                                                          гм, в опере и симанке на 1px зазор появляется
                                                                                          в сафари такого нету =/
                                                                                        0
                                                                                        а если вместо врезки используются изображения (фотки, аватарки и т.д.) и хочеЦЦа сделать у этих изображений то, что написано в заголовке темы (скруглить края) - то скорее всего не получиЦЦа... :( а жаль... способ был хорош... но с оговорками не написанными в теме

                                                                                        p/s/ изображение (фотку, аватарку и т.д.) хотелось бы видеть именно как img src="... , а не ложить его бекграундом...
                                                                                          0
                                                                                          + еще баги в FF :(
                                                                                          1. при увеличении шрифта - левые уголки смещаются вниз
                                                                                          2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...

                                                                                          по второй "неприятности" еще можно сказать что этот способ не для этого... - согласен
                                                                                          но вот первая "неприятность" сводит на нет очень даже неплохой способ избавиться от пары-тройки дивов(и прочих левых)...
                                                                                            0
                                                                                            >>1. при увеличении шрифта - левые уголки смещаются вниз

                                                                                            Да ничего не смещается. Я наверное что-то делал не так =)

                                                                                            >>2. при фиксированной высоте блока и малом количестве его содержимого(ну вот надо было так) - уголки соотв. становятся после контекста и вниз их ну никак не загнать...

                                                                                            Ну а кто вам мешает разобраться чуть-чуть в коде и переписать пример под фиксированную высоту блока?
                                                                                              0
                                                                                              да вроде разобрался... :), тока вот при XHTML 1.0 Strict ну ваще не получаецца :( под FF...
                                                                                                0
                                                                                                У самого пока руки не дошли посмотреть. Но выше devgru написал такое решение проблемы:

                                                                                                >>для :before и :after прописать "line-height: 0.1;".
                                                                                                  0
                                                                                                  *украдено с сайта mozilla.ru*
                                                                                                    0
                                                                                                    кстати, там реализация чуть интереснее.
                                                                                                    1) задний фон — картинка, убирающаяся к правому краю и создающая тень справа
                                                                                                    2) нижний-правый угол — картинка огромной ширины (2000x8), содержащая не только нижний-правый угол, но и весь низ с тенью
                                                                                                    вечером, если интересно, могу выложить вырезанный блок из мозиллы. насколько помню, он никуда не ездит ни в одном браузере.
                                                                                                      +1
                                                                                                      ёёё, там как раз и стоит font-size: 1px;

                                                                                                      p.s. приятно, однакоЖ..., самому дойти до этого :))))
                                                                                                      0
                                                                                                      ну так я ж тоже не просто так пишу... потому как надо как раз мне такое сча...

                                                                                                      про "line-height: 0.1;" и сам хотел написать тока во опередили меня :)

                                                                                                      тока я бы написал line-height: 0 - это надо для Оперы, а для FF уже решил еще одной строкой... font-size: 0;, если без нее то получается то что писал выще - уголки едут вниз (ну уже понятно из-за чего)...
                                                                                                    0
                                                                                                    >>Ну а кто вам мешает...

                                                                                                    мешает спецификация:

                                                                                                    12.1 Псевдоэлементы :before и :after
                                                                                                    Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.

                                                                                                    если можно еще "как-то" это сделать - очень было бы интересно, потому как пригодилось бы...
                                                                                                  0
                                                                                                  Не думаю, что автору удастся открыть что-либо новое в CSS верстке(рад если ошибаюсь) :).
                                                                                                  Все уже открыто и исследовано до него. Да и странный топик. Вроде как велосипед изобретён уже давно.
                                                                                                  Больше как 3 года все нормально катаются. Жаль, что кто-то не в курсе. Есть полно валидных решений на чистом CSS.
                                                                                                  А использовать JS и кучу вещи, которые IE не поддерживает - увольте, читайте книжки(блоги).

                                                                                                  1)Не понятно кто и как рейтингу :). * n1313 8 октября 2007 15:31 дал корректную ссылку, где начинающие могут немного посмотреть на работы профессионалов, и кто это оценил?
                                                                                                  2) Кто мне приведёт ссылку на СТАНДАРТ в CSS? Ставлю ящик пива. Есть спецификация(подчеркнуто), которая написана несколько туманно и некоторые вещи отданы на откуп пользовательским агентам(броузерам), так что на IE местами нечего пинать. Сравните время его выхода со временем последней редакции спецификации CSS 2
                                                                                                    0
                                                                                                    ... могут немного посмотреть на работы профессионалов

                                                                                                    а чем этот метод не профессионален???

                                                                                                    по мне так лучше в коде видеть запись вида

                                                                                                    <div class="box">
                                                                                                    текст
                                                                                                    </div>


                                                                                                    чем как у "бескартиночных" профессионалов с cssplay

                                                                                                    <div class="box">
                                                                                                    <b class="top"><b class="b1"/><b class="b2"/><b class="b3"/><b class="b4"/></b>
                                                                                                    <div class="boxcontent">
                                                                                                    текст
                                                                                                    </div>
                                                                                                    <b class="bottom"><b class="b4b"/><b class="b3b"/><b class="b2b"/><b class="b1b"/></b>
                                                                                                    </div>


                                                                                                    или с теми же картинками как минимум еще с пару блоками внутри (к примеру, без учета конкретного дизайна)

                                                                                                    <div class="box">
                                                                                                    <div class="top"><div></div></div>
                                                                                                    текст
                                                                                                    <div class="bottom"><div></div></div>
                                                                                                    </div>


                                                                                                    да, есть у "нас" 6-ка, всмысле ИЕ :)... ниче с этим не поделаешь...
                                                                                                      0
                                                                                                      IE6 дан всем в наказание, чтобы жизнь мёдом не казалась, а то совсем разучится народ искать хитрые способы реализации известных алгоритмов. ;)
                                                                                                        0
                                                                                                        эт точно)))
                                                                                                    0
                                                                                                    При маленьких уголках добавьте font-size: 1px - поможет
                                                                                                      0
                                                                                                      А ещё можно таким способом рамки создавать:
                                                                                                      http://illandril.net/jQuery/transparentCorners/cornerTests.html

                                                                                                      Проверял в разных броузерах-> (IE6&7/Opera/FF) - работает!
                                                                                                        0
                                                                                                        More. Я убил на это дофига времени.
                                                                                                        Есть замечательная ошибка в IE, "operation aborted". Возникает когда пытаемся изменить DOM-дерево до загрузки всей страницы. Может возникнуть при использовании данного метода.

                                                                                                        Вариант лечения:

                                                                                                        .incut{zoom:1;behavior:expression(!this.isInserted==true && iDOMLoaded ? this.isInserted=(this.innerHTML = '<span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="background: url(i/border_br.gif) no-repeat 100% 0;height: 7px;display: block;margin:13px -20px -20px -20px;"><img src="i/border_bl.gif" alt="" /></span>') : '');}

                                                                                                        И перед </body>:

                                                                                                        <script type="text/javascript">iDOMLoaded = 1;</script>
                                                                                                          0
                                                                                                          Спасибо за решение! Могу добавить, что кроме ошибки в самом IE, изменение DOM-дерева может вырубать такие плагины, как Skype (который телефонные номера подсвечивает)
                                                                                                            0
                                                                                                            огромное спасибо!!!!
                                                                                                            +3
                                                                                                            можно немного по другому, хотя кому как нравится.
                                                                                                            вобщем вот мой вариант для ИЕ

                                                                                                            функция insertAdjacentHTML вместо прямого обращения к innerHTML, соотв с параметром 'afterBegin' вставляет после начала тэга (перед контентом - аналог :before) и 'beforeEnd' (аналог :after) - вставляет до закрытия тэга...

                                                                                                            вместо проверки !this.isInserted==true используется runtimeStyle.ххх что заставляет ИЕ не пересчитывать expression при каждом движении мыши...
                                                                                                            подробней описано тут http://lusever.ru/proceedings/thin_css/index.html


                                                                                                            .incut {
                                                                                                            zoom:expression(
                                                                                                            runtimeStyle.zoom = 1,
                                                                                                            insertAdjacentHTML('afterBegin','...ххх...'),
                                                                                                            insertAdjacentHTML('beforeEnd', '...ххх...')
                                                                                                            )
                                                                                                            }
                                                                                                              0
                                                                                                              я как, слабо владеющий javascript хочу спросить поподробнее...
                                                                                                              вот, например вместо ...ххх... нужно писать сам код, который хочу вставить? к примеру

                                                                                                              <span style="background: url(i/border_tr.gif) no-repeat 100% 0;height: 7px;display: block;margin: -20px -20px 13px -20px;"><img src="i/border_tl.gif" alt="" /></span>

                                                                                                              для 'afterBegin'
                                                                                                                0
                                                                                                                Да. Хороший вариант решения проблемы с ie
                                                                                                                0
                                                                                                                Отлично. Спасибо ;-)
                                                                                                                0
                                                                                                                великолепно.
                                                                                                                отец.

                                                                                                                большое спасибо за экспрэшены для after и before

                                                                                                                совершенно немогу понять людяй кричащих что expression плохо, зато несемантические элементы и примитивизм в css - это хорошо.
                                                                                                                а чтоб экспрэшены не подвешиали их, как верно заметили, нужно оптимизировать и вызывать лишь один раз.
                                                                                                                  0
                                                                                                                  А кто-нибудь навешивал эти уголки на картику?
                                                                                                                  Никак не получается вывести их наверх, если картинка задается тегом img, а не бекграундом, то она всегда поверх блоков :before и :after, какое бы позиционирование и z-index им не задавай…
                                                                                                                    +1
                                                                                                                    Картинка — это replaced element, т.е. заменяемый элемент. Ими являются, если я не путаю, еще и поля форм. После применения всех правил к этим элементам весь блок заменяется на другое содержимое. Соответственно, для картинок и элементов форм бессмысленно применять :before и :after — они сработают только когда картинка не сможет загрузиться.
                                                                                                                      0
                                                                                                                      Спасибо за инфу. Я псевдоэлементы навешивал на содержащий блок, но картинка все равно поверх них.
                                                                                                                        +1
                                                                                                                        Уж извините за рекламу, но я эту верстку сейчас делаю, и там как раз нужная вам проблема — wikimart.ru
                                                                                                                        В правом блоке картинки окружены рамочкой с закруглением — посмотрите.
                                                                                                                          0
                                                                                                                          Спасибо, получилось. Все дело оказалось в отрицательном z-index для картинки, без него никак.
                                                                                                                            0
                                                                                                                            Хм… у меня вообще z-index'ы не использовались в этом месте — всё само правильно встало… Может дело в том, что у меня картинка, обрамляющий блок и рамка объявлены блочными…
                                                                                                                            Но я рад, что у вас получилось)
                                                                                                                              0
                                                                                                                              Спасибо )

                                                                                                                              Z-index для картинки нужен когда уголки задаются фоном, а у вас через content. Кстати, для IE7 тоже нужно добавлять блок .after вручную.
                                                                                                                      0
                                                                                                                      Пробовал, правда не на картинку, а на див с картинкой
                                                                                                                      довольно геморно это…
                                                                                                                        0
                                                                                                                        Так и я на див… У вас пример не завалялся?
                                                                                                                          +1
                                                                                                                          Ну например, здесь:
                                                                                                                          www.gymn1sam.ru/
                                                                                                                          В правой колонке картинка на главной
                                                                                                                          и в контенте есть
                                                                                                                          Там проблема в том, что float нужен
                                                                                                                            0
                                                                                                                            да не нужно вроде как — главное аккуратно посчитать ;)
                                                                                                                              0
                                                                                                                              Спасибо и вам. float необязателен, главное z-index: -1; для картинки.
                                                                                                                        +1

                                                                                                                        Идеальний пост Назад в прошлое, в предверии 2017-го.

                                                                                                                        Only users with full accounts can post comments. Log in, please.