Декоративная кнопка Обзор. Делаем невозможное.

[@gorinich]

В ФФ работать должно, у меня же работает :)
Под оперу не верстал, т.к. сам по себе не верстальщик (баловался когда-то), да и не дружу я с ней. Данный пример иллюстрирует, что это возможно и идею как это сделать. Это всего лишь статья, а не элемент на рабочем сайте :)

Думаю в данном случае мне можно простить то, что Опера не поддерживает, и потом в статье я написал, что ради такого придется пожертвовать некоторыми браузерами.

[@Zivaka]

в FF я тоже не увидел работу, и даже в IE 7 как то странно работает...

[@caxep]

Что у вас не работает? У меня Опера. Зашел в блог, все посмотрел - работает. В FF тоже.

[@monitoringe]

В ФФ работает крайне глючно и неудобно. В опере не работает вообще.
Кстати, есть готовые кроссбраузерные решения — http://www.quirksmode.org/dom/inputfile.html

ИМХО, стандартный input выглядит гораздо красивее вашего, кастомизированного.

[@gorinich]

Про http://www.quirksmode.org/dom/inputfile.… я знаю, кстати в статье ссылка есть.
По указанной ссылке для реализации данного эффекта используется интересный такой Javascript. Моя статья по сути своей является описанием альтернативного решения основанного на той же самой идее (об этом там написано). Сделать полностью кроссбраузерное решение я не собирался :) Это я писал 2 года назад, сейчас просто нашел в архивах и решил выложить, может кому интересным покажется.

[@gorinich]

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

[@gorinich]

Кстати, Opera9 вышла всего год назад, статья писалась 2 года назад :) На указанном Вами сайте тогда про оперу кажется ничего не было сказано или она стояла в одном ряду с NS3.

[@Junior]

но попробуйте объяснить это заказчику, у которого уже есть готовый дизайн

Элементарно. Выставляется два счета: один за работу с простыми формами, второй - с учетом "дизайна" (в кавычках специально). Более отрезвляющего способа, по-моему, ещё не придумали.

[@gorinich]

Два года назад я собирал сайты на коленке и для меня подобное было просто напросто интересно :) Сейчас я, конечно, не стал бы делать сайт с такими выкрутасами всего за 200 баксов :) Тогда это был единственный путь наверх.

[@Junior]

Сам так раньше работал (хобби). Сейчас я за $200 даже без выкрутасов сайт делать не буду. Я просто разучился делать простые сайты на коленке :( И самое страшное, что сожалею об этом.

[@Oleksandr]

Неплохие замашки!
А за сколько времени Вы перешли такую "планку" с коленки в профи?

[@Junior]

2 года.

[@Oleksandr]

Ясно. Тогда у меня еще все впереди!

[@Nightquest]

Использовать такие формы — абсурд. А заказчика надо уметь убедить в этом. 10 точек после слова «Обзор» — ужас.

[@Junior]

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

[@wiz]

Юзабилити у такого поля просто запредельное... 7:

[@redwave]

Если статья писалась два года назад, почему не переписать ее под новые типы браузеров, с использованием новых технологий?

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

http://redwave.habrahabr.ru/blog/18935.h…
http://www.artpix.ru/order/

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

[@gorinich]

Это ж о каких новых технологиях Вы говорите?
Мне очень любопытно :) Может я пропустил чего...

[@redwave]

да)) про новые технологии это я загнул)) но переписать можно было бы)))

[@gorinich]

Во-первых, лень :)
Во-вторых, мне это уже не интересно, прошло то время, когда я сайты делал полностью сам.
Я теперь целиком perl-программист ;)

[@redwave]

тогда такой вопрос. Зачем делать топик?

[@gorinich]

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

[@lynx2]

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

Не понимаю, почему тут в коментах говорят, что якобы не работает в ФФ — у меня прекрасно работает.

[@gorinich]

А в чем, собственно, ужасность результата? Просто интересно.

[@alammi]

css способен на гораздо большее, нежели создание кнопок сомнительной художественной ценности…
а насчет «лучше использовать стандартные элементы форм» - еще одно заявление человека, размышляющего как программист:(

[@Tone]

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

Думать надо рационально, а не как программист или как дизайнер или ещё кто.

[@altmind]

уж извините, плюс не поставлю - ваша реализация не первая и не лучшая.

[@Butylski]

где-то эту реализацию уже видел. давно.

[@Tone]

ну и что тут такого? я в молодые годы и покруче делал, потом просто понял что смысла в этом нет...

http://www.artlebedev.ru/kovodstvo/business-lynch/2007/06/29/

[@gorinich]

Firefox2? Должно работать. Не знаю как там под линуксом, но под виндой и FF и IE отлично отрабатывают.

[@gorinich]

Это значит, что не под виндой у меня нет возможности проверить.
И потом, я не copy+paste решение предлагаю ;)

[@Sef4eg]

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