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

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

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

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

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

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

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

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

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

  2. 2
    mcfrei

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

  3. 3
    vvn

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

  4. 4

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

  5. 5
    Иван (ivan_s)

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

    <!--/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. 6
    Tocka

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

  7. 7

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

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

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

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

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

  8. 8
    kocten

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

  9. 9
    Евгений

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

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

    E.

  10. 10

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

  11. 11

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

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

  12. 12
    Взлом-щик

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

  13. 13
    Евгений

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

  14. 14

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

  15. 15
    Евгений

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

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

    Е

  16. 16

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

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

  17. 17
    Евгений

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

    Спасибо!
    Е.

  18. 18

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

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

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

  19. 19

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

  20. 20

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

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