Комментарии 62
Ладно, я опущу едкое замечание о вчерашнем дне в веб-разработке, если вы мне ответите на вопрос… Зачем там надпись с прозрачностью!?
Я уже молчу про то, что сейчас редко используют веб-формы.
И в девятом ИЕ кнопки все равно слезли.
Я уже молчу про то, что сейчас редко используют веб-формы.
И в девятом ИЕ кнопки все равно слезли.
Текст с прозрачностью растягивает кнопку на нужную ширину.
Пробелы или нбсп, не?
Программисту проще продублировать надпись чем считать пробелы и ширина пробела не всегда равна ширине символа.
Тогда уж если исключить вопрос о рациональности предложенного в статье метода: программист применяя, подобную методику, мог бы автоматизировать процесс — высчитывая длину центрального блока динамически в зависимости от размера строки, не выводя в интерфейс ненужного блока текста для «распорки».
Предложенный метод очень напоминает «популярный» когда-то blank.gif-распорки.
Предложенный метод очень напоминает «популярный» когда-то blank.gif-распорки.
Как же без веб-форм? Сплошь и рядом
Элементарно сейчас через ajax можно отправить как форму любой блок или любое множество значений элементов и не только, в чем проблема? Форма это лишь удобная и при этом семантически верная оболочка-тег.
не мешало бы добавить анимацию нажатия и наведения
Цетральная дивка должна содержать такой же текст как кнопка. Тоесть имеем два одинаковых текста (да и размер шрифта тоже влияет). И это все надо как-то генерить. Вариант с двумя картинками (вы его наверняка знаете) изящнее.
Какой именно вариант Вы имеете в виду, можно ссылку?
Да было на хабре не раз, мне за вас поискать? Ну навскидку это habrahabr.ru/post/31490/
В данном примере используется не кнопка, а ссылка, что не позволит отправить форму без использования js.
Попробуйте такой вариант
кнопка не только тянется, но и съедает буквы:
Это реализовано для наглядности, в js я не гуру.
Oh, wait!
Вы еще используете изображения для закругления углов?
Вы еще используете изображения для закругления углов?
Суть не в простых скруглениях. Мы используем не стандартную картинку.
А хотя, если«Необходимо выполнить вёрстку в соответствии с PSD макетом… и кроссброузерности страницы» — прошу прощения, поспешил!
> Необходимо выполнить вёрстку в соответствии с PSD макетом
Это и через CSS все сделать можно, сложнее правда чем картинки нарезать, но можно.
> кроссброузерности страницы
Это тоже большей частью решаемо, есть же CSS3 PIE например. Костыль, но с простейшими border-radius и box-shadow вполне справляется.
Это и через CSS все сделать можно, сложнее правда чем картинки нарезать, но можно.
> кроссброузерности страницы
Это тоже большей частью решаемо, есть же CSS3 PIE например. Костыль, но с простейшими border-radius и box-shadow вполне справляется.
Года 3-4 назад я думаю вы имели бы успех. Но сейчас есть более элегантные и простые способы
НЛО прилетело и опубликовало эту надпись здесь
Что то мне это напомнило небольшое извращение похоже на то чем я пользуюсь. Та же кнопка нарисована полностью с надписью, задача такая что бы при наведении курсора она менялась, не используя скриптов. Я думаю все этот способ знают: рисуются сразу две кнопки в одной картинке, в коде картинка прописывается фоном в диве, соответственно див в высоту равен половине самой картинки, при наведении картинка в диве двигается вверх тем самым показывая нижнюю часть, а там уже кнопочка другая. Все элементарно. Но, как все это сделать ссылкой? Я в верстке особо не силен, поэтому придумал такой выход, в диве прописываю тег в нем указываю эту картинку и делаю ее прозрачной ну и само собой ссылкой.
Давно не знал как сделать скругленные уголки у тянущейся кнопки, а тут такое простое и современное решение и работает во всех браузерах!
НЛО прилетело и опубликовало эту надпись здесь
Подведу итог :)
Статья конечно ни о чем. Опытные верстальщики уже давно изобрели свои более удачные велосипеды, а неопытные… неопытные найдут в сети решения опытных верстальщиков :)
В комментариях многие пишут всякую чепуху, например предлагают просто ставить картинки — вы для каждой кнопки на сайте будите рисовать картинку? а если надо разные состояния? или мультиязычность?..
Другие говорят — ты из прошлого, щас все на css… где вы видели в ие7-8 скругленные углы? Тем более когда нужна полная кроссбраузерность как в макете.
Или еще хуже предлагают использовать css3pie… вы использовали его хоть в одном проекте? что будет если у вас 10 кнопок на странице? не говоря уже о том что css3pie достаточно глючная вещь.
Статья конечно ни о чем. Опытные верстальщики уже давно изобрели свои более удачные велосипеды, а неопытные… неопытные найдут в сети решения опытных верстальщиков :)
В комментариях многие пишут всякую чепуху, например предлагают просто ставить картинки — вы для каждой кнопки на сайте будите рисовать картинку? а если надо разные состояния? или мультиязычность?..
Другие говорят — ты из прошлого, щас все на css… где вы видели в ие7-8 скругленные углы? Тем более когда нужна полная кроссбраузерность как в макете.
Или еще хуже предлагают использовать css3pie… вы использовали его хоть в одном проекте? что будет если у вас 10 кнопок на странице? не говоря уже о том что css3pie достаточно глючная вещь.
> Или еще хуже предлагают использовать css3pie… вы использовали его хоть в одном проекте? что будет если у вас 10 кнопок на странице?
Вы таки не поверите.
Вы таки не поверите.
css3pie это плохой выбор в данном случае, так как если кнопка будет иметь более-менее сложный дизайн, с градиентом, скругленными углами и тенью, то адекватной и быстрой отработки такой кнопки в ие вы не увидите.
Неоднократно пытался использовать его в проектах, но всегда убеждался что лучше все сделать по старинке — на картинках.
Неоднократно пытался использовать его в проектах, но всегда убеждался что лучше все сделать по старинке — на картинках.
Это правда достойно хабра?
Ну это решение совсем другое, тут нет заточки под ie < 9, так что я бы сказл что ссылкане в тему, ведь бывает нужно поддержать 7-8.
А так конечн оесли затачиваться только под новые браузеры все намного упрощается
А так конечн оесли затачиваться только под новые браузеры все намного упрощается
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/
6 тегов для одной кнопки — are you kidding me?
Левый и правый край делаем через :before, :after, центральную заливаем css-градиентом с бордерами, и делов…
Левый и правый край делаем через :before, :after, центральную заливаем css-градиентом с бордерами, и делов…
НЛО прилетело и опубликовало эту надпись здесь
если сильно хочется IE7, то достаточно двух блоков — внешнего и внутреннего вспомогательного
вот вам одна из моих заготовок, может пригодится
вот вам одна из моих заготовок, может пригодится
пардон, второе предложение было для топикастера :)
Интересное решение, вот только em с position: absolute внутри немного портит впечатление (а может это все предрассудки, из тех времен когда мы были маленькими и компьютеры слабыми :) )
Ну и если нужно будет кнопке в ие надписи сделать тень то придется повозиться
Ну и если нужно будет кнопке в ие надписи сделать тень то придется повозиться
Маленький блок с абсолютом не должен вас смущать — в этом случае от него больше пользы, чем вреда. Да и вреда, если честно, не могу найти — лежит себе тихо в строго отведенном для него месте, никого не трогает.
На счет теней, это конечно да, но мировая тенденция сводится к тому, что тени шрифтов в IE многие просто игнорят — больше мороки, чем визуального эффекта.
На счет теней, это конечно да, но мировая тенденция сводится к тому, что тени шрифтов в IE многие просто игнорят — больше мороки, чем визуального эффекта.
эххх, нашел в вашем решении пару критических багов которые свели на нет всю лаконичность и простоту :)
баги в студию! :)
ИЕ, любой:
если вести курсор справа налево то при попадании курсора на ту область с которой начинается input состояние ховера пропадает
ну и еще мелочь — при фокусе em слегка перекрывает строчку обводки кнопки
Опера:
абсолютно игнорирует нажатие на выступающий из блока элемент em
не критично для кнопок у которых отступ от края до текста небольшой, но если зазор пикселей 20, то пользователь будет в недоумении
если вести курсор справа налево то при попадании курсора на ту область с которой начинается input состояние ховера пропадает
ну и еще мелочь — при фокусе em слегка перекрывает строчку обводки кнопки
Опера:
абсолютно игнорирует нажатие на выступающий из блока элемент em
не критично для кнопок у которых отступ от края до текста небольшой, но если зазор пикселей 20, то пользователь будет в недоумении
если вести курсор справа налево то при попадании курсора на ту область с которой начинается input состояние ховера пропадает
ховер пофиксил з-индексом
ну и еще мелочь — при фокусе em слегка перекрывает строчку обводки кнопки
если вы про outline, то я его убрал, не нужен он сам совсем :)
под оперу, каюсь, не пробовал, но если надо — могу посмотреть
Про два блока, в общем, справедливо.
Но 3 блока все же универсальнее — они позволяют корректно центровать картинку в средней части.
Например, я недавно подобным образом верстал меню — там у активного пункта снизу в центре стрелочка была.
Но 3 блока все же универсальнее — они позволяют корректно центровать картинку в средней части.
Например, я недавно подобным образом верстал меню — там у активного пункта снизу в центре стрелочка была.
Вобщем-то да, но нужно подходить к конкретной задаче отдельно —
при потребности вводить третий элемент, или наоборот, обходиться одним + :before/:after, если не нужна поддержка ие7
при потребности вводить третий элемент, или наоборот, обходиться одним + :before/:after, если не нужна поддержка ие7
Если CSS3 (скругленные уголки, градиенты) отметается и нужно делать именно картинками, то там достаточно одного изображения-спрайта.
И оно подгружается во все 3 части с разным позиционированием.
И оно подгружается во все 3 части с разным позиционированием.
Сам у себя куки стянуть можешь :D
я для себя проблему решил с подменой input на обычные ссылки с помощью jquery:
что позволяет иметь кнопки любой извращенно ширины и стиля.
ОТПРАВИТЬчто позволяет иметь кнопки любой извращенно ширины и стиля.
Использую такую разметку
<a href=""><em>Текст кнопки<i></i></a>
При этом центральный фон в EM, правая часть в I, а левая часть в самом A.
Конечно, когда доля IE будет так низка, что клиентами можно пренебречь + это реально сделать в CSS3, то буду использовать именно css3. Но сейчас, когда клиент ворчит — «а у меня всё разъехалось», проще сделать так.
<a href=""><em>Текст кнопки<i></i></a>
При этом центральный фон в EM, правая часть в I, а левая часть в самом A.
Конечно, когда доля IE будет так низка, что клиентами можно пренебречь + это реально сделать в CSS3, то буду использовать именно css3. Но сейчас, когда клиент ворчит — «а у меня всё разъехалось», проще сделать так.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Тяни меня полностью или как растягивать «submit» и «button»