Круглые уголки, интересные варианты

23 Jun, 2008

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

Обычный вариант

На всякий случай расскажу о банальном, и основном способе вёрстки круглых краёв у блоков. Это всего лишь несколько обёрнутых один в другой дивов. Вот так:
  1. <!-- BEGIN блок с круглыми краями -->
  2. <div class="content">
  3. <div class="in1">
  4. <div class="in2">
  5. <div class="in3">
  6. наконец контент!
  7. </div>
  8. </div>
  9. </div>
  10. </div>
  11. <!-- END блок с круглыми краями -->
Для уголков соответственно берутся картинки вроде этой:

уголок Закругленный уголок, обычно нужно 4 штуки, для каждого из углов

Расставляются уголки вот так:

  1. .content{background:url(../img/top-left.png) no-repeat top left}
  2. .in1{background:url(../img/top-right.png) no-repeat top right}
  3. .in2{background:url(../img/bottom-left.png) no-repeat bottom left}
  4. .in3{background:url(../img/bottom-right.png) no-repeat bottom right}

Вариант на wordpress.org, css only

  1. .block{
  2. -moz-border-radius: 3px;
  3. -khtml-border-radius: 3px;
  4. -webkit-border-radius: 3px;
  5. border-radius:3px;
  6. }
Это сработает везде кроме IE (и Opera всё собирается), а это сейчас уже, вобщем, немало. Потому для не очень важных мест, или для сайтов с известной статистикой, это можно делать уже сейчас.

Также идеально подходит для ресурсов, которые хотят выказать своё идеологическое "Фе" неполноценным, по их мнению, броузерам.

Вариант на beta.ya.ru

Всем верстальщикам знаком неприятный момент при загрузке круглых уголков. Они грузятся по очереди, и иногда это выглядит довольно неопрятно. Решить эту проблему можно, если поместить все уголки в одну картинку, и затем просто смещением позиции фона, расставить их. Но возникает вопрос — «Как это сделать, черт возьми?».

В Яндексе эту проблему решили. На главной можно пронаблюдать кнопочку «Присоединиться». (тем кто залогинен, нужно выйти, на секунду)

кнопка на beta.ya.ru При увеличении шрифта, кнопочка будет расти. Более того! Фоном для нее может служить любой рисунок или градиент(имеется ввиду подложка, которая сейчас белая)

Вот какой применяется HTML:
  1. <a href="#" class="b-button b-button-orange">
  2. <i class="t"><i></i></i>
  3. <i class="r"><i></i></i>
  4. <i class="b"><i></i></i>
  5. <i class="l"><i></i></i>
  6. <i class="rt"><i></i></i>
  7. <i class="rb"><i></i></i>
  8. <i class="lb"><i></i></i>
  9. <i class="lt"><i></i></i>
  10. <b>Присоединиться!</b>
  11. </a>
Выглядит страшновато, но на самом деле все очень просто, и с помощью всего двух таких вот необычных картинок:

Все круглые края, а также верх и низ кнопки

Левый и правый края кнопки. Картинка на самом деле 32x1 пиксель, но я её растянул, чтобы было видно.

Настоящие математики думаю оценят красоту задачи: "парой картинок реализовать круглые края".

Вуаля, нам удалось реализовать круглые края, еще и с отличающейся от цвета фона границей.

Полный код я приводить не буду, скажу лишь, что всё замешано на position:absolute и background-position. Кому интересно, весь CSS-код находится в начале этого файла.
Остается только преклониться перед мастерством, и я бы сказал, изворотливостью профессионалов работающих в Яндекс (Крыму привет!). =)

Вобщем-то этот пост я затеял, чтобы поделиться Яндекс и "вордпресс" вариантами. Надеюсь и у вас в загашнике что-то есть.

Cсылки

Проблема, мягко говоря, изучена вдоль и поперёк. Несколько полезно-интересных ссылок. Рад буду услышать Ваш оригинальный способ для круглых уголков! Я думал, что применял всё что известно, но оказалось что о двух рассказанных сегодня в посте, я всерьез не задумывался никогда.

ЗЫ: никогда никого не просил о помощи в этом блоге, но если Вы учитесь(учились, работаете) на физфаке МГУ и у вас добрая душа (или вы просто хотите улучшить карму, как это делает Earl), дайте знать пожалуйста, я в долгу не остаюсь.

79 комментариев к “Круглые уголки, интересные варианты”

