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

23 June, 2008

XHTML/CSS, Полезности

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

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

На всякий случай расскажу о банальном, и основном способе вёрстки круглых краёв у блоков. Это всего лишь несколько обёрнутых один в другой дивов. Вот так:

  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>

Выглядит страшновато, но на самом деле все очень просто, и с помощью всего двух таких вот необычных картинок:

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

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

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

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

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

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

Cсылки

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

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

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

XHTML/CSS, Полезности

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

Genn | 1. 23 June, 2008

Ээээрлиик!

Никита Васильев | 2. 23 June, 2008

Я ещё использую SVG/VML метод. Он масштабируется.

akella | 3. 23 June, 2008

@Genn: Крабовщик!

@Никита: Огромное спасибо! Никогда еще с этим не сталкивался :) Учиться, учиться и еще раз учиться. Это как раз то, чем я и призывал делиться.
А я всегда гадал, ну неужели нет какого-то ИЕшного “комбо” для круглых краев. Добавил ссылку в поcт.

enternet | 4. 23 June, 2008

Ух ты, мой способ используют! 8-)
Никита, я так понимаю, ты и SVG уже применяешь. А я всё никак не соберусь добавить в свой способ SVG, чтоб ещё и в опере 9.5 заработало. Есть с SVG какие-нибудь особые подводные камни?

Ivan A-R | 5. 23 June, 2008

А я в своё время тоже пришел к “обычному” методу, но использовал только одно имя класса за счёт того, что CSS это всё-таки *каскадные* таблицы =)
По ссылке примерчик =)

akella | 6. 23 June, 2008

@Ivan A-R: Если внутри больше нет дивов :) полностью согласен. Но я после всяких визуальных редакторов, и различных трансформаций моей верстки уже боюсь полагаться на каскад :)

@enternet: так ведь круто же :) И работает!

Vitaly Harisov | 7. 23 June, 2008

Это ты ещё в -ie.css не посмотрел, вот там [с]трах, чтобы реализовать left: 0; right: 0; и top: 0; bottom: 0; для MSIE.

Ney | 8. 23 June, 2008

Есть для jQuery плагин, который умеет рисовать уголки. К слову, он умеет рисовать не только круглые уголки ;)
Вот ссылка если кому интересно – http://www.malsup.com/jquery/corner/

macgera | 9. 23 June, 2008

“Это сработает везде кроме IE (и Opera всё собирается)” – Тупость! Уже давно пора.

Я раньше делал 4 уголка флоатил их а между 1у 2у и 3у 4у вставлял div с контентом, в итоге резиновый и ввысоту и в ширину блок с углами. А сейчас туоп на все забил CSS3 РУЛИТ!

Николай громов (nicothin) | 10. 23 June, 2008

на zit – явная избыточность кода – применимо в отдельных редких случаях.
код вордпрессовского сайта не валиден (2 и 3 спецификации)

чаще всего применим первый вариант.

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

Сергеев Сергей | 11. 23 June, 2008

для мелких целей использую VML+SVG решение под jQuery
http://www.parkerfox.co.uk/cornerz/

а так в основном технологию “скользящих дверей”
http://www.alistapart.com/articles/slidingdoors/
очень для однострочных кнопок удобно или для блоков фиксированной длины или ширины

Смоленский | 12. 23 June, 2008

Неплохой пост -сразу видно человек виртуоз в css

Саня | 13. 23 June, 2008

Отлично. Я как раз учу каскадные стили – очень полезно. Спасибо!

Павел Власов | 14. 24 June, 2008

Бездушные роботы…

akella | 15. 24 June, 2008

@ Павел: Как видно по ссылке на слове “Смоленский”, они пожирают сами себя =)

@Vitaly: ОМГ, вот теперь я проникся окончательно!
PITA
Кто скажет что это не круто, будет иметь дело со мной!

Larsz | 16. 24 June, 2008

Давно слышал, но только недавно попробовал в действии старый добрый метод от Роджера Йоханссона
http://www.456bereastreet.com/lab/transparent-custom-corners-borders-v2/

остался очень доволен.

Серега | 17. 24 June, 2008

Спасибо! Класная статья! =) +1

pepelsbey | 18. 24 June, 2008

