Comments 79
Памятник тому прочитает каждую статью от и до.
Может, стоит выделить лучшие?
А теперь хотелось бы выслушать начальника транспортного цеха ))
пример изначально работает для нефиксированной ширины
я говорю за дополнительную оптимизацию:
  • если фиксированна - можно неиспользовать content, а только background, а картинки соответственно сложить в спрайт
  • если нефиксированна - вместо 4-х картинок можно внедрить их в css через data:URL/mhtml
Мы тут позволили себе подшутить над Вашей опечаткой в комменте выше. Судя по всему, Вы не поняли :)
ну так и угла 4, а как ещё?
а картинки можно оптимизироват в спайты или data:URL
Это не лучший вариант. Это хороший вариант только если нужно сделать блок с закругленными углами с однородным фоном на однородном фоне. В других случаях этот вариант не годится. + используется expression для ie что не очень кошерно (без js круглых уголков не будет)
IE без js - редкость. Там не каждый найдёт где вообще этот js выключается.
Если у долей процента юзеров сайт рабочий, читабельный, но будет без нафик неужных круглых уголков - это нестрашно.
UFO landed and left these words here
ну, первая не работает в опере, а у второй как-то все очень замудрено)
Хотя теперь вот упомянуты)
UFO landed and left these words here
Согласен. Как для меня то в большинстве случаев использую:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
и если в старых браузерах, не работает, то в основном не критично, зато очень просто.
Но другое дело, если стоит задача чтобы все работало во всех браузерах, тогда приведенная выше подборка будет полезна.

По моему очень полезная информация, думаю многие почитают!
я использую PNG в качестве фона, и тени можно реализовать и полупрозначность, а для IE, есть фикс, который на хабре выкладывали!
Для этого есть много различных фиксов ;) каждый пользуется каким ему удобно.
15 статей на хабре со списком разного количества других статей.
Ну если вам удобно при необходимочти читать все 15, то я в общем-то не против)
UFO landed and left these words here
От данной реализации пришлось откреститься, как от ужасающей по ресурсоёмкости (использовался jquery corners), данный метод работает только для IE6 из-за его болезней с позиционированием абсолютных углов внутри относительного родительского контейнера (да и то, работает неидеально).
Какой ужас. Видать, дизайнерам реально стало нечем заняться, раз они придумывают столько способов сделать одну из простейших вещей. Причём во всех случаях собствено скругления достигаются за счёт четырёх (а вернее — одного, но размноженного и отражённого) картинок-уголков. Насколько хорошо нарисовал уголок — настолько крутой будет блок со скруглением.
В последнее время попёр вал каких-то недотуториалов в подобном духе — 34 лучших буллета для списка, 65 видов иконок RSS, 77 туториалов как нарисовать жёлтую звёздочку с надписью NEW! и так далее... Какой-то разгул дешёвой кустарщины.
Это не "дешёвая кустарщина", как вы выразились, а профиссиональный подход к поставленному делу. А вы попробуйте сделать хотя бы половину работы автора!
Я не о работе составителя данного дайджеста. а о том многообразии подобных туториалов. неужто всем требуется такие простые вещи рассказывать? дожили...
Поймите сколько дизайнов, столько и подходов к ним - если у меня сайт в светло-жёлтых тонах, то мне захочеться зделать блок с такими(http://blog.josh420.com/archives/2007/11/how-to-create-fluid-width-div-layers-with-rounded-corners.aspx) краями а не с такими(http://www.schillmania.com/projects/dialog2/)
Не мне вам это обьяснять)
Ну и не мне объяснять, что такие или эдакие скругленные углы у прямоугольников никак не спасают ситуацию: если в целом дизайн бездарный, а юзабилити нелепое, то сайт таким и останется, хоть все поскругляй вокруг. А в 90% случаев скругление углов — есть признак дремучей попсы и бесконечной избитости приема. Ибо сайтов со скругленными углами миллионы. Есть смысл плодить очередной, даже если ты вооружен аж 38 методами?
>В последнее время попёр вал каких-то недотуториалов
В принципе да, надоедает. Но это намного лучше, чем полное отсутствие каких-либо туториалов и одни и те же вопросы у новичков.
может и так. да только что-то стало слишком много дайджестов туториалов для олигофренов, переводных статей ни о чем и прочей чепухи... от данного сайта почему-то ожидается большего. более интересного и оригинального, нежели перевод очередного руководства как рисовать кружочки.
Ну что-то новое и оригинальное в верстке найти сложно, если вы несколько лет этим занимаетесь. Имхо.
А при чём здесь дизайнеры? Это верстальщики буйствуют, вы не поверите!
Кстати, существуют и не-картиночные способы, правда они достаточно жутко выглядят и годятся только при маленьком радиусе закругления.

Особенно меня удивило, как вы мило побеседовали с двумя товарищами выше :) Никто не заметил, что один про фому, а другой про ерёму..
Оч. полезная статья, в избранное так скажем :) Но я все равно такие штуки верстаю с 4 картинками и таблицами, реализация простая и работает во всех браузерах корректно в отличие от различных вариантов с дивами. Вообще все стараюсь верстать блоками (DIV'ами), но иногда приходится и таблицы задействовать, ничего плохого в этом не вижу, зато все чинно и корректно вне зависимости от браузера. Как говорится, все для пользователя. :)
мне например удобней использовать jQuery т.к. я им пользуюсь, так что каждому свое)
Бесспорно, каждый выбирает вариант, который ему ближе, проще и интересней. Ничего одинакового не бывает, наверно это даже к лучшему :)
не знаю, я всегда либо 4 дивами с 4 картинками делаю (везде работает), либо вообще без картинок
Это надо закинуть в избранное и забыть об этом. Как инструментарий.
Спасибо автору!
Статья из разряда тех, которые разом не осилить, зато можно добавить в избранное и, при необходимости, обращаться
Спасибо. Статья не чтобы читать, а чтобы добавить в избранное и обращаться по необходимости.
сунул в фавориты

