• rocon — экспериментальная библиотека для создания скругленных уголков

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

    Библиотека называется rocon. Работает она довольно просто: подключаете файл rounded-corners.js на страницу и нужным блокам указываете класс rcN, где N — радиус скругления:

    <script type="text/javascript" src="rounded-corners.js"></script>
    <div class="rc10" style="background: red; padding: 5px;">Rounded block</div>
    

    Получим блок с радиусом скругления в 10 пикселей.

    Метод создания скруглений основан на моей лекции в Техногрете. Так же, как и в лекции, можно создавать скругления двух типов: формы и контр-формы. По умолчанию создается контр-форма, для создания формы нужно указать класс rc-shape:

    <script type="text/javascript" src="rounded-corners.js"></script>
    <div class="rc10 rc-shape" style="background: red; padding: 5px;">Rounded block</div>
    

    Вот основные достоинства библиотеки:

    • Работает во всех современных браузерах: IE6+, Safari 3+, Firefox 2+, Opera 9.25+.
    • Позволяет без проблем с производительностью создавать десятки скругленных блоков на странице (в моих тестах 100 блоков создавалось около 1 секунды).
    • Можно динамически менять цвет фона блока и радиус скругления с помощью метода rocon.update(elem).
    • Уголками можно управлять через CSS.
    • В IE6 этот способ будет работать намного быстрее, чем использование полупрозрачных PNG через AlphaImageLoader.

    Больше примеров можно найти на тестовой странице. Предупреждаю, что библиотека экспериментальная и находится в стадии активной разработки.

    Скачать с Google.Code

  • 66 комментариев

    1. n3o
      27 февраля 2009

      Првиет.

      Серёг, а будет ли возможность указывать какие углы нужно скруглять? Например, задача сделать скруглёные только два нижних угла у блока и т.д.

    2. Сергей Чикуенок
      27 февраля 2009

      Можно, конечно, через CSS. Например, если нужно убрать два нижних уголка у блока с id=»sample-block», то стиль может выглядеть так:

      #sample-block {
      	/* Safari, Chrome */
      	-webkit-border-bottom-right-radius:0;
      	-webkit-border-bottom-left-radius:0;
      
      	/* Firefox */
      	-moz-border-radius-bottomleft:0;
      	-moz-border-radius-bottomright:0;
      }
      
      /* Opera, IE */
      #sample-block .rocon-bl,
      #sample-block .rocon-br {
      	display:none;
      }
      
    3. n3o
      27 февраля 2009

      Хорошая идея. И, кстати, если например убираем два верхних скругления, то у #sample-block (блок у которого скругляем), не забыть написать:

      margin-top: 0px !important;

      ,иначе в Opere и IE, будет непрятный отступ сверху.

    4. 1 марта 2009

      Очень здоровски. Буду использовать. Спасибо.

    5. 1 марта 2009

      Отлично, отлично, наконец-то всё есть в одном месте.

    6. 2 марта 2009

      Отлично, спасибо!

    7. 11 марта 2009

      Библиотека очень понравилась.
      Заметил важную делать — нужно js-файл подключать после подключения всех стилей, иначе скругление не работает в хроме.
      Cпасибо (:

    8. Сергей Чикуенок
      11 марта 2009

      На самом деле это «особенность» работы движка Webkit. Мы в студии когда-то делали тесты на этот счет: если подключать скрипты вперемешку со стилями, то в Webkit сразу после загрузки неправильно определяются размеры элементов (свойство offsetWidth). Поэтому я всегда рекомендую сначала подключать стили, а потом скрипты. То же самое рекомендуют и создатели jQuery.

    9. KBTT
      18 марта 2009

      Привет.
      Отличная штука, спасибо.
      Заметил один косячок:
      если блоку со скруглёнными углами задать полупрозрачность, в опере под скруглёнными углами просвечивают углы не скруглённые (почему-то с ещё большей прозрачностью)

    10. Сергей Чикуенок
      18 марта 2009

      Вообще это нормально, ведь углы просто скрывают прямоугольные области :) Чтобы этого не было, можно воспользоваться формой (задать класс rc-shape)

    11. Lorado
      16 мая 2009

      Спасибо! Искал недавно способы реализации, считаю Ваш — наиболее простым! :) Только в моём случает что-то для IE не работает :( но и ладно….он у меня все равно лесом идет… ^_^

    12. 17 мая 2009

      Можно ли перекрывать класс, допустим, rc10 в стиле CSS — чтобы прописать единый стиль для разных кнопок?

    13. Сергей Чикуенок
      17 мая 2009

      Можно. Сама декларация вашего класса не меняется, добавляется новое описание.

    14. 30 мая 2009

      Привет! А что скажешь на счёт реализации скуглённых уголков у кнопок <input type=»button» />? Пока ничего более умного в голову не приходит кроме создания обрамляющего элемента, но тут уже появляются некоторые сложности, например: если мы у кнопки укажем margin, то его придётся у кнопки обнулить, а обрамляющего элемента задать : )

    15. 1 июня 2009

      artyv-
      можно поставить класс скругелния у кнопок. но IE ругается.
      В данный момент реализовывал только через обрамляющий элемент.

    16. 7 июня 2009

      Sulla, я в данный момент говорю не об этой библиотеке, а вообще : )

      Кстати, случайно наткнулся на DD_roundies от автора DD_belatedPNG, работает похожим с rocon образом : )

    17. Eandy
      14 июня 2009

      Сорри за повтор.

      У меня проблемка!
      Ситуация такая:
      1. Есть фон (у _body_) допустим зеленый;
      2. Затем «сверху» _div_ или _table_ с градиентным фоном;
      3. Затем _div class=»rc10 rc-shape b2″ style=» padding: 5px; width:200px»_Rounded block_/div_ (без фона);

      В итоге получается, что внутренний фон скругленных углов и между ними — зеленый (цвет фона _body_).

      Вопрос как сделать, чтобы этот фон был как фон у _div_ или _table_ (градиентным фоном)?

      Пример тут — http://www.kazakivbkv.ru/uploads/newfolder/rounded.jpg

    18. Сергей Чикуенок
      14 июня 2009

      В библиотеке есть один хак, который я не документировал. Можо у самого элемента указать класс, который будет задавать фон, в виде rcbg[цвет_фона], например, так: rcbgFFCC00

      Градиенты пока делать нельзя, думаю, они появятся в следующей версии.

    19. Eandy
      14 июня 2009

      Дело в том что у меня градиент задан картинкой (.jpg)., так как, этом фон завязан на шапку. Можно фон скругленных углов и между ними задать с помощью картинки? Я сам недогоняю как?

    20. Сергей Чикуенок
      14 июня 2009

      Пока нельзя :( возможно, появится в следующей версии

    21. Eandy
      14 июня 2009

      ОК, спасибо, то что есть уже вери гууд, ждем новой версии…

    22. 19 июня 2009

      1. При использованиии «rc20 rc-shape» на элементе который появляется при нажатии на кнопку

      для IE 8 приходится прописывать перезагрузку стиля:
      $(«#inscont»).toggle(«drop», {direction: «down»}, 1500, function () {
      var elem = document.getElementById(‘inscont’);
      elem.className = ‘rc20 rc-shape';
      rocon.update(elem);
      });

      иначе шапочка снизу и сверху просто не появляется. (без rc-shape — обойтись неполучилось, фон — фотография)

      НО в Опере и Осле к элементу добавляется отступ величиной в rc20 (верх и низ) — можно от него какнить избавиться ?

      2. Если указать z-index 0, то шапки со свойством rc-shape — в IE8 прячутся неизвестно куда, хотя вродебы создаються, так задуманно или я что-то недопонимаю ?

    23. 27 августа 2009

      Сергей, добрый день!

      Мне очень понравилась Ваша разработка! Спасибо!!! Очень облегчает участь технолога при создании закруглённых углов.

      Тестировал у себя. Заметил, что в Google Chrome границы скруглений без сглаживания получаются. Подскажите, пожалуйста, с чем это может быть связано и как это исправить?

      Жду ответа, как соловей лета! :-)

    24. Сергей Чикуенок
      27 августа 2009

      Скорее всего, это связано с тем, как Хром обрабатывает CSS-свойство -webkit-border-radius. В следующей версии библиотеки появится возможность сделать принудительную отрисовку через Canvas, тогда все везед будет сглаженным.

    25. 27 августа 2009

      Спасибо за ответ!

      Когда можно будет ожидать новую версию библиотеки?

      P.S. И заметил, что, если вставить в блок элемент формы (в моём случае ), то в IE6-7 почему-то этот элемент отъедет вправо. Как с этим бороться, знаете?

    26. Сергей Чикуенок
      27 августа 2009

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

    27. 27 августа 2009

      Сергей!

      Я разобрался со своей проблемой. Дело оказалось в том, что IE делал отступ, как у родительского элемента (Double Margin/Padding Bug). Он исчез, когда я родительскому элементу присвоил свойство (height: 1%).

      Хочу сделать элемент формы (input type=»text») с закруглёнными углами. Но в Опере и IE сверху и снизу добавляются отступы равные радиусу скругления, не могу понят: можно ли от них избавиться, чтобы содержание блока прилегало к границам? Может быть, кто-то сталкивался с этой проблемой и знает, как её решить?

    28. 27 августа 2009

      Да, забыл добавить, что это должна быть форма (rc-shape).

    29. 27 августа 2009

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

    30. Лёлька
      23 сентября 2009

      А почему в Хроме уголки получаются не сглаженные, а рваные.
      Как побороть?

      Версия браузера 1.0.154.39.

    31. Сергей Чикуенок
      23 сентября 2009

      Так работает нативное свойство -webkit-border-radius в Хроме. Побороть пока никак (вернее, можно подправить одно условие в исходнике, чтобы Хром не классифицировался как WebKit-браузер). В следующей версии будет возможность исправить это.

    32. Аня
      21 октября 2009

      в чем идея rc-shape . борюси с непонятным фоном под уголком.. какой-то полупрозначный. ставлю этот класс у меня вблок падает вниз как будето появляется кактой-то magin-top

    33. Дмитрий
      1 ноября 2009

      Библиотека потрясающая!!! Спасибо
      Только вот подскажите, есть ли возможность создания полупрозрачного фона слоя!
      Тоесть чтоб и уголки были и фон полупрозрачный!

    34. Лёлька
      2 ноября 2009

      С нетерпением ждем новую версию :)

    35. Андрей
      12 ноября 2009

      А в ИЕ* у некоторых блоков полный провал =)
      Подожду следующей версии вашей библиотеки.

    36. 6 декабря 2009

      Это гениально, спасибо.

    37. 10 декабря 2009

      Много чего видел по поводу скругления углов, но такого не видел!
      Большое спасибо, библиотека отличная и легкая в настройке и понимании!
      Остаётся открытым вопрос о работоспособности данной библиотеки на последних версиях IE.

    38. Сергей Чикуенок
      10 декабря 2009

      Сейчас как раз работаю над новой версией библиотеки

    39. Кирилл
      15 декабря 2009

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

    40. Михаил
      1 января 2010

      Что-то не работает ссылочка http://code.google.com/p/rocon/downloads/list для скачивания…

    41. 8 января 2010

      Проблема с отступом слева в ИЕ возникает, если родительский стиль сайта или елемента выше — text-align:center;
      Я убрал из body это свойство и все заработало.

    42. 8 января 2010

      Спасибо за скрипт!

    43. 13 января 2010

      Абалденный скрипт. Автору огромное человеческое спасибо! Жду с нетерпением обновления библиотеки, включая исправления для Хрома. Спасибо ещё раз!

    44. 15 января 2010

      Подскажите пожалуйста почему когда div в dive то текст во втором dive не росстягивает его по высоте а попросту выходит за границы diva!?
      Как это можно поправить?

      Описать два способа создания блоков со скругленными уголками,
      которыми пользуются технологи студии, и показать, как
      избавиться от проблем с CSS-свойством right в IE6

      Заранее спасибо!

    45. жЕ Ка
      23 января 2010

      Сергей, НЕскругление для, например, нижних уголков работает только в ИЕ (проверял в 7ом), если указывать для блока class. С id всё как надо работает.
      .sample-block{
      background: RGB(0,110,115);
      padding: 5px;
      -webkit-border-bottom-right-radius:0;
      -webkit-border-bottom-left-radius:0;
      -moz-border-radius-bottomleft:0;
      -moz-border-radius-bottomright:0;
      }
      .sample-block .rocon-bl,
      .sample-block .rocon-br{
      display:none;
      }

      _div class=»rc10 sample-block»_ Rounded block _div_

    46. 21 февраля 2010

      Opera/FF — как обычно великолепно, IE8 не показывает скругление. Перепробовал несколько jquery-способов — не хочет и всё тут. Может кто сталкивался? Настройки практически дефолтные, выполнение сценариев разрешено, java стоит последняя.

    47. Сергей Чикуенок
      21 февраля 2010

      В IE8 поменялся способ инициализации VML, поэтому не работает. В следующей версии будет исправлено.

    48. 21 февраля 2010

      Как же бесит самоуверенность и наглость M$. Три браузера отображают всё четко и только у IE свое особенное мнение…

      А когда ожидается новая версия?
      Я еще не видел более удобного и короткого использования библиотеки: буквально в две строки :)

    49. Сергей Чикуенок
      22 февраля 2010

      Пока не знаю. Надеюсь, скоро появится время. Разработка, кстати, тут: http://github.com/sergeche/rocon

    50. 26 марта 2010

      эм.. библиотека уже поправлена? :) Или ie8 опять глючит, или … Но в нем углы сейчас скругляются.

    51. 29 марта 2010

      Думаю, Вы уже в курсе, но есть багрепорт http://code.google.com/p/rocon/issues/detail?id=11 — довольно неприятный глюк.

      Кстати, где будут в дальнейшем появляться актуальные версии (если будут ;)) — на GitHub или на Google Code?

    52. Mike
      2 апреля 2010

      IE 7 констукция валит все.

    53. Mike
      2 апреля 2010

      IE 7, input, класс rounded rc10, валится все.

    54. Сергей Чикуенок
      14 апреля 2010

      На github. Разработка пока на паузе, не хватает времени доделать.

    55. Vlad43
      14 апреля 2010

      сорри за повтор.

      В FireFox нашел весьма печальный баг.
      Применение -moz-border-radius к изображениям не дает в FF никакого результата, поэтому в такой ситации ничем помочь (пока) не может. Т.е. в остальных браузерах все классно — уголки дорисоваваются и вуаля. А в FF полагаемся на border-radius и пролетаем. И такая фигня в мозиле даже в версии 3.6

    56. Юрец
      3 июня 2010

      Очень понравилось. Спасибо за хороший компонент.

    57. Василий
      14 июля 2010

      В IE8/IE7 приводит к ошибке jquery
      Сведения об ошибке на веб-странице

      Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0)
      штамп времени: Wed, 14 Jul 2010 00:14:19 UTC

      Сообщение: Failed
      Строка: 82
      Символ: 59
      Код: 0
      URI-код: http://sait.ru/js/jquery-1.4.2.min.js

      не могу определить корни этой ошибки

    58. 25 августа 2010

      Эх, если бы можно было вместо бекграунда у уголков выставлять что-то типа opacity: 0; А то на сложных фонах данная библиотека бесполезна((

    59. 31 октября 2010

      Хороший скрипт, то что искал, автору спасибо…

    60. almaz
      9 декабря 2010

      Очень печально, что изображения в фоне не поддерживаются.

    61. 4 июня 2011

      Класс отличный, но только в IE8 вываливается куча ошибок, хотя при этом скругление всеравно происходит )))

    62. Влад
      1 сентября 2011

      а в ie9 не пашет, есть варианты ?

    63. AR
      17 октября 2011

      не работает в IE9

    64. Vlad
      17 октября 2011

      зато в IE9 — работает border-radius

    65. AR
      17 октября 2011

      Ну я думал раз сказано, что «Работает во всех современных браузерах: IE6+, Safari 3+, Firefox 2+, Opera 9.25+.»

      выходит IE9 не современный браузер )))

    66. Azerus
      19 мая 2012

      Спасибо, отличная вещь, но в IE8 оно вроде как и закругляет углы, но все же остается маленькая рамка в 1 пиксель…