Сглаженные закругленные углы без использования изображений

Сглаженные закругленные углы без использования изображений

Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики. Вот несколько статей, описывающих технику закругления углов, о которой я веду речь в этой статье: Закругление углов без использования ...

Комментарии (72)

  1. Извините, но вы смотрели свой блог в ИЕ 7м?

    Скажите, пожалуйста, что в нем не так? Смотрел, но, может быть, что-то не заметил.

    Ребята, данное решение — не панацея! Я сам не готов использовать его везде, где потребовалось бы закруглять углы. Это только один из возможных вариантов закругления и использовать его уместно только в некоторых случаях.

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

    Спасибо всем за комментарии!

  2. у меня стоит цвет окна в настройках оформления виндоус не белый, поэтому первый и третий вариант сглаживания создают белые прямоугольнички и пиксели в углах -__-

  3. А название «Nifty Corners Cube вам ни о чем не говорит? :) Зачем изобретать велосипед? Тем более, что использование JS в данной ситуации уместнее — верстка не замусоривается и остается семантической.

  4. Ой-ей-ей, зачем же такая каша в коде-то? Да и, если честно, меня терзают смутные сомнения на счет того, что маленькая картинка уголков будет весить чуть ли не меньше, чем приведенный код. Ну и плюс к тому описывать все переходные цвета пикселей, а не только основной цвет рамки — как-то оно не очень радует.

  5. А я использую вот такой способ.

    
    
    <!--/style -->
    <style type="text/css">
    .rndbxg b.trg, .rndbxg b.brg { display: block }
    .rndbxg b.trg *, .rndbxg b.brg * { display: block; height: 1px; overflow-y: hidden; font-size: 0 !important; border-width: 0 1px; border-style: none solid}
    .rndbxg b.trg b, .rndbxg b.brg b { margin: 0 4px }
    .rndbxg b.trg i, .rndbxg b.brg i { margin: 0 2px }
    .rndbxg b.trg u, .rndbxg b.brg u { margin: 0 1px !important }
    .rndbxg .rndbxCg { border-width: 0 1px; border-style: none solid; padding: 0; overflow: hidden }
    .rndbxg b.trg u, .rndbxg b.brg u { height: 2px }
    .rndbxg b.trg i, .rndbxg b.brg i { border-width: 0 2px }
    .rndbxg b.trg b, .rndbxg b.brg b { border-width: 0 }
    .wrndbxg b.trg b, .wrndbxg b.brg b { background: #cccccc }
    .wrndbxg b.trg i, .wrndbxg b.brg i, .wrndbxg b.trg u, .wrndbxg b.brg u, .wrndbxg .rndbxCg { background: #ffffff; border-color: #cccccc }
    .grndbxg b.trg *, .grndbxg b.brg *, .grndbxg .rndbxCg { background: #ececec !important; border-color: #ececec !important }
    </style>
    <!-- /style -->
    
    <div style="padding: 10px; width: 100%">
    
     <div class="rndbxg wrndbxg">
      <b class="trg"><b></b><i></i><u></u></b>
       <div class="rndbxCg">
    
        <div style="padding: 10px">
        <p>Любое содержимое</p>
        </div>
    
       </div>
      <b class="brg"><u></u><i></i><b></b></b>
     </div>
    
    </div>
    
    
    

    Могут использоваться любые бакграунды и любой цвец рамки-фона, люббой браузер, плюс любое содержимое.

  6. Я надеюсь, все это проделывается исключительно ради спортивного интереса?
    Насколько я помню, css появились для отделения дизайна от контента и для ОПТИМИЗАЦИИ кода.
    И, кстати, запись «border-width: 0 1px;» в CSS 2 недопустима, вам даже ваш редактор это подсветил.

  7. Я надеюсь, все это проделывается исключительно ради спортивного интереса?

    Я уже высказывал свою позицию и в самом посте, и в комментариях, поэтому нет смысла повторяться.

    И, кстати, запись “border-width: 0 1px;” в CSS 2 недопустима, вам даже ваш редактор это подсветил.

    Редактор абсолютно идентично подсветил и «margin: 0 1px;», но это же не значит, что такая запись неправильная.

    Можете дать ссылку на источник, где говорится, что запись “border-width: 0 1px;” недопустима? Если это действительно так, то буду исправляться. Однако эта запись валидацию проходит, поэтому у меня пока сомнения на счет недопустимости.

  8. метод конечно интересный но 4 уголка в *.gif даже по весу меньше чем данный код ;)

  9. Привет!
    Спасибо за уголки! Зззззумительно!
    А нет ли чего подобного со шрифтами? КлирТайп хорошо, но хотелось бы еще качественее — как уголки например.

    Заранее спасибо
    (ответ лучше на @)

    E.

  10. Если бы с графикой было бы все так просто :)
    Нарисовать, вырезать, дать border при случае, блоков с сразными цветами поболее, пустить градиент (вдруг понадабиться), то размеры всех графических элементов будут по любому весить прилично.
    Предложенный метод не панацея и это надо понимать.
    Но иногда проще сделать именно так, а не иначе :)

  11. А нет ли чего подобного со шрифтами?

    Скорее всего нет.

  12. Чесслово это уже извращенство такой код втыкать на уголки…, надо ли это? Надо, если только для общего развития…
    Давайте вспомним основные принципы SEO и сайтостроения преждем чем будем городить подобного рода красоту…, да и кому она особо нужна? Те кто делает уголки круглые — делают круглыми их везде, а везде нереально будет втыкнуть это с помощью CSS, следовательно если пользователь зайдет и увидит что половина уголков (если картинки отключены) квадратные, а половина круглые (сделанные CSS) приятней его глазу не станет…
    P.S.: Без картинок сейчас полюбому ущербно как-то, хоть и сам стремлюсь к минимуму изображений…

  13. Я опять со шрифтами…
    А если поставить как задачу? Ведь чего только CSS не вытворяет со шрифтами, а сглаживание получается слобо? Не так уже там (в шрифтах) и мест то много что «гладить» нужно! Зато слава будет великая!!! Вcе sIFR-ы и фльтры Виндовские просто сдохнут от зависти…

  14. Евгений, в CSS3 есть свойство для сглаживания текста. Но Бог его знает, когда этот стандарт начнут использовать во всех популярных браузерах.

  15. — в CSS3 есть свойство для сглаживания текста —

    Ух ты!!! … а нельзя ли ссылочку, где эти свойства можно посмотреть?
    Заранее спасибо

    Е

  16. Пример можно посмотреть здесь — http://www.css3.info/preview/text-shadow/. Поддерживает пока, насколько мне известно, только Opera 9.5.

    Кстати, выше я ошибся. Это свойство введено еще в стандарте CSS2. Но до сих пор не поддерживалось популярными браузерами.

  17. Про эти тени я знаю…
    Но спасибо в любом случае. Если что на эту тему увидите-услышите-сотворите… бросьте ссылку при случае.

    Спасибо!
    Е.

  18. Конечно, сглаживание, скорее всего избыточно.

    Взял из примера вариант «Простое закругление углов с помощью CSS»
    css — 373 байта (примерно)
    html для четырех углов — 224 байта (примерно)

    to Das ( 13 ноября 2007 г. в 14:22 )
    Что Вы там про траффик говорили? Доля этого кода в коде страницы просто ничтожна, а вот на коннектах к серверу экономим. И к тому же, для изменения цвета рамки не нужно перерисовывать картинки.

  19. Жесть, зачем плодить столько не нужного кода, когда лучше вставить 4 блока с фоновыми изображениями и спозиционировать их. По крайне мере кода в 3 раза меньше будет по количеству символов. Хотя при масштабирование прекрасно работает.
    Заметил баг, у меня FF v2 при размере шрифта по умолчанию, слева на закруглениях вверху и внизу есть чёрные точки, появились они там благодаря q и /q, зачем вы их вставили в код ?

  20. появились они там благодаря q и /q, зачем вы их вставили в код ?

    Проверил в FF2, у меня нет таких черных точек. q — один из элементов для сглаживания.