-
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.
Больше примеров можно найти на тестовой странице. Предупреждаю, что библиотека экспериментальная и находится в стадии активной разработки.
веб-разработчик
Приемная
-
Архив
- Август 2011 1
- Июль 2011 2
- Апрель 2011 1
- Февраль 2011 1
- Ноябрь 2010 1
- Октябрь 2010 2
- Июль 2010 1
- Июнь 2010 2
- Март 2010 2
- Февраль 2010 2
- Январь 2010 4
- Декабрь 2009 1
- Ноябрь 2009 1
- Октябрь 2009 4
- Сентябрь 2009 2
- Август 2009 4
- Июль 2009 3
- Июнь 2009 6
- Май 2009 4
- Апрель 2009 10
- Март 2009 13
- Февраль 2009 14
Категории
- Без рубрики 7
- Верстка 31
- Домашка 5
- Прочее 19
- Работа с графикой 11
- Статьи 16
Мои проекты
- ictinus
JavaScript-декоратор для картинок - jTweener
JavaScript-библиотека для создания анимаций - rocon
Экспериментальная библиотека для создания скругленных уголков - Zen Coding
Набор инструментов для скоростной вёрстки
- ictinus
Првиет.
Серёг, а будет ли возможность указывать какие углы нужно скруглять? Например, задача сделать скруглёные только два нижних угла у блока и т.д.
Можно, конечно, через 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; }Хорошая идея. И, кстати, если например убираем два верхних скругления, то у #sample-block (блок у которого скругляем), не забыть написать:
margin-top: 0px !important;
,иначе в Opere и IE, будет непрятный отступ сверху.
Очень здоровски. Буду использовать. Спасибо.
Отлично, отлично, наконец-то всё есть в одном месте.
Отлично, спасибо!
Библиотека очень понравилась.
Заметил важную делать — нужно js-файл подключать после подключения всех стилей, иначе скругление не работает в хроме.
Cпасибо (:
На самом деле это «особенность» работы движка Webkit. Мы в студии когда-то делали тесты на этот счет: если подключать скрипты вперемешку со стилями, то в Webkit сразу после загрузки неправильно определяются размеры элементов (свойство
offsetWidth). Поэтому я всегда рекомендую сначала подключать стили, а потом скрипты. То же самое и создатели jQuery.Привет.
Отличная штука, спасибо.
Заметил один косячок:
если блоку со скруглёнными углами задать полупрозрачность, в опере под скруглёнными углами просвечивают углы не скруглённые (почему-то с ещё большей прозрачностью)
Вообще это нормально, ведь углы просто скрывают прямоугольные области
Чтобы этого не было, можно воспользоваться формой (задать класс rc-shape)
Спасибо! Искал недавно способы реализации, считаю Ваш – наиболее простым!
Только в моём случает что-то для IE не работает 
но и ладно….он у меня все равно лесом идет… ^_^
Можно ли перекрывать класс, допустим, rc10 в стиле CSS – чтобы прописать единый стиль для разных кнопок?
Можно. Сама декларация вашего класса не меняется, добавляется новое описание.
Привет! А что скажешь на счёт реализации скуглённых уголков у кнопок <input type=”button” />? Пока ничего более умного в голову не приходит кроме создания обрамляющего элемента, но тут уже появляются некоторые сложности, например: если мы у кнопки укажем margin, то его придётся у кнопки обнулить, а обрамляющего элемента задать : )
artyv-
можно поставить класс скругелния у кнопок. но IE ругается.
В данный момент реализовывал только через обрамляющий элемент.
Sulla, я в данный момент говорю не об этой библиотеке, а вообще : )
Кстати, случайно наткнулся на от автора , работает похожим с rocon образом : )
Сорри за повтор.
У меня проблемка!
Ситуация такая:
1. Есть фон (у _body_) допустим зеленый;
2. Затем “сверху” _div_ или _table_ с градиентным фоном;
3. Затем _div class=”rc10 rc-shape b2″ style=” padding: 5px; width:200px”_Rounded block_/div_ (без фона);
В итоге получается, что внутренний фон скругленных углов и между ними – зеленый (цвет фона _body_).
Вопрос как сделать, чтобы этот фон был как фон у _div_ или _table_ (градиентным фоном)?
Пример тут –
В библиотеке есть один хак, который я не документировал. Можо у самого элемента указать класс, который будет задавать фон, в виде
rcbg[цвет_фона], например, так:rcbgFFCC00Градиенты пока делать нельзя, думаю, они появятся в следующей версии.
Дело в том что у меня градиент задан картинкой (.jpg)., так как, этом фон завязан на шапку. Можно фон скругленных углов и между ними задать с помощью картинки? Я сам недогоняю как?
Пока нельзя
возможно, появится в следующей версии
ОК, спасибо, то что есть уже вери гууд, ждем новой версии…
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 прячутся неизвестно куда, хотя вродебы создаються, так задуманно или я что-то недопонимаю ?
Сергей, добрый день!
Мне очень понравилась Ваша разработка! Спасибо!!! Очень облегчает участь технолога при создании закруглённых углов.
Тестировал у себя. Заметил, что в Google Chrome границы скруглений без сглаживания получаются. Подскажите, пожалуйста, с чем это может быть связано и как это исправить?
Жду ответа, как соловей лета!
Скорее всего, это связано с тем, как Хром обрабатывает CSS-свойство
-webkit-border-radius. В следующей версии библиотеки появится возможность сделать принудительную отрисовку через Canvas, тогда все везед будет сглаженным.Спасибо за ответ!
Когда можно будет ожидать новую версию библиотеки?
P.S. И заметил, что, если вставить в блок элемент формы (в моём случае ), то в IE6-7 почему-то этот элемент отъедет вправо. Как с этим бороться, знаете?
Когда выйдет — не знаю, надеюсь в ближайшее время разобраться со своими срочными делами и дописать ее. Насчет багов IE: скидывайте примеры в Issue Tracker, я потом гляну.
Сергей!
Я разобрался со своей проблемой. Дело оказалось в том, что IE делал отступ, как у родительского элемента (Double Margin/Padding Bug). Он исчез, когда я родительскому элементу присвоил свойство (height: 1%).
Хочу сделать элемент формы (input type=”text”) с закруглёнными углами. Но в Опере и IE сверху и снизу добавляются отступы равные радиусу скругления, не могу понят: можно ли от них избавиться, чтобы содержание блока прилегало к границам? Может быть, кто-то сталкивался с этой проблемой и знает, как её решить?
Да, забыл добавить, что это должна быть форма (rc-shape).
Мне удалось её сдвинуть прописав для углов стиль без смещения, но в этом случае углы не видны, т.к. из-за прозрачных частей торчит фон, в котором находится содержание.
А почему в Хроме уголки получаются не сглаженные, а рваные.
Как побороть?
Версия браузера 1.0.154.39.
Так работает нативное свойство
-webkit-border-radiusв Хроме. Побороть пока никак (вернее, можно подправить одно условие в исходнике, чтобы Хром не классифицировался как WebKit-браузер). В следующей версии будет возможность исправить это.в чем идея rc-shape . борюси с непонятным фоном под уголком.. какой-то полупрозначный. ставлю этот класс у меня вблок падает вниз как будето появляется кактой-то magin-top
Библиотека потрясающая!!! Спасибо
Только вот подскажите, есть ли возможность создания полупрозрачного фона слоя!
Тоесть чтоб и уголки были и фон полупрозрачный!
С нетерпением ждем новую версию
А в ИЕ* у некоторых блоков полный провал =)
Подожду следующей версии вашей библиотеки.
Это гениально, спасибо.
Много чего видел по поводу скругления углов, но такого не видел!
Большое спасибо, библиотека отличная и легкая в настройке и понимании!
Остаётся открытым вопрос о работоспособности данной библиотеки на последних версиях IE.
Сейчас как раз работаю над новой версией библиотеки
Не могу разобраться с ошибкой в ИЕ6. нижние углы не задаються.
А если задавать размер родительского блока фиксированным, намного превышающим внутренний, то в ИЕ6 совсем пропадают эти блоки.. тоесть высота и ширина становятся равными нулю
Что-то не работает ссылочка для скачивания…
Проблема с отступом слева в ИЕ возникает, если родительский стиль сайта или елемента выше – text-align:center;
Я убрал из body это свойство и все заработало.
Спасибо за скрипт!
Абалденный скрипт. Автору огромное человеческое спасибо! Жду с нетерпением обновления библиотеки, включая исправления для Хрома. Спасибо ещё раз!
Подскажите пожалуйста почему когда div в dive то текст во втором dive не росстягивает его по высоте а попросту выходит за границы diva!?
Как это можно поправить?
Описать два способа создания блоков со скругленными уголками,
которыми пользуются технологи студии, и показать, как
избавиться от проблем с CSS-свойством right в IE6
Заранее спасибо!
Сергей, НЕскругление для, например, нижних уголков работает только в ИЕ (проверял в 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_
Opera/FF – как обычно великолепно, IE8 не показывает скругление. Перепробовал несколько jquery-способов – не хочет и всё тут. Может кто сталкивался? Настройки практически дефолтные, выполнение сценариев разрешено, java стоит последняя.
В IE8 поменялся способ инициализации VML, поэтому не работает. В следующей версии будет исправлено.
Как же бесит самоуверенность и наглость M$. Три браузера отображают всё четко и только у IE свое особенное мнение…
А когда ожидается новая версия?
Я еще не видел более удобного и короткого использования библиотеки: буквально в две строки
Пока не знаю. Надеюсь, скоро появится время. Разработка, кстати, тут:
эм.. библиотека уже поправлена?
Или ie8 опять глючит, или … Но в нем углы сейчас скругляются.
Думаю, Вы уже в курсе, но есть багрепорт — довольно неприятный глюк.
Кстати, где будут в дальнейшем появляться актуальные версии (если будут
) — на GitHub или на Google Code?
IE 7 констукция валит все.
IE 7, input, класс rounded rc10, валится все.
На github. Разработка пока на паузе, не хватает времени доделать.
сорри за повтор.
В FireFox нашел весьма печальный баг.
Применение -moz-border-radius к изображениям не дает в FF никакого результата, поэтому в такой ситации ничем помочь (пока) не может. Т.е. в остальных браузерах все классно – уголки дорисоваваются и вуаля. А в FF полагаемся на border-radius и пролетаем. И такая фигня в мозиле даже в версии 3.6
Очень понравилось. Спасибо за хороший компонент.
В 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-код:
не могу определить корни этой ошибки
Эх, если бы можно было вместо бекграунда у уголков выставлять что-то типа opacity: 0; А то на сложных фонах данная библиотека бесполезна((
Хороший скрипт, то что искал, автору спасибо…
Очень печально, что изображения в фоне не поддерживаются.
Класс отличный, но только в IE8 вываливается куча ошибок, хотя при этом скругление всеравно происходит )))
а в ie9 не пашет, есть варианты ?
не работает в IE9
зато в IE9 — работает border-radius
Ну я думал раз сказано, что “Работает во всех современных браузерах: IE6+, Safari 3+, Firefox 2+, Opera 9.25+.”
выходит IE9 не современный браузер )))