bO_oblik Mar 30 2008 at 13:47

Делаем красивые кнопки

2 min

11K

Website development*

Translation

+44

159

Comments 159

Vox Mar 30 2008 at 14:13

href="#" это брак. А CSS интересный.

abarmot Mar 30 2008 at 15:20

Кстати, как правильно делать?

mobilz Mar 30 2008 at 15:43

href="/link" onclick="javascript();return false;"

UFO just landed and posted this here

3al Mar 30 2008 at 16:20

Для юзеров с NoScript и ботов.

UFO just landed and posted this here

3al Mar 30 2008 at 18:16

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

Slon Mar 31 2008 at 11:03

Можно вопрос - почему NoScript? Паранойя?

3al Mar 31 2008 at 15:30

Надоела реклама, а ABP еще настраивать надо. NoScript кроме поддержания паранойи убирает флэш и баннеры со всего недоверенного. Ну и всплывающие окна 100% заблокированы.

Zabatov Mar 30 2008 at 21:41

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

hlomzik Mar 30 2008 at 18:35

потому что есть средняя кнопка мыши

barbashov Mar 30 2008 at 18:36

И для "Open Link in New Tab".

UFO just landed and posted this here

hlomzik Mar 30 2008 at 18:45

обработчик не должен быть ссылкой, а кпопка отправки должна быть submit'ом

UFO just landed and posted this here

hlomzik Mar 30 2008 at 19:37

суть, еще как суть.
return false не имеет никакого отношения к сути элемента - оно просто отменяет действие по умолчанию при нерабочем яваскрипте.
ссылка должна куда-то вести, js будет лишь заменять переход по ссылке каким-либо действием (пример совсем близко - ссылка "войти" на хабре)
если же элемент не ссылается куда-либо, то, простите, какая же это ссылка?
рассматривайте UI сначала в отрыве от стилей - будет гораздо интереснее ;)

barbashov Mar 30 2008 at 18:45

> открывает какое-нибудь окно
Во! Вот /link должен вести на это окно.
Просто видя руку с вытянутым пальцем над ссылкой/кнопкой, автоматически делаешь вывод "это ссылка", а не "это обработчик". Я думаю, я не один такой ((:

Vox Mar 30 2008 at 21:16

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

adlopez Mar 30 2008 at 17:15

Это модель-которая легко трансформируется в любой конструкт

slovar2003 Mar 30 2008 at 14:17

Спасибо!

tapazukk Mar 30 2008 at 14:18

Есдинственный минус у подобной реализации Sliding Doors, это то что прийдется указать жестко заданный размер шрифта в px, да и это не спасет от увеличения шрифта в Fire Fox.

neithere Mar 30 2008 at 17:02

в Firefox <3
(кстати, это номер версии, а не сердечко)

sanitar Mar 30 2008 at 19:54

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

willwin Mar 30 2008 at 22:03

У меня когда-то так же было. Помню, не мог врубиться, почему в журнале "Хакер" постоянно ставят двоточие и закрывающую скобку. :)

-1

timaktaev Mar 31 2008 at 00:43

а некоторые до сих пор теряются при виде надписи "press any key".
Причем выражение "press a key" таких затруднений не вызывает Ж)

-1

m151 Mar 30 2008 at 14:19

Вери гуд. Спасибо.

Ждём решения для submit кнопок, бо такая кнопка не подойдёт для формы авторизации.

MAnt Mar 30 2008 at 14:25

onClick="this.form.submit();return false;"

donPedro Mar 30 2008 at 14:56

marazmiki Mar 30 2008 at 14:53

Воспользуйтесь тегом button, немного изменив CSS (уберите привязку к тегу a или измените её на button). Тогда HTML будет примерно таким:
<code><button class="button" type="submit"><span>Отправить</span></button></code>
Работает точно так же, как обычный <input type="submit" />>. Основное отличие в том, что первый позволяет размещать в себе фрагменты HTML :)

