Comments 55
отличная подборка! спасибо )
Спасибо!
Возьму на вооружение.
Возьму на вооружение.
Отличное освещение материала. В ИЗБРАННОЕ! Спасибо!
Насколько я понял, все эти методы представляют решение основанное на графике. А может быть есть способ сделать круглые кнопки без использования картинок?
иногда картинки весят даже меньше чем такое же решение на html - нужно будет использовать слишком много лишних тегов
Оно конечно так, но в приведенных примерах отключение графики (или недогрузка картинок) превращает кнопки в обычные тексты. К тому же решения на js тоже не фонтан, если меру потерять и все дизайнерские изыски перевести на js.
ну, не совсем так, в большинстве случаев авторами это просто не предусматривается. но например в статье про кнопку яндекса, при отключении графики, кнопка не теряет внешнего вида, хоть она и становится квадратно, но всеровно на своем оранжевом фоне и т.д., т.е. вы можете сами предусматривать такую возможность.
Есть, примерно такой-же как сделать таблицы с закругленными краями без графики, слишком много кода получается, так что это того не стоит. Ждем CSS3 )
я был первый )
Графика для стандартных элементов интерфейса — зло.
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;
}
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;
}
Можно, и даже одним атрибутом CSS...
Да вот то, что это работает тоько в Mozilla/Safari, сводит все на нет...
Mozilla: -moz-border-radius: 1em;
Safari: -webkit-border-radius: 1em;
Да вот то, что это работает тоько в Mozilla/Safari, сводит все на нет...
Mozilla: -moz-border-radius: 1em;
Safari: -webkit-border-radius: 1em;
можно например так http://www.cssplay.co.uk/boxes/krazy.html
хоть это и не кнопки но приспособить нет проблем
хоть это и не кнопки но приспособить нет проблем
Просто находка! Избранное...
в избранном...
спасибо;-)
спасибо;-)
Отличный список ... уже делаю закладку!
Какой-то сегодня особо плодотворный день на хабре. Много всего полезного. :)
Нашел вот у firefox свойство -moz-border-radius - позволяет делать круглые края, но только в firefox (а жаль :(), вдруг кому пригодится
Вот. Вот такие статьи нужны хабру! :)
мм, вы это к чему?!
внутренний тег style тоже имеет преимущества. и табличная верстка тоже иногда полезна. просто все нужно делать с умом )
Ну никто же вас не заставляет все делать по другому, я тоже соглашусь что тег style не стоит вставлять в код когда вы верстаете, но от стандартных типа b и т.д никто вас не убеждает уходить. Не воспринимайте чужую точку зрения в штыки и все у вас будет хорошо.
А при использованных стилями тормозят? Не смешите.
Как верстать - выбор каждого. Просто кто-то делает правильно(с грамотным подходом, в данном случае, это блочная верстка), а кто-то, как ему заблагорассудится.
Как верстать - выбор каждого. Просто кто-то делает правильно(с грамотным подходом, в данном случае, это блочная верстка), а кто-то, как ему заблагорассудится.
вы бы вочитали что нибудь умное перед тем как утверждать такое
практически обзор от SmashingMagazine )
хоть я и сторонник минимализма всё равно спасибо, понадобиться.
"Простае круглые кнопки с помощью CSS (Wii Buttons)" — в первом слове опечатка.
По-моему, везде, где используется метод "раздвижных дверей" и, как следствие - "Минусы: два файла картинок" - можно пользоваться и одним файлом, немного подправив стилевой файл.
По сути, это будет частный случай недавно описанной мною техники "резиновых" кнопок http://habrahabr.ru/blog/webdev/45884.ht… - только там кнопка во все стороны тянулась, а не только в горизонтальном направлении.
По сути, это будет частный случай недавно описанной мною техники "резиновых" кнопок http://habrahabr.ru/blog/webdev/45884.ht… - только там кнопка во все стороны тянулась, а не только в горизонтальном направлении.
Практически все видел, но как сборник рецептов весьма полезно, спасибо Вам. Хорошо бы сводную таблицу сделать с количественными характеристиками разных способов...
по-поводу кнопок Яндекса, вы несколько не правы: во-первых, там 2 картинки, во-вторых, я бы добавил к ее плюсам следующие пункты
— не зависит от размера шрифта
— быстрое создание нового скина
— не зависит от фона на котором лежит
— при отключенных\недоехавших картинках белая ссылка будет на нужном фоне (в данном случае оранжевом)
— не зависит от размера шрифта
— быстрое создание нового скина
— не зависит от фона на котором лежит
— при отключенных\недоехавших картинках белая ссылка будет на нужном фоне (в данном случае оранжевом)
Отличная подборка, большое спасибо.
В избранное. Спасибо.
НЛО прилетело и опубликовало эту надпись здесь.
Sign up to leave a comment.
9 статей на тему круглых кнопок