9 статей на тему круглых кнопок

[Markovnin]

отличная подборка! спасибо )

[nicolasam]

Спасибо!
Возьму на вооружение.

[razonar]

Отличное освещение материала. В ИЗБРАННОЕ! Спасибо!

[amduscias]

Насколько я понял, все эти методы представляют решение основанное на графике. А может быть есть способ сделать круглые кнопки без использования картинок?

[Markovnin]

иногда картинки весят даже меньше чем такое же решение на html - нужно будет использовать слишком много лишних тегов

[aps]

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

[Grayscale]

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

[Grayscale]

Есть, примерно такой-же как сделать таблицы с закругленными краями без графики, слишком много кода получается, так что это того не стоит. Ждем CSS3 )

[Markovnin]

я был первый )

[bubuq]

Графика для стандартных элементов интерфейса — зло.

a.button-link{
padding:8px 12px;
border-top:1px solid #d3cbad;
border-left:1px solid #c9c09c;
border-bottom:1px solid #817354;
border-right:1px solid #998c68;
background:#beb388;
}

[Markovnin]

никто же вас не заставляет использовать ее. для ссылок вполне сгодится

[AGITA]

Можно, и даже одним атрибутом CSS...
Да вот то, что это работает тоько в Mozilla/Safari, сводит все на нет...

Mozilla: -moz-border-radius: 1em;
Safari: -webkit-border-radius: 1em;

[easterism]

можно например так http://www.cssplay.co.uk/boxes/krazy.html
хоть это и не кнопки но приспособить нет проблем

[juwain]

Просто находка! Избранное...

[mironbi4b]

в избранном...
спасибо;-)

[newatol]

Отличный список ... уже делаю закладку!

[danki]

Какой-то сегодня особо плодотворный день на хабре. Много всего полезного. :)

[amduscias]

Нашел вот у firefox свойство -moz-border-radius - позволяет делать круглые края, но только в firefox (а жаль :(), вдруг кому пригодится

[lorndesign]

Собственно, трудно себе представить, что когда-то (лет через 20) "мега-консорциум" обяжет всех браузеростроителей внести "унификации по оформлению кнопочек"...

[Sharn]

Вот. Вот такие статьи нужны хабру! :)

[Grayscale]

мм, вы это к чему?!

[Markovnin]

внутренний тег style тоже имеет преимущества. и табличная верстка тоже иногда полезна. просто все нужно делать с умом )

[Grayscale]

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

[EzS]

А при использованных стилями тормозят? Не смешите.
Как верстать - выбор каждого. Просто кто-то делает правильно(с грамотным подходом, в данном случае, это блочная верстка), а кто-то, как ему заблагорассудится.

[RJD2]

вы бы вочитали что нибудь умное перед тем как утверждать такое

[blasto]

практически обзор от SmashingMagazine )

[Markovnin]

да,  Grayscale постарался)

[crwin]

хоть я и сторонник минимализма всё равно спасибо, понадобиться.

[Markovnin]

да, только делать такую картинку довольно сложно

[Grayscale]

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

[mecommayou]

"Простае круглые кнопки с помощью CSS (Wii Buttons)" — в первом слове опечатка.

[Grayscale]

Спасибо, исправил.

[XAMelleOH]

По-моему, везде, где используется метод "раздвижных дверей" и, как следствие - "Минусы: два файла картинок" - можно пользоваться и одним файлом, немного подправив стилевой файл.

По сути, это будет частный случай недавно описанной мною техники "резиновых" кнопок http://habrahabr.ru/blog/webdev/45884.ht… - только там кнопка во все стороны тянулась, а не только в горизонтальном направлении.

[Grayscale]

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

[Markovnin]

одним в любом случае лучше, нужно - меньше запросов к серверу)

[tyv]

у вас тоже есть минус: нельзя использовать png24

[dohlik]

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

[Markovnin]

количественными характеристиками чего? количества файлов и классов?

[Grayscale]

Было бы больше времени написал бы больше...

[tyv]

по-поводу кнопок Яндекса, вы несколько не правы: во-первых, там 2 картинки, во-вторых, я бы добавил к ее плюсам следующие пункты
— не зависит от размера шрифта
— быстрое создание нового скина
— не зависит от фона на котором лежит
— при отключенных\недоехавших картинках белая ссылка будет на нужном фоне (в данном случае оранжевом)

[Grayscale]

Добавил ваше замечание, спасибо.

[tyv]

2 файла для создание оформления :)

[Grayscale]

Да, точно :) вроде все.

[dvan]

Отличная подборка, большое спасибо.

[ISVir]

В избранное. Спасибо.

[kasper]

НЛО прилетело и опубликовало эту надпись здесь.