sunnybear Mar 30 2008 at 17:56

IE плохо реагирует на формы без submit...

marazmiki Mar 30 2008 at 20:05

Это в чём, простите, выражается? :)

sunnybear Mar 31 2008 at 01:09

в том, что такая форма перестает отправляться

UFO just landed and posted this here

Stuart Mar 30 2008 at 14:21

>>Специально для IE
>>В Internet Explorer нажатие кнопки не будет работать.

Надо было так ^__^

k_s Mar 30 2008 at 14:24

Кнопка в Опере 9.5 себя очень странно ведет, то нажимается, то нет, то нажимается не везде, а только с правой стороны где вторая половинка фона.

k_s Mar 30 2008 at 14:25

В смысле не не нажимается, а фон не меняет.

k_s Mar 30 2008 at 14:35

Аналогично в IE8

Smerig Mar 30 2008 at 14:27

В ИЕ 7 косяк: При нажатии на кнопку (кнопку дальше не отпускаем) и отвода курсора (теперь кнопку можно отпустить), кнопка остается в нажатом состоянии.

bO_oblik Mar 30 2008 at 14:35

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

DOKA Mar 30 2008 at 21:44

А я привык, что если отпустить кнопку в другом месте, то я отменю нажатие кнопки - полезная фича была бы. Если уж говоришь "удобство", так и делайте до конца.

hlomzik Mar 31 2008 at 03:03

оно отменится, не волнуйтесь )

a_v Mar 30 2008 at 14:42

В Firefox 2.0.0.13 то же самое.

Smerig Mar 30 2008 at 14:44

согласен (и с бо_обликом и с а_в)

UFO just landed and posted this here

sunnybear Mar 30 2008 at 17:57

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

hlomzik Mar 30 2008 at 18:37

onmouseout=blur?

sunnybear Mar 30 2008 at 18:42

боюсь, придется тогда добавить, как минимум, onmouseover=focus и, может быть, еще что-нибудь

hlomzik Mar 30 2008 at 18:51

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

sunnybear Mar 30 2008 at 18:54

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

hlomzik Mar 30 2008 at 19:02

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

3al Mar 30 2008 at 14:31

А почему бы не сделать что-либо подобное с настоящей кнопкой? Только с масштабированием та же проблема, но специально для неIE можно сделать фон в svg.

Хотя все это нужно далеко не всегда. Если страница со стандартным стилем, ее проще оставить как есть, браузер будет использовать тему ОС для отрисовки элементов (не все браузеры умеют, но все же прогресс есть).

habrich Mar 30 2008 at 14:33

А эта красота на SEO не повлияет?

bO_oblik Mar 30 2008 at 14:36

А как оно может повлиять?
ПС учтут эту кнопку как простую ссылку.

habrich Mar 30 2008 at 15:40

Это я и хотел услышать :)

somniator Mar 30 2008 at 14:34

Криво. Больше так не позорьтесь.

-3

Bully Mar 30 2008 at 14:43

Неконструктивная критика подобна понту.
А как "прямо"?

somniator Mar 30 2008 at 15:37

http://img404.imageshack.us/img404/5022/img1ju6.png
http://img187.imageshack.us/img187/6756/img2qc0.png

neithere Mar 30 2008 at 17:08

где инфо об условиях тестирования?

hlomzik Mar 30 2008 at 19:03

размер шрифта, это хорошо видно на скринах

Alinaki Mar 30 2008 at 14:41

Ох помню затрахался я набор из нескольких «sliding doors»-кнопок ровнять средствами CSS по центру. Получилось, кроссбраузерно :)

А по поводу статьи... Мало. Где теория?

pratavetra Mar 30 2008 at 14:51

Поделитесь опытом, пожалуйста?

Alinaki Mar 30 2008 at 14:58

