Pull to refresh

Comments 53

Советую почитать: stopdesign.com/archive/2009/02/04/recreating-the-button.html
Не понимаю проблемы? вы в трех из четырех предложных на «Собственно вот HTML», кнопку button на альтернативные варианты которые адекватно воспринимают тот же :hover без «ухищрений…
Если вы уж по-умолчанию используете в своем методе js, то есть масса альтернатив обычным баттонам которые исполняют свои функции через ajax и при этом не требуют для себя стооолько строк кода.
Не могу понять о чем Вы говорите.
товарищ имел в виду:
  • csshover2.htc и conditional comments, чтобы научить IE6 понимать CSS-конструкции типа: div.button:hover

эти плагины на js.
В общем решение интересное. но чем не удовлетворят вариант … любые теги.., тогда, если я правильно понимаю, можно обойтись без данных хаков т.к. 6 нормально работает с a:hover?
В общем решение интересное
Угу, интересное, IE лучше вообще не учить таким методом hover'у элементов, ибо при достаточно большом количестве элементов браузер безбожно зависнет.
IE8 это новы геморой для верстальщиков ( Спасибо за оригинальное решение
Ну я пока особого гемороя не испытал, но всегда можно включить режим совместимости.
Это не кнопочки, а какая-то фигня.
Кнопочка это /> а не как не то что вы предлагаете. И раскрашивается через CSS не хуже.
Универсальность этих кнопок в том что в них можно вставить любое слово и/или картинку, и не вырезать новую кнопку под каждое название кнопки.
Стандартную можно раскрасить через CSS как угодно не спорю, но здесь используется в виде украшения фоновое изображение, а метод раздвижных дверей позволяет вставить любое содержимое, что не получиться с ходу сделать с кнопкой типа
Идея не так уж и нова. Первый раз лично я встретил такое решение на форумном движке Novaboard.
Можно обойтись и одним изображением. Нарисовав одну длинную кнопку (в 3-х состояниях, в данном случае).
Задать для .button отступ справа равный ширине закруглений и дать background: url(image) no-repeat top right. а у внутреннего элемента задаль отступ слева и background: url(image) no-repeat left top;

У вас ход мыслей правильный, но не доработано
На самом деле это чуть менее универсально. Если кнопка скруглённая и должна работать на любом фоне, то одним изображением не обойтись.
Но во всех остальных случаях одна картинка действительно предпочтительнее)
В Seamonkey все кнопки разъезжаются(движок firefox 2)
Привет, inline-block! Пока firefox 2!
Привет, -moz-inline-stack! И снова здравствуй, firefox 2!
А почему именно -moz-inline-stack, а не -moz-inline-block или -moz-inline-box, скажем?
Они все дейсвуют немного по разному и добавляют разных глюков. Кто-то приноравился верстать с одним, кто-то с другим. Лично я тоже часто использую -moz-inline-stack и дополнительный блочный элемент.
Только не забываем что для содержимого такого «inline-block»'а придется сделать display: block;
в ие6 с кнопочкой «справедливы» косячок.
> Две картинки(1, 2) для CSS Sprites
Почему бы одной не сделать, прикрепив вторую слева к первой?
Есть решение для двух конетейнеров без псевдо-элементов на js?
а в чём проблема сделать три контейнера?
Я использую вот такой вариант
<a href="#" class="button"><img class="delete" src="empty.gif" alt=""/></a>
.button {
width:16 px;
height:16 px;
background: url ('images.gif') no-repeat;
}
.button .delete {
background:0 px 0 px;
}
.button: hover .delete {
background:0 px 16 px;
}

У этого есть есть несколько плюсов
  • У ссылок в ие6 работает hover
  • Если у пользователя отключены картинки тогда отобразится альтернотивный текст
  • Можно в ссылку добавить альтернативное действие если отключен javascript


______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru
Капитан очевидность спешит сообщить, что можно добавить к span перед «display:inline-block» «display:-moz-inline-stack», а к вложеному элементу применять block, а не inline-block, и тогда в ff2 все будет отлично,
можно делать кнопкой тег «a», а не «span», и js отправить фтопку,
можно использовать одну картинку,
что будет при увеличении размера шрифта?
в 2 firefox плывут кнопочки… правая часть выше чем левая(
а так красиво))
Поведение отличается от нормальных кнопок — если нажать и попробовать увести мышку с кнопки (что бы избежать срабатывания), то во-первых получается drag&drop, а во-вторых кнопка остаётся нажатой.
Интересный вариант! В букмарки.
Америку, стоить заметить, не открыли, ну да и ладно ))

А что вам мешало, использовать одно изображения, и всё те же спрайты для его смещения?
Старо как мир, да еще и слишком сложно :) Давно есть решения и с одной картинкой, и без htc-файлов. Советую покурить на эту тему cssplay.co.uk
Safari 3 в обычном состоянии кнопка «отправить» разъезжается справа. Если наевсти мышку – слипается.
command+ или command–
и все быстро разваливается
Еще один все понял!

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

Метод, который Вы использовали далеко не нов — обычно звется «раздвижными воротами», и давно уже обсосан в разных источниках.
Иллюстрация в этой статье была бы очень кстати. А то заголовок «Красивые кнопочки», а убедиться в этом предлагается взглянув на код.
В итоге вместо красивейших кнопок OS X, приходится видеть какое-то потребное говно, нарисованное кем-попало. Чем это говно лучше, кроме того, что туда можно вставить ушлепишную пиктограмму?
не у всех есть OS X… видимо цель — виглядеть одинаково. на любой платформе.
Если честно перый раз подобное увидел гдето в 2003 году и тогда еще эту конструкцию гордо обозвали «Двойные двери» (убейте не знаю почему) ее минусы заметны, даже очень, первое это гиганто подобная картинка, второе она не будет тянутся бесконечно и третье использует лишний js для обработки в css div:hover и тп…

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

<a href="#"><i></i>текст<b></b></a>

кому интерестно могу продробно расжевать принцип/
левые края размешенны в файле под правыми? (LLLRRR)
Во-первых, не двойные. Sliding переводится как «скользящие». И логика в этом есть.
А во-вторых, в вашем случае один из тегов лишний :-) Хватает двух тегов, одной картинки и никаких javascript'ов.
Да? ну и поведайте миру пожалуйста как использовать кнопку с разными краями и для этого всего использовать только один тег? Я имеею виду кнопку с не сплошным задним фоном а красочным разрисованым… а? Помойму никак, вообще. три элемента и три тега все правильно.

Если расматривать меню хабры то там достаточно двух элементов так как задний фон статичен и полностью одного цвета.
Я нигде не говорил про один. Нужно два тега. Я всегда использую
<a href="#"><strong>Нажми меня</strong></a>

А три тега, как у вас, явно перебор.
Я про кнопку которая будет тянутся вплоть до бесконечности и для которой картинка будет минимального размера, а не подогнутая под максимальную ширину.
не один… два (оговорился), но суть не меняется, поведуйте? Как у автора поста? так там ограничение по ширине.
Ограничение по ширине не смертельно. Несколько байт добавляющегося веса — тоже. В отличие от лишней разметки.

А если фон однородный и сменят его разве что вместе со всем дизайном, включая кнопки — то спокойно можно обойтись одной картинкой.
UFO just landed and posted this here
Вообсче я думаю разумным использовать вообще один тег и применять к нему before и after. Это работает во всех современных браузерах. Для старых версий ИЕ в этом случае можно применить insertAdjacentHTML. Рано или поздно все браузеры будут поддерживать псевдоклассы.
Sign up to leave a comment.

Articles