войти зарегистрироваться

Web-разработка whois

индекс
184,85

38 статей о создании закругленных углов на сайтах

Моя статья на Временно.нет


38 статей о создании закругленных углов на сайтах

Часто сталкиваешься с необходимостью создания блоков с круглыми краями. Задавшись вопросом как вообще можно решить поставленную задачу, сделал подборку интересных статей и уроков на данную тему.

Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации.


Без использования пустых тегов

Простой, семантически правильный CSS блок с чистым кодом

Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.
Простой, семантически правильный CSS блок с чистым кодом


Круглые углы в CSS

Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.
Круглые углы в CSS


CSS тизер-блок

Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.
CSS тизер-блок


Ссылки на последние новости

Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).
Ссылки на последние новости


CSS и круглые углы: Границы с дугами

Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.
CSS и круглые углы: Границы с дугами


Озаглавленные сверху углы

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


Создание скругленного блока или дизайн с CSS и XHTML

Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.
Создание скругленного блока или дизайн с CSS и XHTML


Резиновый блок с легко изменяемыми углами и поверхностью

Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.
Резиновый блок с легко изменяемыми углами и поверхностью


Закругленные углы бордера

Не является полным уроком, но показывает принцип использования единичного бордера и картинки.
Закругленные углы бордера


Круглые угла в CSS

Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.
Круглые угла в CSS


Создание произвольных углов и границ

Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.
Создание произвольных углов и границ


«Пуленепробиваемые» круглые углы

Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.
Пуленепробиваемые круглые углы


Рисование теней и рамок элементов оформления

Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.
Рисование теней и рамок элементов оформления


Круглые углы с фиксированной шириной

Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс — очень простая реализация.
Круглые углы с фиксированной шириной


CSS тянущийся блок с 4 произвольными углами

Вполне хороший урок. Возможность отбрасывания теней. Плюс — возможность создания заголовков.
CSS тянущийся блок с 4 произвольными углами


Делаем закругленные уголки с помощью псевдоэлементов :before и :after

Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.
Делаем закругленные уголки с помощью псевдоэлементов :before и :after


Создание произвольных углов и границ. Часть II

Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.
Создание произвольных углов и границ. Часть II


Круглые углы в DIVах

Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.
Круглые углы в DIVах


Круглые углы и блоки с тенью

Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.
Круглые углы и блоки с тенью


Занимательная верстка

Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.
Занимательная верстка


Использующие пустые теги

Еще больше круглых углов с CSS

Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.
Еще больше круглых углов с CSS


CSS резиновые круглые углы

Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.
CSS резиновые круглые углы


CSS: Умные углы

Использует один пустой для верха и два для низа. Вполне приятная реализация.
CSS: Умные углы


Как сделать тянущиеся по ширине divы с круглыми краями

Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев :)
Как сделать тянущиеся по ширине divы с круглыми краями


Тянущиеся круглые углы

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


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

Способ безкартиночного создания закругленных углов. Но много пустых элементов <B> (способ, аналогичный блокам GMail).
Закругление углов без использования изображений


Использующие JavaScript

Представление DomCorners

В статье есть несколько вариаций на тему количества используемых изображений. Минус в использовании пустых тэгов.
Представление DomCorners


Прозрачные произвольные углы и границы. Версия 2

Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.
Прозрачные произвольные углы и границы. Версия 2


Nifty углы со сглаживанием

В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.
Nifty углы без сглаживания


Круглые углы

Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.
Круглые углы


http://www.curvycorners.net

Отдельный сайт посвященный круглым углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.
www.curvycorners.net


Nifty Corners Cube

Очень популярный скрипт, позволяющий создать круглые углы без изображений. Очень много вариантов реализации.
Nifty Corners Cube


RUZEE.Borders — круглые углы с помощью яваскрипта

Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.
RUZEE.Borders – круглые углы с помощью яваскрипта


jQuery скругление

Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.
jQuery скругление


Генераторы круглых краев

RoundedCornr

Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.
RoundedCornr


Spiffy Corners

Очень простой генератор. Но генерирует очень большое количество элементов <B>.
Spiffy Corners


Spanky Corners 1.1

Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.
Spanky Corners 1.1


Spiffy Box

Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.
Spiffy Box


+4
24 июля 2008, 14:20
692
Grayscale