Я думал статью в блог тут написать, но пока времени нет. Могу по памяти сказать - надо курить информацию на cssplay.co.uk+ознакомиться с поведением IE6/7 и делением CSS между ними. Насколько я помню, 2 основные концепции это display: table; и display: table-cell; в нормальных браузерах, и display: inline-block; в IE'х. Проблема «sliding doors» и наборов из них в том, что float используется...

UFO just landed and posted this here

sunnybear Mar 30 2008 at 17:59

ага, известный баг IE с морганием фона. Вроде должен лечится через заданием document.execCommand("BackgroundImageCache",false,true)

ecl Mar 30 2008 at 14:57

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

ps: по тому же принципу можно описать и 3й вариант для :hover.

gentleman Mar 30 2008 at 17:50

Возможно "простой", а не примитивный? Иначе хотелось бы увидеть более продуманные решения.
PS. С hover'om абсолютно согласен.

MaRio Mar 30 2008 at 15:08

мне вот такой вариант больше нравится:
http://www.artlebedev.ru/tools/technogre…
коду немного побольше, но с масштабированием никаких проблем

never_again Mar 30 2008 at 17:59

Данное решение не работает в режимах strict и transitional для IE версии 6 и ниже.

MaRio Mar 30 2008 at 22:33

давно пора забыть про ИЕ6 (и уж тем более ниже)

never_again Mar 30 2008 at 22:52

улыбнуло)

а про "ниже" согласен

MaRio Mar 30 2008 at 22:56

поправка: давно пора забыть про ИЕ

sunnybear Mar 30 2008 at 18:05

я, конечно, все понимаю, но 5Кб png-картинка на 2 небольшие кнопки это как-то слишком...

MaRio Mar 30 2008 at 22:34

вам так жалко трафика?

WoZ Mar 31 2008 at 00:32

времени жалко...
поставь 100 таких картинок по 5 кб и удивись)

MaRio Mar 31 2008 at 08:21

а какая разница сколько их? одна или 100 если это одна и та же картинка?

WoZ Mar 31 2008 at 09:25

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

sunnybear Mar 31 2008 at 01:06

просто во мне говорит оптимизатор...

WoZ Mar 31 2008 at 09:25

поддерживаю)

cikavo Mar 30 2008 at 15:13

прикольная статья. Очень полезная информация ;)

voidMan Mar 30 2008 at 15:36

Если бы это всё "прикольное" ещё и работало как положено.. :(

Markovnin Mar 30 2008 at 15:24

указали бы, что это перевод. и ссылку на оригинал =)

-1

bO_oblik Mar 30 2008 at 15:26

Вы издеваетесь? А я по вашему что сделал? 0_о
Что не сделаешь все равно придираются.

Markovnin Mar 30 2008 at 17:51

черт, извини, не увидел. просто в теле статьи нет ссылки на оригинал (

aleo Mar 30 2008 at 15:32

В Firefox ломается при небольшом увеличении шрифта :(

coldFlame Mar 30 2008 at 15:43

>В Firefox ломается при небольшом увеличении шрифта :(
Да, фиксированная высота никуда не годится, ибо люди с плохим зрением (я в их числе) сайты смотрят под Ctrl-+

Зато в Firefox 3 при отключенном режиме "масштабировать только текст" проблем нет :)

graphictest Mar 30 2008 at 15:45

Кроме, проблемы с увелечением шрифта, есть вопрос:
Все подобные примеры очень классные, но практически всегда нужно использовать не меньше 2-х, а иногда больше картинок.
Я не большой специалист в CSS.
мой программер меня постоянно долбит, чтобы я минимизировал количество картинок на дизайн в силу понятных обстоятельств . Особенно, это касается при работе со сложными интерфейсами.
Т.е. мне приходится делать тяжелей код в хмтл, чтобы обойтись меньшим числом картинок, правилен мой подход?

sunnybear Mar 30 2008 at 18:01

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

graphictest Mar 30 2008 at 19:13

Спасибо,
Такие примеры значит только для красоты...

gunkin Mar 30 2008 at 16:07

sexy buttons, херня, так как не scalable

вот ещё кой-чего: http://www.monc.se/kitchen/59/scalable-c…

everm1nd Mar 30 2008 at 16:23

страшно было на кнопку с таким названием жать, но все-таки решился... вроде ракет в небе пока не видно. видимо не на тот скрипт у вас кнопка ссылается. поправьте баг)

habrich Mar 30 2008 at 16:41

Наверное хабраэффект, сервер пока разгружается (или ракеты загружаются). Потом полетят пачками =)