1.Vincente | 13 Apr, 2010
Сейчас верстаю и столкнулся с проблемой, что картинка с закруглёнными углами должна быть поверх бордюра, но блок с картинкой внутри самого большого блока, под бордюром... Может нужно поэкспериментировать с относительным расположением блоков с закруглёнными уголками?
2.Скругление углов CSS | Мир CSS | 07 Apr, 2010
[...] изображений. Обязательно читать комменты! Читаем скругление [...]
3.sidewinder | 22 Jun, 2009
Спасибо. Много ценной информации нашёл в комментариях
4.Создание закругленных кнопок для сайтов &laquo; Olgaolive&#8217;s Weblog | 01 Jun, 2009
[...] Круглые уголки, интересные варианты [...]
5.jul | 14 May, 2009
что-то не понимаю с кнопкой "присоединяйтесь". сразу все получилось в firefox, но в IE 6 нижнее и верхнее поля выползают на ширину 100% на необозримые дали(хотя уголки при этом ставятся на нужные места). а левая и правая границы куда-то прячутся. вероятно проблема с height 100%.
6.Genn | 23 Jun, 2008
Ээээрлиик!
7.Никита Васильев | 23 Jun, 2008
Я ещё использую SVG/VML метод. Он масштабируется.
8.akella | 23 Jun, 2008
@Genn: Крабовщик! @Никита: Огромное спасибо! Никогда еще с этим не сталкивался :) Учиться, учиться и еще раз учиться. Это как раз то, чем я и призывал делиться. А я всегда гадал, ну неужели нет какого-то ИЕшного "комбо" для круглых краев. Добавил ссылку в поcт.
9.enternet | 23 Jun, 2008
Ух ты, мой способ используют! 8-) Никита, я так понимаю, ты и SVG уже применяешь. А я всё никак не соберусь добавить в свой способ SVG, чтоб ещё и в опере 9.5 заработало. Есть с SVG какие-нибудь особые подводные камни?
10.Ivan A-R | 23 Jun, 2008
А я в своё время тоже пришел к "обычному" методу, но использовал только одно имя класса за счёт того, что CSS это всё-таки *каскадные* таблицы =) По ссылке примерчик =)
11.akella | 23 Jun, 2008
@Ivan A-R: Если внутри больше нет дивов :) полностью согласен. Но я после всяких визуальных редакторов, и различных трансформаций моей верстки уже боюсь полагаться на каскад :) @enternet: так ведь круто же :) И работает!
12.Vitaly Harisov | 23 Jun, 2008
Это ты ещё в -ie.css не посмотрел, вот там [с]трах, чтобы реализовать left: 0; right: 0; и top: 0; bottom: 0; для MSIE.
13.Ney | 23 Jun, 2008
Есть для jQuery плагин, который умеет рисовать уголки. К слову, он умеет рисовать не только круглые уголки ;) Вот ссылка если кому интересно - http://www.malsup.com/jquery/corner/
14.macgera | 23 Jun, 2008
"Это сработает везде кроме IE (и Opera всё собирается)" - Тупость! Уже давно пора. Я раньше делал 4 уголка флоатил их а между 1у 2у и 3у 4у вставлял div с контентом, в итоге резиновый и ввысоту и в ширину блок с углами. А сейчас туоп на все забил CSS3 РУЛИТ!
15.Николай громов (nicothin) | 23 Jun, 2008
на zit - явная избыточность кода - применимо в отдельных редких случаях. код вордпрессовского сайта не валиден (2 и 3 спецификации) чаще всего применим первый вариант. лично я использую еще один - когда рисуется картинка максимальной высоты и нужной ширины и используются два вложенных элемента, один из которых составляет верхние уголки, а второй, тянущийся вниз, - нижние (облако тегов, рамки комментариев к статьям на моем сайте)
16.Сергеев Сергей | 23 Jun, 2008
для мелких целей использую VML+SVG решение под jQuery http://www.parkerfox.co.uk/cornerz/ а так в основном технологию "скользящих дверей" http://www.alistapart.com/articles/slidingdoors/ очень для однострочных кнопок удобно или для блоков фиксированной длины или ширины
17.Смоленский | 23 Jun, 2008
Неплохой пост -сразу видно человек виртуоз в css
18.Саня | 23 Jun, 2008
Отлично. Я как раз учу каскадные стили - очень полезно. Спасибо!
19.Павел Власов | 24 Jun, 2008
Бездушные роботы…
20.akella | 24 Jun, 2008
@ Павел: Как видно по ссылке на слове "Смоленский", они пожирают сами себя =) @Vitaly: ОМГ, вот теперь я проникся окончательно! PITA Кто скажет что это не круто, будет иметь дело со мной!
21.Larsz | 24 Jun, 2008
Давно слышал, но только недавно попробовал в действии старый добрый метод от Роджера Йоханссона http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/ остался очень доволен.
22.Серега | 24 Jun, 2008
Спасибо! Класная статья! =) +1
23.pepelsbey | 24 Jun, 2008
Не стоит забывать, что решение с супом из i-блоков и одной картинкой такое избыточное потому, что это не просто уголки, а резиновые_полупрозрачные уголки, которые можно положить на любой фон. Отсюда основные сложности.
24.akella | 24 Jun, 2008
@Pepelsbey: да я же без тени иронии =) Это действительно круто! Я очень уважаю чужой код, да еще написанный настоящими профи.
25.Panya | 24 Jun, 2008
Ещё вот такое есть: http://noinimod.ru/3/ но тут есть ограничения, нужен включённый js (для экспершенов в IE), таким способом нельзя сделать полупрозрачные уголки. Получается вариант от яндекса, при всей своей избыточности разметки, самый пуленепробиваемый. Спасибо ребятам за него, будем использовать.
26.Kildor | 24 Jun, 2008
по поводу «Опера всё собирается» — они утверждают что «когда создавался родмап на 9.5, спецификация CSS была в разработке, и её зафиксировали уже слишком поздно для включения в 9.5 ветку». PS: я niftyCorners пользуюсь (если браузер не знает js, это уже его проблемы), и всё смотрю на SVG, но руки не доходят в живом проекте применить.
27.pepelsbey | 25 Jun, 2008
> да я же без тени иронии А я, в общем-то, без обиды ) Лично мне такое решение кажется слишком уж узкоспециализированным и мегаманьячным. Ну и при увеличении-уменьшении шрифта случаются заметные несостыковки.
28.Gan | 26 Jun, 2008
чо то я не понял не много! если убрать всю эту поебень градиентовую растяжку прозрачность, то способ который в яндексе используется таким же образом как и первый способ c различием только что картинки объединены в спраит который позиционируются?
29.akella | 26 Jun, 2008
Так и есть, но все эти спрайты и растяжки — это очень много. К тому же спрайты там используются для абсолютно спозиционированных элементов, это не совсем так как в первом способе.
30.Tutta Karlsson | 27 Jun, 2008
Здравствуйте Акелла! Бордеры на любой вкус. Прямо-таки, сумашедшие бордеры. Без картинок. Без скриптов. Без хаков. Без векторов. Только CSS и ничего больше. Все это кроссбраузено. Но такой ОГРОМНЫЙ код стилей мог создать только сушедший Стью Нихолс ( Stu Nicholls)! www.cssplay.co.uk/boxes/krazy.html
31.Tutta Karlsson | 27 Jun, 2008
На стол гурманам CSS
32.akella | 27 Jun, 2008
Здравствуйте, Тутта. При всем моем безмерном уважении к Stu, в данном случае Яндексовцы его все же сделали по коду :) Спасибо за классный линк!
33.Tutta Karlsson | 27 Jun, 2008
Я хотела написать "сумашедший" Стью ... Не знаю, кто "первый начал", но идея использовать теги лог. форматированя для бордера очень похожи ... Первоначальные варианты (прототипы) всегда менее совершенны наследников. Правда, Сью изначально заложил бОльший динамический диапазон в код стилей ради всяческих фантазий. Но размер пугает, конечно же.
34.Tutta Karlsson | 27 Jun, 2008
И ни одной картинки !!
35.akella | 27 Jun, 2008
Ладно :) Сдаюсь!
36.Del'ka | 27 Jun, 2008
я делаю через :before :after (для нормальных браузеров) и expression с insertAdjacentHTML (для IE). Вдохновлён этой идей был отсюда: http://habrahabr.ru/blog/css/27019.html Имхо лучше метода непридумаешь - ни по духу, ни по букве.
37.Tutta | 29 Jun, 2008
REM: Если в суе упомянули вектор (SVG), то зачатки "CSS-flash" можно увидеть здесь: www.webkit.org/specs/CSSVisualEffects/CSSAnimation.html
38.Лепесток | 01 Jul, 2008
Спасибо за ценную информацию! А отдельное спасибо за ссылки!
39.Vitaly Harisov | 30 Jun, 2008
я делаю через :before :after (для нормальных браузеров) и expression с insertAdjacentHTML (для IE). Вдохновлён этой идей был отсюда: http://habrahabr.ru/blog/css/27019.html Имхо лучше метода непридумаешь - ни по духу, ни по букве.
Как только фон под блоком с уголками становится неизвестным, этот метод перестаёт работать. К тому же, в нём 4 картинки, которые не собрать в спрайт.
40.Andrew | 01 Jul, 2008
Интересная статья, спасибо! :) Люблю закругленные уголки.
41.Роман | 02 Jul, 2008
Решение на сайте beta.ya.ru не понравилось абсолютно. Не гибкое. Размер кнопки фиксирован, не зависит от текста.
42.Евгений | 04 Jul, 2008
Большое спасибо, весь день с этими уголками сидел, пока не нашел вашей статьи ничего не получалось!
43.HTML и CSS, доступность и юзабилити — Life Style &raquo; &raquo; Вебдайджест (3.7.08) | 03 Jul, 2008
[...] созданием закругленных уголков у элементов, на блоге Cssing можно подсмотреть несколько [...]
44.Берг | 04 Jul, 2008
Если бы браузеры понимали 3-й CSS, трудностей вообще не было бы, т.к. в CSS3 предусмотрены округленные углы. http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius
45.Юлия | 05 Jul, 2008
Очень хороший пост. Добавила Ваш блог в закладки. Есть много ценных и полезных мыслей, которые я применю на деле. Но понадобится еще время, чтобы осмыслить информацию. Даже сейчас, когда после прочтения текста Вашего поста, в тот момент, когда пишу комментарий, я думаю, о тех вещах, смысл которых мне теперь совсем по другому видится. Эх, что за день сегодня – полезный день.
46.Семен | 06 Jul, 2008
есть мысли в голове в автора!голова в порядке видно
47.freelancer | 06 Jul, 2008
очень занемательная статья, главное сколько творческих решений при желанни можно еще найти в верстке.
48.Клим | 07 Jul, 2008
Довольно интересное решение и что приятно без картинок - опробую.
49.Дмитрий | 09 Jul, 2008
вполне приемлимо и картинок ставить не надо :) получаеться вроде нормально
50.Игорь | 09 Jul, 2008
Да прикольно, решение оч оригинальное, надо попробовать, пасиб за идею:)
51.alio | 10 Jul, 2008
Спасибо, весьма полезная информация
52.Роман | 11 Jul, 2008
круто!!! Попробовал получилось с первого раза, хорошо объясняешь.
53.Сергей Воронин | 12 Jul, 2008
Спасибо, понадобилось.
54.Алексей | 12 Jul, 2008
Долго искал, спасибо за советы!
55.9 статей на тему круглых кнопок | BlogFIX | 17 Jul, 2008
[...] ? руглые уголки, интересные варианты Минус: слишком большое количество тегов i при реализации. Плюс: не зависит от размера шрифта, быстрое создание нового скина, не зависит от фона на котором лежит, при отключенных картинках белая ссылка будет на нужном фоне (в данном случае оранжевом). Статья на русском. [...]
56.? руглые кнопки в HTML | Непутевые заметки | 17 Jul, 2008
[...] ? руглые уголки, интересные варианты [...]
57.cross | 17 Jul, 2008
Класс, идея с кружечком открыла глаза, что есть хорошие подходы к рисованию закругленных уголков.
58.Del'ka | 20 Jul, 2008
Как только фон под блоком с уголками становится неизвестным, этот метод перестаёт работать. К тому же, в нём 4 картинки, которые не собрать в спрайт.
ну картинки можно и в png-24 cохранить, а для IE всё равно генерим span'ы - так что с фильтром проблемы не будет. в реальных проектах ширина зачастую фиксирована и я использую только background, верх на before, низ на after, боковые линии - на сам блок с контентом, тут спрайты.
59.N! | 20 Jul, 2008
Vitaly Harisov, "К тому же, в нём 4 картинки, которые не собрать в спрайт." Но эти 4 картинки можно включить в css посредством data:url (mhtml для IE)
60.Vitaly Harisov | 20 Jul, 2008
Как только фон под блоком с уголками становится неизвестным, этот метод перестаёт работать. К тому же, в нём 4 картинки, которые не собрать в спрайт.
ну картинки можно и в png-24 cохранить, а для IE всё равно генерим span’ы - так что с фильтром проблемы не будет.
Вы сначала сделайте, а потом говорите.
в реальных проектах ширина зачастую фиксирована и я использую только background, верх на before, низ на after, боковые линии - на сам блок с контентом, тут спрайты.
В моих реальных проектах ширина/высота не фиксированна.
61.Vitaly Harisov | 20 Jul, 2008
Vitaly Harisov, “К тому же, в нём 4 картинки, которые не собрать в спрайт.” Но эти 4 картинки можно включить в css посредством data:url (mhtml для IE)
Вы так делали? Насколько удобно перегенерировать CSS при изменении картинки? Мне нифига не удобно. Поэтому спрайт.
62.tarusexpert | 22 Jul, 2008
Всегда думал, что IE всеяден, то есть он неправильный код отражает неправильно, таким образом минус на минус дает плюс. То есть в итоге неправильно составленный код в IE отображается нормально. А тут IE и не может отразить?
63.Del'ka | 24 Jul, 2008
Насколько удобно перегенерировать CSS при изменении картинки?
имхо дополнить спрайт и отредактироват css - примерно одинаковые затраты.
64.N! | 25 Jul, 2008
Вы так делали? Насколько удобно перегенерировать CSS при изменении картинки? Мне нифига не удобно. Поэтому спрайт.
Да, делал. Перекодировать новые изображения в base64 не намного сложнее чем создать новый спрайт. По крайней мере для меня. :) Тем паче в обсуждаемом нами методе (полукруглые уголки через :before :after) спрайты использовать нельзя. :)
65.CSS: создание закругленных углов на сайтах | Журнал веб разработчика | 25 Jul, 2008
[...] сайты: http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/ http://cssmake.ru/-boxes/5–boxes/79-gradientcorners.html [...]
66.Андрей | 28 Jul, 2008
Автор действительно виртуоз в css и спасибо что поделился информацией !!
67.2008 | 31 Jul, 2008
сначала делаем большую картинку.. закругленные углы в картинке находяться чуть ниже и правее левого верхнего угла типа "+" у которого "обрезаны" гдето на треть левая и верхняя палка и потом position-ом "вырезаем" из этой картинки необходимые нам кусочки, типа верхняя левая часть картинки - правый низ закругленного бока итд...
68.am.zoomby.org | 07 Aug, 2008
есть вариант, как сделать закруглённые уголки совсем без изображений! Только бы вспомнить... :)
69.DeVoid | 12 Aug, 2008
Спасибо! Интересная статья - интересные комментарии )) Хотя я считаю что заокругленная-отзеркаленная символика WEB2.0 скоро изменится на что-то новое :)
70.Daddy | 17 Aug, 2008
[…] ? Круглые уголки, интересные варианты […]
71.DRON | 18 Aug, 2008
Как раз хотел поправить дизайн на одном из моих сайтов. Спасибо!
72.faw | 05 Sep, 2008
Даже без картинок приличный вид получается, побольше бы таких профессиональных подсказок!
73.Кровавый Инк | 05 Sep, 2008
Я сделал по другому немного. У меня CSS'ом на 4 части режется картина с кругом :) Задается изображение Background'ом, указываются координаты и размер - 1/4 картинки с кругом. Получается 4 класса - по 1 на каждый закругленный угол. :)
74.crazydima | 18 Sep, 2008
таблицами нада и не парица :)
75.Обзор №7, июнь 2008 | Все обо всем!!! | 05 Nov, 2008
[...] Круглые уголки, интересные варианты Пара способов создания закругленных уголков. [...]
76.cssing :: Архив :: CSSing 2008 | 30 Dec, 2008
[...] ? руглые уголки, интересные варианты — несколько подсмотренных техник для круглых уголков [...]
77.Закругленные, круглые кнопки в HTML | 27 May, 2010
[...] ? руглые уголки, интересные варианты [...]
78.Волос | 29 Sep, 2011
У меня главная страница весит 105 кб столкнулся с проблемой уменьшения веса, буду экспериментировать с блоками (менять некоторые изображения на код)
79.Турист с Алтая | 17 Nov, 2011
А почему не использовать картинки?