комментарии (78)

  • Памятник тому прочитает каждую статью от и до.
    Может, стоит выделить лучшие?
    • А мне пришлось каждый способ еще прочитать) чтобы его описать)
    • Имхо лучший вариант Заголовки и другие элементы картинками
      один div, работает в IE (в комментариях на хабре есть важные правки для IE)
      если ширина нефиксированна - картинки можно завернуть в спрайт,
      а если нефиксирована, то внедрить в css через data:URL/mhtml
      • а если ширина нефиксированна?
        • А теперь хотелось бы выслушать начальника транспортного цеха ))
        • пример изначально работает для нефиксированной ширины
          я говорю за дополнительную оптимизацию:
          • если фиксированна - можно неиспользовать content, а только background, а картинки соответственно сложить в спрайт
          • если нефиксированна - вместо 4-х картинок можно внедрить их в css через data:URL/mhtml
          • Мы тут позволили себе подшутить над Вашей опечаткой в комменте выше. Судя по всему, Вы не поняли :)
      • Слишком много картинок(4 вроде).
        • ну так и угла 4, а как ещё?
          а картинки можно оптимизироват в спайты или data:URL
      • Это не лучший вариант. Это хороший вариант только если нужно сделать блок с закругленными углами с однородным фоном на однородном фоне. В других случаях этот вариант не годится. + используется expression для ie что не очень кошерно (без js круглых уголков не будет)
        • IE без js - редкость. Там не каждый найдёт где вообще этот js выключается.
          Если у долей процента юзеров сайт рабочий, читабельный, но будет без нафик неужных круглых уголков - это нестрашно.
      • Я использую способ с нефиксированной шириной и спрайтом. Приглашаю посмотреть на него, вдруг подойдет.
    • Лучшие не упомянуты 8-)
      http://blog.ad.by/2008/03/nice-rounded-corners-for-ie-safari.html
      http://bolknote.ru/2008/07/18/~1786
      • ну, первая не работает в опере, а у второй как-то все очень замудрено)
        Хотя теперь вот упомянуты)
        • Так первая писалась до выхода Opera 9.5,
          А вторая это первая плюс SVG для оперы 9.5.
  • По моему очень полезная информация, думаю многие почитают!
  • да уж. автор этого обзора титан! много полезной информации
  • замечательно! спасибо
  • 38 попугаев
  • я использую PNG в качестве фона, и тени можно реализовать и полупрозначность, а для IE, есть фикс, который на хабре выкладывали!
    • Для этого есть много различных фиксов ;) каждый пользуется каким ему удобно.
  • 15 статей на хабре со списком разного количества других статей.
    • Ну если вам удобно при необходимочти читать все 15, то я в общем-то не против)
      • Вы не поняли, я предложил тему для еще одной статьи :)
        • Мы уже думаем над этим и готовим материал))
        • Конечно же шутка)
  • Интересная тема, помню как несколько лет назад только фоновыми изображениями такое делал :) Сейчас же с css куда удобнее..
    • удобнее с яваскриптом)))
      • От данной реализации пришлось откреститься, как от ужасающей по ресурсоёмкости (использовался 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://cssing.org.ua/2008/06/23/rounded-…
  • сунул в фавориты

    а вообще порой хочется убить дизайнера за подобные плюшки на каждой маломальской фиговине -.-
  • спасибо, положил в закладки :)
  • Спасибо огромное!
  • Спасибо! В избранное!
  • Минусители, которые там недовольны... Мол, труд составителя и все такое. Ну вот вам к вопросу об оригинальности статей на Хабре.... 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 исходник этих картинок прислать? я в принципе могу...
    • ну если вы проверите, то там все 4 раздела вместе смешаны...
  • Спасибо.)
    Только одно «но»: «Nifty углы без сглаживания» как раз-таки со сглаживанием, а оригинальные nifty — без. Об этом как раз говорит «Anti-aliased» на скришоте. :-)
  • Спасибо за усердность, хорошая подборка.
  • В избранное!
  • Спасибо за систематизацию и краткий обзор, как раз сейчас стою перед выбором.
  • Как раз интересуюсь... а тут стока вариантов... Конечно, все за раз не осилить, но как вариант очень полезно держать по близости. Мну, как новичку однозначно, в Абсолютное Избранное. Автору мега-респект и огромное человеческое спасибо!!!
  • Спасибо, пригодится.
    Только не понимаю зачем размещать варианты, не работающие в IE? При всем желании пока что никто же не может посылать пользователей этого браузера.
  • спасибо за подборку!
  • НЛО прилетело и опубликовало эту надпись здесь.
  • НЛО прилетело и опубликовало эту надпись здесь.
  • По поводу «Как сделать тянущиеся по ширине divы с круглыми краями» и того, что не работает в IE: я делал точно такой же вариант и у меня все получилось. Может ему неповезло?
  • а есть решения для скругления (пусть даже и псевдо) углов изображений?
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.