inpills Mar 30 2008 at 16:54

Спасибо огромное.

Okspen Mar 30 2008 at 17:21

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

bubuq Mar 30 2008 at 17:31

Графика для элементов интерфейса есть ЗЛО.

pratavetra Mar 30 2008 at 17:58

Скажите, кстати, а как можно кармограф тоже получить? Ну, за исключением того, чтобы написать собственный? ;) Прошу прощения за оффтопик.

bO_oblik Mar 30 2008 at 18:13

Я полагаю, что здесь:
http://karma.goodrone.org.ru/

pratavetra Mar 30 2008 at 18:19

О, большое спасибо!

Hitryi_Pryanik Apr 1 2008 at 01:13

Зло — это пока элементы интерфейса относятся к браузеру. А когда они относятся к странице, что делать? Представьте сайт весь такой гламурненький и посреди него (ну в зависимости от системы конечно) серый шлакоблок…

sendano Mar 30 2008 at 18:16

Прочитано... обдумано.. "Красота - это когда нет ничего лишнего"...

BuzzyBuzz Mar 30 2008 at 18:17

Рано вам еще переводить, учите русский и будьте внимательнее.
"...мы должны учесть возможность растяжки кнопок. Для этого вы воспользуемся..."

-1

bO_oblik Mar 30 2008 at 18:59

Это опечатка. И это не дословный перевод, а переработка скорее.

BuzzyBuzz Mar 30 2008 at 19:01

Тогда зачем оформлять статью в виде перевода? Лучше в таком случае сразу написать, что, дескать, нашел крутой прием у Иван-Иваныча, хочу поделиться.

bO_oblik Mar 30 2008 at 19:35

Так легче указать источник и от куда взял идею и где изложил.
В других темах очень много придирались по этому поводу, что я «вор» — источники не указываю и прочее, надоело слушать. Хотя всеравно услышал :(

BuzzyBuzz Mar 30 2008 at 19:44

Тогда попробуйте мой совет: если рассказываете о чем-то или ком-то своими словами, не надо оформлять это в виде перевода. Просто напишите в самом начале статьи, о чем это и у кого взяли. Поставьте себя на место других: мы читаем, возмущаемся наглым копипастом, а потом видим в конце статьи мелкую приписку.

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

bO_oblik Mar 30 2008 at 19:49

>Поставьте себя на место других: мы читаем, возмущаемся наглым копипастом, а потом видим в конце статьи мелкую приписку.
Я не могу поставить себя на это место, для меня главное полезность информации, а не откуда она. Помоему кто так кропотливо обращает на это внимание просто психопат и ему, откровенно, нефик делать.

BuzzyBuzz Mar 30 2008 at 19:52

Успехов.

neithere Mar 30 2008 at 23:21

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

gunkin Mar 30 2008 at 18:27

> В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript

Вы хоть в курсе, что в IE элемент button не будет реагировать на нажатие Enter, скажем на форме логина.

msfs11 Mar 30 2008 at 19:01

а можно не использовать вложенный span, а использовать Псевдокласс :first-letter
http://habrahabr.ru/search/?searchfor=fi…

Osa Mar 30 2008 at 19:10

маленький недочет: если "вдавить" кнопку и не отпуская левой клавиши мышки отвести курсор в сторону(за пределы) кнопка остается вдавленной

rold Mar 30 2008 at 19:16

Покажите лучше, как сделать в IE6 полупрозрачный CSS-спрайт с тремя состояниями кнопок (обычное, наведенное и зажатое)...

bO_oblik Mar 30 2008 at 19:38

Просто добавить hover и пририсовать стиль кнопки при наведении.

rold Mar 30 2008 at 21:43

Ключевые слова: полупрозрачность и CSS-спрайт.
С этим вот проблемы. Решений найти не удалось.

Uratsakidogi Mar 30 2008 at 19:35

То же можно реализовать, использую одну картинку вместо двух: http://temp.uratsakidogi.msk.ru/rocket/
(ссылкой почему-то не вставляется)

dorohoff Mar 30 2008 at 20:11

Вот вам оригинал текста:
How to make sexy buttons with CSS
А вот еще на эту тему.
1) Создаем динамические кнопочки-ссылки с помощью CSS
2) Создание универсальных графических кнопок с помощью CSS
3) Необычное применение CSS: реализация эффекта rollover c помощью CSS
4) Реферат: Раздвижные двери CSS
5) Pure CSS Popups
Есть еще информация? Поделитесь.

