Тяни меня полностью или как растягивать «submit» и «button»

[kyrie]

Ладно, я опущу едкое замечание о вчерашнем дне в веб-разработке, если вы мне ответите на вопрос… Зачем там надпись с прозрачностью!?

Я уже молчу про то, что сейчас редко используют веб-формы.

И в девятом ИЕ кнопки все равно слезли.

[BOLTIKUS]

Текст с прозрачностью растягивает кнопку на нужную ширину.

[Kaaboeld]

Пробелы или нбсп, не?

[BOLTIKUS]

Программисту проще продублировать надпись чем считать пробелы и ширина пробела не всегда равна ширине символа.

[Kaaboeld]

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

Предложенный метод очень напоминает «популярный» когда-то blank.gif-распорки.

[horses]

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

[Kaaboeld]

Я в своем тексте сделал ремарку, что пишу именно про данный метод никак его стараясь не оценивать.

Если говорить в общем: версткой должен заниматься — верстальщик, программированием — программист и так далее по ролям.

[lifestar]

Как же без веб-форм? Сплошь и рядом

[Kaaboeld]

Элементарно сейчас через ajax можно отправить как форму любой блок или любое множество значений элементов и не только, в чем проблема? Форма это лишь удобная и при этом семантически верная оболочка-тег.

[Stdit]

Аяксы многие тоже делаются через формы с «return false», потому что браузеры умеют запоминать данные, вводимые в эти самые формы, чтобы подставлять при следующем посещении.

[Kaaboeld]

Конечно, если это необходимо. Я же вроде не исключаю, в своем сообщении, того что form и в случае c ajax применим и имеет свои преимущества.

[DrNemo]

не мешало бы добавить анимацию нажатия и наведения

[fc_arny]

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

[easterism]

Цетральная дивка должна содержать такой же текст как кнопка. Тоесть имеем два одинаковых текста (да и размер шрифта тоже влияет). И это все надо как-то генерить. Вариант с двумя картинками (вы его наверняка знаете) изящнее.

[BOLTIKUS]

Какой именно вариант Вы имеете в виду, можно ссылку?

[easterism]

Да было на хабре не раз, мне за вас поискать? Ну навскидку это habrahabr.ru/post/31490/

[BOLTIKUS]

В данном примере используется не кнопка, а ссылка, что не позволит отправить форму без использования js.

[derSmoll]

Попробуйте такой вариант

[wcoder]

кнопка не только тянется, но и съедает буквы:

[BOLTIKUS]

Это реализовано для наглядности, в js я не гуру.

[wcoder]

Oh, wait!
Вы еще используете изображения для закругления углов?

[BOLTIKUS]

Суть не в простых скруглениях. Мы используем не стандартную картинку.

[wcoder]

А хотя, если«Необходимо выполнить вёрстку в соответствии с PSD макетом… и кроссброузерности страницы» — прошу прощения, поспешил!

[isden]

> Необходимо выполнить вёрстку в соответствии с PSD макетом

Это и через CSS все сделать можно, сложнее правда чем картинки нарезать, но можно.

> кроссброузерности страницы

Это тоже большей частью решаемо, есть же CSS3 PIE например. Костыль, но с простейшими border-radius и box-shadow вполне справляется.

[Seldon]

Года 3-4 назад я думаю вы имели бы успех. Но сейчас есть более элегантные и простые способы

[artishok]

CSS3

[mrk-andreev]

Автор говорил о кроссбраузерности, как о главном критерии в его работе. Конечно, другое дело, что реализовать онную ему так и не удалось…

[Seldon]

habrahabr.ru/post/29188/ — почитайте что пишут умные люди в статьях

[Seldon]

www.xiper.net/collect/html-and-css-tricks/verstka-form/rubber-button.html вот еще

[k4shik]

Что то мне это напомнило небольшое извращение похоже на то чем я пользуюсь. Та же кнопка нарисована полностью с надписью, задача такая что бы при наведении курсора она менялась, не используя скриптов. Я думаю все этот способ знают: рисуются сразу две кнопки в одной картинке, в коде картинка прописывается фоном в диве, соответственно див в высоту равен половине самой картинки, при наведении картинка в диве двигается вверх тем самым показывая нижнюю часть, а там уже кнопочка другая. Все элементарно. Но, как все это сделать ссылкой? Я в верстке особо не силен, поэтому придумал такой выход, в диве прописываю тег в нем указываю эту картинку и делаю ее прозрачной ну и само собой ссылкой.

[Seldon]

а сразу фон в ссылку не засунуть? или я чего-то в условии задачи не понимаю?

[ishaba]

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

[BOLTIKUS]

Не спорю, но эти свойства поддерживает IE от версси 8+
htmlbook.ru

[Makito]

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