Не стоит забывать, что решение с супом из i-блоков и одной картинкой такое избыточное потому, что это не просто уголки, а резиновые_полупрозрачные уголки, которые можно положить на любой фон. Отсюда основные сложности.

akella | 19. 24 June, 2008

@Pepelsbey: да я же без тени иронии =) Это действительно круто!
Я очень уважаю чужой код, да еще написанный настоящими профи.

Panya | 20. 24 June, 2008

Ещё вот такое есть:
http://noinimod.ru/3/ но тут есть ограничения, нужен включённый js (для экспершенов в IE), таким способом нельзя сделать полупрозрачные уголки.

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

Kildor | 21. 24 June, 2008

по поводу «Опера всё собирается» — они утверждают что «когда создавался родмап на 9.5, спецификация CSS была в разработке, и её зафиксировали уже слишком поздно для включения в 9.5 ветку».

PS: я niftyCorners пользуюсь (если браузер не знает js, это уже его проблемы), и всё смотрю на SVG, но руки не доходят в живом проекте применить.

pepelsbey | 22. 25 June, 2008

> да я же без тени иронии

А я, в общем-то, без обиды ) Лично мне такое решение кажется слишком уж узкоспециализированным и мегаманьячным. Ну и при увеличении-уменьшении шрифта случаются заметные несостыковки.

Gan | 23. 26 June, 2008

чо то я не понял не много! если убрать всю эту поебень градиентовую растяжку прозрачность, то способ который в яндексе используется таким же образом как и первый способ c различием только что картинки объединены в спраит который позиционируются?

akella | 24. 26 June, 2008

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

Tutta Karlsson | 25. 27 June, 2008

Здравствуйте Акелла!

Бордеры на любой вкус. Прямо-таки, сумашедшие бордеры. Без картинок. Без скриптов. Без хаков. Без векторов. Только CSS и ничего больше. Все это кроссбраузено.

Но такой ОГРОМНЫЙ код стилей мог создать только сушедший Стью Нихолс (
Stu Nicholls)!

http://www.cssplay.co.uk/boxes/krazy.html

Tutta Karlsson | 26. 27 June, 2008

На стол гурманам CSS

akella | 27. 27 June, 2008

Здравствуйте, Тутта.
При всем моем безмерном уважении к Stu, в данном случае Яндексовцы его все же сделали по коду :)
Спасибо за классный линк!

Tutta Karlsson | 28. 27 June, 2008

Я хотела написать “сумашедший” Стью …

Не знаю, кто “первый начал”, но идея использовать теги лог. форматированя для бордера очень похожи … Первоначальные варианты (прототипы) всегда менее совершенны наследников. Правда, Сью изначально заложил бОльший динамический диапазон в код стилей ради всяческих фантазий.
Но размер пугает, конечно же.

Tutta Karlsson | 29. 27 June, 2008

И ни одной картинки !!

akella | 30. 27 June, 2008

Ладно :) Сдаюсь!

Del'ka | 31. 27 June, 2008

я делаю через :before :after (для нормальных браузеров) и expression с insertAdjacentHTML (для IE).

Вдохновлён этой идей был отсюда: http://habrahabr.ru/blog/css/27019.html

Имхо лучше метода непридумаешь – ни по духу, ни по букве.

Tutta | 32. 29 June, 2008

REM: Если в суе упомянули вектор (SVG), то зачатки “CSS-flash” можно увидеть здесь:

http://www.webkit.org/specs/CSSVisualEffects/CSSAnimation.html

Vitaly Harisov | 33. 30 June, 2008

я делаю через :before :after (для нормальных браузеров) и expression с insertAdjacentHTML (для IE).

Вдохновлён этой идей был отсюда: http://habrahabr.ru/blog/css/27019.html

Имхо лучше метода непридумаешь – ни по духу, ни по букве.

Как только фон под блоком с уголками становится неизвестным, этот метод перестаёт работать. К тому же, в нём 4 картинки, которые не собрать в спрайт.

Лепесток | 34. 1 July, 2008

Спасибо за ценную информацию! А отдельное спасибо за ссылки!

Andrew | 35. 1 July, 2008

Интересная статья, спасибо! :)

Люблю закругленные уголки.