4g3n7 Mar 30 2008 at 20:29

Поидее ретро, такие статьи все примерно одинаковые слайдинг дурс + спрайты.
Для новичков может быть "вау", а для меня, например, ничего нового.

И вроде как иллюстрации из статьи я на каком-то буржуйском сайте видел)

zorba_buddha Mar 30 2008 at 21:11

hover'а не хватает тогда уж.
на сайте Студии об этом есть статься - более практичная.
если в примере (под фоксом пробовал) надать кнопку и не отпуская увески курсор и отпустить - кнопка остаётся нажатой.

IMHO: кнопка должна быть кнопкой, но никак не ссылкой - об этом говорит PHP - он любит кнопки (особенно INPUT).

gomzyakov Mar 30 2008 at 21:26

В Safari 3.1 тоже корректно не работает... Никакого эффекта "нажатия" нет, о нем позно догадаться по переиодическому мирганию надписи только если по этой кнопке бешенно долбить...

bO_oblik Mar 30 2008 at 21:47

Только что проверил — все отлично работает!

gomzyakov Mar 30 2008 at 23:35

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

hlomzik Mar 31 2008 at 03:07

срабатывает onclick=onblur
честно говоря, не понимаю смысла этого "хака", в ссылках он используется для убирания рамочки вокруг ссылки

Hitryi_Pryanik Mar 30 2008 at 23:28

И версия Владимира Токмакова для png

gunkin Mar 31 2008 at 09:10

Пожалуй лучшее. Объёмисто, но работает как надо.

timaktaev Mar 31 2008 at 00:47

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

mobilz Mar 31 2008 at 01:14

приветствую. прикинь, а у меня наоборот =) нарисуй, а я заверстаю и запрограмлю современно, а?

timaktaev Mar 31 2008 at 12:23

Даже самому стало интересно как это выглядит. А вот так (+ посветлее):

off

move on

pressed

Это значит, что по сути тени не меняются. В нажатом состоянии они просто не такие резкие.

mobilz Mar 31 2008 at 13:58

Супер! до дому добирусь — сделаю =)

timaktaev Mar 31 2008 at 22:41

обновлено

Cosss Mar 31 2008 at 18:40

А как это будет на чисто былом фоне? #FFF

timaktaev Mar 31 2008 at 20:19

высветлил на скорую руку > photobucket
Но на самом деле, я показал как играют тени при нажатии. Не стоит брать эти картинки за окончательный вариант. Они с перспективой, а на веб-странице всё же лучше, чтобы её не было (или чтобы все детали подчинялись одной). Тут важно обратить внимание например на то, что на кнопке в нажатом состоянии появляется рефлекс внизу.

timaktaev Mar 31 2008 at 22:40

