Перечитал тучу информации по верстке скруглённых углов. Все предлагают какие-то исполинские обёртки из div’ов или еще хуже с использованием изображений. Всё это мне не подходит, слишком сложно. Один раз добавить еще можно, но потом, спустя продолжительное время (когда подзабыл уже что к чему), редактировать такой код — сущее испытание.
В FireFox и Chrome есть специальные CSS правила, решающие данную проблему:
.round { -moz-border-radius:12px; -webkit-border-radius:12px; }
Но в IE невозможно сделать круглые углы без изображений и прочих извращений хаков. Вот для чего нужен CurvyCorners. CurvyCorners определяет “-webkit-border-radius” и “-moz-border-radius” правила для DOM элементов и сам вставляет обёртку для этого элемента, чтобы сымитировать круглые углы. Для меня важно ещё, что не используется никаких изображений. Таким образом использование круглых углов в IE становится таким же простым как и в FF, вот пример. В Opera этот скрипт тоже работает. Важно, так же, что поддержка такого кода существенно упрощается.
В общем, если нужно легко и быстро сделать блоки со скруглёнными углами — лучше CurvyCorners я не знаю.
UPD: Со временем, благодаря коментаторам, выяснилось гораздо более красивое и качественное решение — jquery.corner.js. Более качественная реализация, работает быстрее и, что гораздо важнее, не заброшена автором. Я в своём коде теперь использую её.
В IE6 не работает))
я не работаю с IE6, извини 🙂
я тоже, но приходится работать с 35-40% посетителями рунета у которых это чудо 🙂 если интересно, нашел легкий скрипт, который работает во всех версиях IE — http://www.dillerdesign.com/experiment/DD_roundies/ ))
Конечно интересно 🙂
единственный баг был мною замечен на IE8 — когда в блоке фоновая картинка, то углы закругляются, но картинка пропадает) временно решил заменой строчки в скрипте — el.runtimeStyle.backgroundImage = ‘none’ на el.runtimeStyle.backgroundImage = elStyle.backgroundImage и убрал закругленность верхних углов) тоже не все гладко, но из всех вариантов, типа кучи пустых div’ов и рисованных уголков, этот самый разумный и пользователи IE6, 7 и 8 видят закругленные углы 🙂
Хорошая штука, но вот закругленный таким образом не расширяется динамически надлежащим образом, если вдруг случится такая необходимость. По-моему, лучше плагин для IE jquery.corner.js . А еще лучше не пользоваться IE всех версий и советовать также другим не использовать его. Благо, пользователи линукса от него избавлены.
Согласен с мнением про IE.
И с тем, что jquery.corner.js по-лучше будет.
Спасибо!
Пробовал CurvyCorners — в IE8 ни в какую не хотел работать, упорно сообщал о брошеном, но не пойманом чем-то там))) Поставил jquery.corner.js — и о чудо, все сразу заработало! Класс, взял себе в копилку!