9 статей на тему круглых кнопок / Веб-разработка / Хабрахабр

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

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

Здесь представлены .

Оригинал статьи на Временно.нет

Создание круглых ссылок-кнопок с помощью CSS

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

Владимир Токмаков: Рамки, тени, кнопки, плашки

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

Создание и оформление кнопок с изменяемыми размерами

Минус: тег button не всегда удобен для использования. Плюс: эффект нажатия.

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

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

Создание кнопок с простым CSS и HTML

Минус: простота оформления. Плюсы: не зависит от размера шрифта, всего один файл для создания оформления и очень простая реализация.

CSS овальные кнопки

Минус: наличие div`а при реализации, два файла картинок.

Простые круглые кнопки с помощью CSS (Wii Buttons)

Плюсs: всего один файл для создания оформления, очень простая реализация, достаточно красивое оформление.

Оформление кнопки с помощью «раздвижных дверей»

Минусы: два файла картинок, проблемы с эффектом нажатия кнопки. Плюсы: красивое оформление.

Создание красивых кнопок с помощью CSS

В минусах этого метода так же наличие двух картинок для фонов. Плюс: очень простая реализация.

16 июля 2008, 15:48

403

Grayscale

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

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

Markovnin 16 июля 2008, 15:58 #

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

nicolasam 16 июля 2008, 16:07 #

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

razonar 16 июля 2008, 16:08 #

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

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

amduscias 16 июля 2008, 16:16 #

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

Markovnin 16 июля 2008, 16:18 # ↑

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

aps 17 июля 2008, 10:13 # ↑

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

Grayscale 17 июля 2008, 10:20 # ↑

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

Grayscale 16 июля 2008, 16:18 # ↑

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

Markovnin 16 июля 2008, 16:20 # ↑

я был первый )

–1

bubuq 16 июля 2008, 16:22 # ↑

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

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 16 июля 2008, 16:24 # ↑

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

AGITA 16 июля 2008, 19:27 # ↑

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

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

easterism 17 июля 2008, 01:13 # ↑

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

juwain 16 июля 2008, 16:40 #

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

mironbi4b 16 июля 2008, 16:40 #

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

newatol 16 июля 2008, 16:41 #

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

danki 16 июля 2008, 16:42 #

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

amduscias 16 июля 2008, 16:42 #

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

lorndesign 17 июля 2008, 06:45 # ↑

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

Sharn 16 июля 2008, 16:44 #

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

Grayscale 16 июля 2008, 17:02 # ↑

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

Markovnin 16 июля 2008, 17:13 # ↑

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

Grayscale 16 июля 2008, 17:15 # ↑

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

EzS 16 июля 2008, 17:15 # ↑

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

RJD2 16 июля 2008, 17:28 # ↑

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

blasto 16 июля 2008, 17:02 #

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

Markovnin 16 июля 2008, 17:20 # ↑

да,

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

crwin 16 июля 2008, 17:24 #

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

Deavy 16 июля 2008, 17:31 #

Естественно, в закладки!
На мой взгляд, наиболее интересная статья — Владимира Токмакова из Техногрета

Markovnin 16 июля 2008, 17:32 # ↑

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

Grayscale 16 июля 2008, 17:36 # ↑

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

mecommayou 16 июля 2008, 17:50 #

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

Grayscale 16 июля 2008, 17:53 # ↑

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

XAMelleOH 16 июля 2008, 17:53 #

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

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

Grayscale 16 июля 2008, 17:58 # ↑

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

Markovnin 16 июля 2008, 18:00 # ↑

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

tyv 16 июля 2008, 22:28 # ↑

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

dohlik 16 июля 2008, 18:01 #

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

Markovnin 16 июля 2008, 18:02 # ↑

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

Grayscale 16 июля 2008, 18:33 # ↑

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

tyv 16 июля 2008, 18:39 #

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

Grayscale 16 июля 2008, 19:04 # ↑

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

tyv 16 июля 2008, 19:08 # ↑

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

Grayscale 16 июля 2008, 19:26 # ↑

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

dvan 16 июля 2008, 18:51 #

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

kasper 22 июля 2008, 12:06 #

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

Веб-разработка