Вот так вернее будет

bO_oblik Mar 31 2008 at 10:19

Где это написано про тень при нажатии?
Я думал в интернете нету теней. Тень есть у яблока к примеру. Но откуда ей взяться у кнопки?

timaktaev Mar 31 2008 at 11:33

думай меньше, а наблюдай больше - толк выйдет, а красота останется.

mobilz Mar 31 2008 at 00:51

Во-первых, по хорошему делать 2 конца и фон, а не один конец и еще один длинный конец. Ибо так кнопка будет действительно резиновой + будет меньше весить.
Во-вторых, как уже писал, ссылки должны иметь вид , чтобы она работала для noscript пользователей, ботов и пользователей со слабыми script бразуерами (mobile ie etc). Хорошим примером считаю http://www.basher.ru, не смотря на ajax всякие приблуды + js окна для регистрации и прочего, сайт корректно работает и с выключенным JS.

Hitryi_Pryanik Apr 1 2008 at 00:52

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

А Вы проверяли, будет ли меньше весить кнопка? А я проверял и не раз. В одном файле весит меньше на 10-25%

И юзайте < и > для угловых скобок.

mobilz Apr 1 2008 at 08:39

ок, реализуй на данном примере автора кнопку в 2 строки и покажи мне одну картинку, с помощью которой можно сделать резиновую кнопку, которая будет весить меньше на 10-25%, чем 2 отдельных конца и 1px фона.

Hitryi_Pryanik Apr 1 2008 at 14:06

1) кнопку растягивающуюся по горизонтали и вертикали (на две и более строк) с помощью двух концов и фона реализовать вообще нельзя. Точнее можно, но смысл нарезки на три части потеряется (тогда уж на 5 частей или 9: фон, 4 угла, 4 границы).

2) для сравнения размеров можешь взять этот архив: knoppa.zip

mobilz Apr 1 2008 at 15:20

1) не потеряется, это раз. И два — твоим способом вообще эту проблему не решить.
2) сравнения размеров показали, что 3 части весят на 20+% меньше, чем одна

Hitryi_Pryanik Apr 1 2008 at 19:42

2) Вы троллите или просто побоялись архив скачать? Или у Вас бааайты тлиннне-е?
Цельная кнопка 658 байт, три файла — 718 байт. То же самое и с RGB и с greyscale. Можно дополнительно дожать pngCrush, получив 527 байтов на цельной и 686 на разрезанной (23% разницы).

Вы, извините, как считали? И на каком примере?

mobilz Apr 1 2008 at 22:45

Дейсвительно где-то я ошибся с калькулятором, действительно вы правы. Однако мозг пока не способен этого понять.
Но это не решает проблему «резиновой» кнопки.

Hitryi_Pryanik Apr 1 2008 at 22:53

Чтобы Ваш мозг мог понять почему цельный файл меньше, почитайте про принцип сжатия и узнаете, что ещё в GIF появилось такое сжатие. Один из базовых принципов описыватся так: «рисовать в строку пиксель цвета [xR xG xB] N раз».

По поводу резиновости кнопки с Вами уже не хочу спорить. Рекомендую (как минимум) изучить матчасть (и поработать в вебстрое), и только после этого судить как быстрее, надёжнее, лучше, удобнее верстальщику…

Hitryi_Pryanik Apr 1 2008 at 19:48

+ три запроса к серверу вместо одного

mobilz Apr 1 2008 at 22:46

угу =)))) вашими бы браузерами да инет поглядеть. Расскажите IE о том, что он должен каждый раз брать картинку не из кеша, а с сайта.

Hitryi_Pryanik Apr 1 2008 at 22:59

Всё бывает в первый раз

quark Mar 31 2008 at 01:03

Делается очень просто и одной картинкой...

mobilz Mar 31 2008 at 01:17