В комментариях многие пишут всякую чепуху, например предлагают просто ставить картинки — вы для каждой кнопки на сайте будите рисовать картинку? а если надо разные состояния? или мультиязычность?..
Другие говорят — ты из прошлого, щас все на css… где вы видели в ие7-8 скругленные углы? Тем более когда нужна полная кроссбраузерность как в макете.
Или еще хуже предлагают использовать css3pie… вы использовали его хоть в одном проекте? что будет если у вас 10 кнопок на странице? не говоря уже о том что css3pie достаточно глючная вещь.

[isden]

> Или еще хуже предлагают использовать css3pie… вы использовали его хоть в одном проекте? что будет если у вас 10 кнопок на странице?

Вы таки не поверите.

[Makito]

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

[isden]

Дизайн у элементов (не только у кнопок, но и у всяких поп-ап нотификаций и прочего) не слишком уж навороченный, но таки в IE7-8 все работает, тормозов и неадекватности именно из-за этого не замечено.

[vdv73rus]

Это правда достойно хабра?

[Anonym]

Пользуйтесь на здоровье

[Seldon]

Ну это решение совсем другое, тут нет заточки под ie < 9, так что я бы сказл что ссылкане в тему, ведь бывает нужно поддержать 7-8.

А так конечн оесли затачиваться только под новые браузеры все намного упрощается

[Anonym]

Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

twitter.github.com/bootstrap/

[derSmoll]

6 тегов для одной кнопки — are you kidding me?
Левый и правый край делаем через :before, :after, центральную заливаем css-градиентом с бордерами, и делов…

[derSmoll]

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

[derSmoll]

пардон, второе предложение было для топикастера :)

[Makito]

Интересное решение, вот только em с position: absolute внутри немного портит впечатление (а может это все предрассудки, из тех времен когда мы были маленькими и компьютеры слабыми :) )
Ну и если нужно будет кнопке в ие надписи сделать тень то придется повозиться

[derSmoll]

Маленький блок с абсолютом не должен вас смущать — в этом случае от него больше пользы, чем вреда. Да и вреда, если честно, не могу найти — лежит себе тихо в строго отведенном для него месте, никого не трогает.
На счет теней, это конечно да, но мировая тенденция сводится к тому, что тени шрифтов в IE многие просто игнорят — больше мороки, чем визуального эффекта.

[Makito]

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

[derSmoll]

баги в студию! :)

[Makito]

ИЕ, любой:
если вести курсор справа налево то при попадании курсора на ту область с которой начинается input состояние ховера пропадает
ну и еще мелочь — при фокусе em слегка перекрывает строчку обводки кнопки

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

[derSmoll]

если вести курсор справа налево то при попадании курсора на ту область с которой начинается input состояние ховера пропадает

ховер пофиксил з-индексом

ну и еще мелочь — при фокусе em слегка перекрывает строчку обводки кнопки

если вы про outline, то я его убрал, не нужен он сам совсем :)

под оперу, каюсь, не пробовал, но если надо — могу посмотреть

[dom1n1k]

Про два блока, в общем, справедливо.
Но 3 блока все же универсальнее — они позволяют корректно центровать картинку в средней части.
Например, я недавно подобным образом верстал меню — там у активного пункта снизу в центре стрелочка была.

[derSmoll]

Вобщем-то да, но нужно подходить к конкретной задаче отдельно —
при потребности вводить третий элемент, или наоборот, обходиться одним + :before/:after, если не нужна поддержка ие7

[dom1n1k]

Это да. Я по умолчанию за вариант с before/after.
На очень старые IE можно забить, т.к. элемент в общем-то не ломается и не утрачивает функциональность — он просто теряет часть декора.
Делать досконально кроссбраузерно, только если прямо стоит такое требование.

[derSmoll]

Придерживаюсь точно такого же мнения :)

[dom1n1k]

Если CSS3 (скругленные уголки, градиенты) отметается и нужно делать именно картинками, то там достаточно одного изображения-спрайта.
И оно подгружается во все 3 части с разным позиционированием.

[evgentus]

Сам у себя куки стянуть можешь :D

[LeeMiller]

я для себя проблему решил с подменой input на обычные ссылки с помощью jquery:
ОТПРАВИТЬ
что позволяет иметь кнопки любой извращенно ширины и стиля.

[LeeMiller]

простите

<a href="#" id="blablabla" class="button style blablabla" onclick="$(this).closest('form').submit()">ОТПРАВИТЬ</a>

[Methos]

Использую такую разметку

<a href=""><em>Текст кнопки<i></i></a>

При этом центральный фон в EM, правая часть в I, а левая часть в самом A.

Конечно, когда доля IE будет так низка, что клиентами можно пренебречь + это реально сделать в CSS3, то буду использовать именно css3. Но сейчас, когда клиент ворчит — «а у меня всё разъехалось», проще сделать так.