Роман | 36. 2 July, 2008

Решение на сайте beta.ya.ru не понравилось абсолютно. Не гибкое. Размер кнопки фиксирован, не зависит от текста.

HTML и CSS, доступность и юзабилити — Life Style » » Вебдайджест (3.7.08) | 37. 3 July, 2008

[…] созданием закругленных уголков у элементов, на блоге Cssing можно подсмотреть несколько […]

Евгений | 38. 4 July, 2008

Большое спасибо, весь день с этими уголками сидел, пока не нашел вашей статьи ничего не получалось!

Берг | 39. 4 July, 2008

Если бы браузеры понимали 3-й CSS, трудностей вообще не было бы, т.к. в CSS3 предусмотрены округленные углы.
http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius

Юлия | 40. 5 July, 2008

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

Семен | 41. 6 July, 2008

есть мысли в голове в автора!голова в порядке видно

freelancer | 42. 6 July, 2008

очень занемательная статья, главное сколько творческих решений при желанни можно еще найти в верстке.

Клим | 43. 7 July, 2008

Довольно интересное решение и что приятно без картинок – опробую.

Дмитрий | 44. 9 July, 2008

вполне приемлимо и картинок ставить не надо :) получаеться вроде нормально

Игорь | 45. 9 July, 2008

Да прикольно, решение оч оригинальное, надо попробовать, пасиб за идею:)

alio | 46. 10 July, 2008

Спасибо, весьма полезная информация

Роман | 47. 11 July, 2008

круто!!! Попробовал получилось с первого раза, хорошо объясняешь.

Сергей Воронин | 48. 12 July, 2008

Спасибо, понадобилось.

Алексей | 49. 12 July, 2008

Долго искал, спасибо за советы!

9 статей на тему круглых кнопок | BlogFIX | 50. 17 July, 2008

[…] ? руглые уголки, интересные варианты Минус: слишком большое количество тегов i при реализации. Плюс: не зависит от размера шрифта, быстрое создание нового скина, не зависит от фона на котором лежит, при отключенных картинках белая ссылка будет на нужном фоне (в данном случае оранжевом). Статья на русском. […]

? руглые кнопки в HTML | Непутевые заметки | 51. 17 July, 2008

[…] ? руглые уголки, интересные варианты […]

cross | 52. 17 July, 2008

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

Del'ka | 53. 20 July, 2008

Как только фон под блоком с уголками становится неизвестным, этот метод перестаёт работать. К тому же, в нём 4 картинки, которые не собрать в спрайт.

ну картинки можно и в png-24 cохранить, а для IE всё равно генерим span’ы – так что с фильтром проблемы не будет.

в реальных проектах ширина зачастую фиксирована и я использую только background, верх на before, низ на after, боковые линии – на сам блок с контентом, тут спрайты.

N! | 54. 20 July, 2008

Vitaly Harisov, “К тому же, в нём 4 картинки, которые не собрать в спрайт.”

Но эти 4 картинки можно включить в css посредством data:url (mhtml для IE)

Vitaly Harisov | 55. 20 July, 2008
Как только фон под блоком с уголками становится неизвестным, этот метод перестаёт работать. К тому же, в нём 4 картинки, которые не собрать в спрайт.

ну картинки можно и в png-24 cохранить, а для IE всё равно генерим span’ы – так что с фильтром проблемы не будет.

Вы сначала сделайте, а потом говорите.

в реальных проектах ширина зачастую фиксирована и я использую только background, верх на before, низ на after, боковые линии – на сам блок с контентом, тут спрайты.

В моих реальных проектах ширина/высота не фиксированна.

Vitaly Harisov | 56. 20 July, 2008

Vitaly Harisov, “К тому же, в нём 4 картинки, которые не собрать в спрайт.”

Но эти 4 картинки можно включить в css посредством data:url (mhtml для IE)

Вы так делали? Насколько удобно перегенерировать CSS при изменении картинки? Мне нифига не удобно. Поэтому спрайт.

tarusexpert | 57. 22 July, 2008

Всегда думал, что IE всеяден, то есть он неправильный код отражает неправильно, таким образом минус на минус дает плюс. То есть в итоге неправильно составленный код в IE отображается нормально. А тут IE и не может отразить?