если вы считаете «умным» преподносить в скрытом виде не очень умный способ организации подобной кнопкой, путем склеивания двух картинок в одну — вам на wmaster.ru

quark Mar 31 2008 at 01:36

Одна картинка - меньше запростов к серверу - быстрее загрузка.
2. Делается очень просто банальным CSS - даже без танцев с бубном:

a { background: url(image.gif) no-repeat top right; } a span { background: url(image.gif) no-repeat top left; margin-right: 10px; }

mobilz Mar 31 2008 at 07:54

ваша кнопка не будет прозрачной, и, как кнопка автора, не будет резиновой.

quark Mar 31 2008 at 08:29

Резиновой будет. Ровно настолько, насколько и авторская. А в даном примере прозрачность не играет роли и не есть самоцелью...

mobilz Mar 31 2008 at 08:41

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

-1

msfs11 Mar 31 2008 at 10:59

чего ты придираешься? сам же должен понимать, что кнопка шириной 1000px - это не правильно и вряд ли она будет использоваться.

UFO just landed and posted this here

rmaksim Mar 31 2008 at 15:50

для полноты раскрытия темы еще хотелось бы побольше интерактивности на :hover, т.е. + еще одна картинка

fatal Mar 31 2008 at 22:46

Немного в сторону, но никто не припомнит способа вешания иконок на стандартные кнопки INPUT (BUTTON не предлагать)? Так что бы иконки нажимались вместе с кнопкой...

xshiriy Apr 1 2008 at 02:21

пральна, на png надо переходить

Sergey1 Apr 4 2008 at 08:37

Красивые кнопки - красивыми кнопками, а вот у меня никак не выходит даже обычную кнопочку в форме темизировать. Все довольно просто: есть Drupal, пытаюсь приколотить панель регистрации в строку меню и форму поиска туда же, делаю все флоатами. В FF и других Strict-браузера все отображается отлично, а вот в IE6 - безбожно разъезжается (в особенности - форма поиска). Page.tpl.php выводит следующий стандартный HTML для формы логина-поиска:

<span class="login-search">
<div><a href="/user/login">Login</a>/<a href="/user/register">Sign up</a></div><form action="/search/node" accept-charset="UTF-8" method="post" id="search-theme-form">
<div> <input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
<div class="form-item">
<input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search-theme-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>

<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />

</div></form>
</span>

Спан login-search я сам добавил, чтобы все в одной строчке (меню) было.

CSS (рабочий в FF) выглядит так:

/*общая форма для логина и поиска*/
.login-search {float:right; width:30%;}

/*форма логина*/
.login-search div {float:left; width:30%; height:12px;}
/*форма поиска*/
.login-search #search-theme-form {float: right; width: 70%}
.login-search #search-theme-form div {float: right; width: 100%}

/*кнопка*/
.login-search #search-theme-form div .form-submit {float: right; width:30%}
/*поле*/
.login-search #search-theme-form div .form-item {width:70%; float:left; position:relative; top:-13px;}
.login-search #search-theme-form div .form-item .form-text {width:100%; float:left;}

В итоге получаем отличную картинку в FF (см FF.bmp, смотрим здесь). А вот в IE6 все отвратительно (IE6.bmp, тоже смотрим на http://www.drupal.ru/comment/reply/4473/79858). Второй день ломаю голову, чем это может быть вызвано и как исправить....

skipidar Apr 4 2008 at 17:27

Потратил вчера немного времени на освоение этого способа.
Читал ОЧЕНЬ ПОХОЖЕЕ ОПИСАНИЕ на английском Тут.
Наткнулся кстати на способ оформления TAB'ов с помощю HTML списков.
Жаль Кармы не хватает, написал бы :)

pvasili Jun 10 2008 at 13:10

Может указывать как первоисточник не Чернев.Ру(не он же придумал технику) а оригинал? Или это PR?

AxSHuN Dec 27 2009 at 16:08

ха… спасибо помогло :)

Show the best of all time