а вообще порой хочется убить дизайнера за подобные плюшки на каждой маломальской фиговине -.-
Минусители, которые там недовольны... Мол, труд составителя и все такое. Ну вот вам к вопросу об оригинальности статей на Хабре.... http://www.cssjuice.com/25-rounded-corne… Было 25. стало 38. Великий труд.
Автор хотя бы для приличия указал первоисточник. Но это в последнее время вполне распространенная тенденция. Хапнул инфу, перевел-как-смог... Дополнил 5-6 блоками в том же духе... И выставил как свое произведение.
Да какая разница откуда брал. Мож и на цссджус тоже слямзенное откуда. В любом случае, налицо использование чужого материала. И нелишне было бы привести ссылку на первоисточник, как это делают многие переводчики и составители дайджестов. Сугубо ради приличия хотя бы. Лично я свои статьи пишу сам, практически не используя никаких источников (ну разве только энциклопедические данные, позаимствованные из Википедии), но если вдруг решу написать (но вряд ли решу) статью на базе иноземного материала, даже если привнесу 70% собственных мыслей, все равно укажу первоисточник. Просто из вежливости и уважения к тому, кто натолкнул меня на идею написания такой статьи.
Что значит ссылка на первоисточник? первоисточник чего? или вы гугл имеете ввиду?
Ну и к чему это? Или вы утверждаете, что вот так вот сели и с нуля, не исопльзуя НИКАКИХ источников, написали эту статью, не зная, что существует еще с десяток подобных дайджестов:

http://www.smileycat.com/miaow/archives/…
http://www.cssjuice.com/25-rounded-corne…
Да или даже в гугле: http://www.google.ru/search?q=25+rounded…
Я не понимаю, что вы от меня хотите, у меня в закладках оперы порядка 60 статей про круглые углы, которые накопились за 6 месяцев, потом я разом открыд их всех и выбрал наиболее удачные. Дак в чем проблема?
Нда, почитала ваши комменты в других тредах.. это клиника.
Статьи про типографику, возможно, и хорошие, но с таким характером и такой страстью к говнометанию — лучше бы вы на хабре не появлялись, ей-богу.
1. скриншоты у чувака вырезаны местами немного по-другому, и весят иначе. Вы действительно думаете, что он их передрал, чтобы сидеть, пережимать, подрезать и пересохранять каждый?

2. У всякого верстальщика в закладках постепенно скапливаются ссылки на кучу способов решения разных проблем. Я сейчас на основе закладок легко составлю дайджест "пять способов прижать футер к низу" или "десять статей про полупрозрачность в IE6".

3. А вы каким способом создания закруглённых уголков пользуетесь? Почему-то мне кажется, что никаким. Если бы вы хоть раз кроссбраузерно сверстали блок с закруглёнными углами прозвольной ширины и высоты, который мог бы располагаться на неоднородном фоне, то потом не сравнивали бы это с рисованием кружочков, и знали бы, что реализаций там множество, и все они имеют разнообразнейшие преимущества и недостатки.

На основе всего вышесказанного (если вы видите там ошибки — я вас внимательно слушаю) просится вывод, что вы залезли в тему, в которой не разбираетесь, а к автору "дое%ались"(с) на основе совершенно надуманных претензий.
Эт я вообще не ктому что, мол, дое%ался и все такое. Просто мне кажется, нужное какое-то уважительное отношение к тем, кто сделал что-то раньше вас. Хотя если вы точно без вообще каких-либо имеющихся статей вроде указанных абсолютно с нуля сделали свой обзор, то, разумеется, снимаю шляпу и все такое. Но почему-то не верится в это. Ведь даже скриншоты в западной статье и в вашей идентичны.
Эм...может вам еще PSD исходник этих картинок прислать? я в принципе могу...
Спасибо.)
Только одно «но»: «Nifty углы без сглаживания» как раз-таки со сглаживанием, а оригинальные nifty — без. Об этом как раз говорит «Anti-aliased» на скришоте. :-)
Спасибо за систематизацию и краткий обзор, как раз сейчас стою перед выбором.
Как раз интересуюсь... а тут стока вариантов... Конечно, все за раз не осилить, но как вариант очень полезно держать по близости. Мну, как новичку однозначно, в Абсолютное Избранное. Автору мега-респект и огромное человеческое спасибо!!!
Спасибо, пригодится.
Только не понимаю зачем размещать варианты, не работающие в IE? При всем желании пока что никто же не может посылать пользователей этого браузера.
UFO landed and left these words here
UFO landed and left these words here
По поводу «Как сделать тянущиеся по ширине divы с круглыми краями» и того, что не работает в IE: я делал точно такой же вариант и у меня все получилось. Может ему неповезло?
а есть решения для скругления (пусть даже и псевдо) углов изображений?
Only those users with full accounts are able to leave comments. Log in, please.