Del'ka | 58. 24 July, 2008

Насколько удобно перегенерировать CSS при изменении картинки?

имхо дополнить спрайт и отредактироват css – примерно одинаковые затраты.

N! | 59. 25 July, 2008

Вы так делали? Насколько удобно перегенерировать CSS при изменении картинки? Мне нифига не удобно. Поэтому спрайт.

Да, делал.
Перекодировать новые изображения в base64 не намного сложнее чем создать новый спрайт. По крайней мере для меня. :)
Тем паче в обсуждаемом нами методе (полукруглые уголки через :before :after) спрайты использовать нельзя. :)

CSS: создание закругленных углов на сайтах | Журнал веб разработчика | 60. 25 July, 2008

[…] сайты: http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/ http://cssmake.ru/-boxes/5–boxes/79-gradientcorners.html […]

Андрей | 61. 28 July, 2008

Автор действительно виртуоз в css и спасибо что поделился информацией !!

2008 | 62. 31 July, 2008

сначала делаем большую картинку.. закругленные углы в картинке находяться чуть ниже и правее левого верхнего угла
типа “+” у которого “обрезаны” гдето на треть левая и верхняя палка
и потом position-ом “вырезаем” из этой картинки необходимые нам кусочки, типа верхняя левая часть картинки – правый низ закругленного бока итд…

am.zoomby.org | 63. 7 August, 2008

есть вариант, как сделать закруглённые уголки совсем без изображений! Только бы вспомнить… :)

DeVoid | 64. 12 August, 2008

Спасибо! Интересная статья – интересные комментарии ))
Хотя я считаю что заокругленная-отзеркаленная символика WEB2.0 скоро изменится на что-то новое :)

Daddy | 65. 17 August, 2008

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

DRON | 66. 18 August, 2008

Как раз хотел поправить дизайн на одном из моих сайтов. Спасибо!

faw | 67. 5 September, 2008

Даже без картинок приличный вид получается, побольше бы таких профессиональных подсказок!

Кровавый Инк | 68. 5 September, 2008

Я сделал по другому немного. У меня CSS’ом на 4 части режется картина с кругом :)
Задается изображение Background’ом, указываются координаты и размер – 1/4 картинки с кругом. Получается 4 класса – по 1 на каждый закругленный угол. :)

crazydima | 69. 18 September, 2008

таблицами нада и не парица :)

Обзор №7, июнь 2008 | Все обо всем!!! | 70. 5 November, 2008

[…] Круглые уголки, интересные варианты Пара способов создания закругленных уголков. […]

cssing :: Архив :: CSSing 2008 | 71. 30 December, 2008

[…] ? руглые уголки, интересные варианты — несколько подсмотренных техник для круглых уголков […]

jul | 72. 14 May, 2009

что-то не понимаю с кнопкой “присоединяйтесь”. сразу все получилось в firefox, но в IE 6 нижнее и верхнее поля выползают на ширину 100% на необозримые дали(хотя уголки при этом ставятся на нужные места). а левая и правая границы куда-то прячутся. вероятно проблема с height 100%.

Создание закругленных кнопок для сайтов « Olgaolive’s Weblog | 73. 1 June, 2009

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

sidewinder | 74. 22 June, 2009

Спасибо. Много ценной информации нашёл в комментариях

Скругление углов CSS | Мир CSS | 75. 7 April, 2010

[…] изображений. Обязательно читать комменты! Читаем скругление […]

Vincente | 76. 13 April, 2010

Сейчас верстаю и столкнулся с проблемой, что картинка с закруглёнными углами должна быть поверх бордюра, но блок с картинкой внутри самого большого блока, под бордюром…
Может нужно поэкспериментировать с относительным расположением блоков с закруглёнными уголками?

Закругленные, круглые кнопки в HTML | 77. 27 May, 2010

[…] ? руглые уголки, интересные варианты […]

Волос | 78. 29 September, 2011

У меня главная страница весит 105 кб столкнулся с проблемой уменьшения веса, буду экспериментировать с блоками (менять некоторые изображения на код)

Турист с Алтая | 79. 17 November, 2011

А почему не использовать картинки?

Оставить комментарий