Jump to content
  • 0

ПНГ кнопка тянущаяся по содержимому


psywalker
 Share

Question

Ребят, снова нужна ваша помощь, перед нами встала новая задача, вобщем нужно сделать кнопку с закруглёнными углами именно на ПНГ24, и с Ховер эффектом (обязательно!) что-бы эта вещь работала везде, особенно в ИЕ6! Вроде бы проблем нет, но дело в том, что нужно:

1) Кнопка НЕ должна быть фиксированного размера(фикс только Высота), а должна растягиваться именно по содержимому

2) Нужно что-бы в любой момент можно было выравнить эту кнопку по середине экрана, или что-бы легко можно было её прифлоатить влево или вправо при желании

3) Уголки и центр должны состоять из Одного Спрайта, один рисунок!

4) При наведении на кнопку в Любом месте!, вся она должна изменять цвет, вобщем Ховер эффект должен быть обязательно опятьже ПНГ24 (спрайт тот-же!)

5) Желательно сделать не тратя много элементов и вообще кода

6) Соответственно, если всё эта конструкция делается на одном спрайте, то можно использовать ПНГ-фиксы, csshover.htc и прочую лабуду

7) Решение в итоге должно быть полный кросс, включая ИЕ6

8) На худой конец можно прибегнуть к JS, но это если уже совсем безнадёга будет :)

9) Я делал кнопку на таблице, но считаю этот вариант неправильным, так так таблицы нужны для табличных данных

10) Нужно получить универсальный код и для ссылки и для кнопки(<input type="submit" /> <input type="button" />)

Я мучался целый день и максимум что мне удалось добится, это: http://psywalker.ru/Forum/png-button/main-2.html посмотрите эффект в ИЕ6, почти удалось побороть, но вот почему то ПНГ-ФИкс всё портит, если его ставить перед основными стилями, а если после, то тогда наоборот, ПНГ срабатыает, а Ховер эффект отключается, вобщем я замучался в конец и решил обратится к Гуру B)

Помогите пожалуйста решить задачку, заранее очень благодарен!

p.s. - Great Rash, к тебе просьба: Погоди писать решение сразу, дай другим подумать хоть пару часов :rolleyes::)B)

Edited by psywalker
Link to comment
Share on other sites

  • Answers 53
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

psywalker, амиго, объясни а зачем тебе вообще вставлять именно png?

Я для себя делал полупрозрачные кнопки с полностью прозрачными краями с ховер эффектом.

http://lava-land.ru/tempp/btns.html

Реализовано все в формате gif.

Если известен изначально задний фон - то можно вставить как гиф.

Если не известен задний фон - можно сделать 3-и заготовки, которые будут корректно ложиться на любой фон: от светлого до темного.

Тянущаяся кнопка - также будет выглядеть отлично!

Дык, зачем тебе именно png?

Обозначь задачу, которая перед тобой стоит.

Неужели нельзя ее выполнить в gif формате?

Edited by Semreg
Link to comment
Share on other sites

  • 0
psywalker, амиго, объясни а зачем тебе вообще вставлять именно png?

Я для себя делал полупрозрачные кнопки с полностью прозрачными краями с ховер эффектом.

http://lava-land.ru/tempp/btns.html

Реализовано все в формате gif.

Если известен изначально задний фон - то можно вставить как гиф.

Если не известен задний фон - можно сделать 3-и заготовки, которые будут корректно ложиться на любой фон: от светлого до темного.

Тянущаяся кнопка - также будет выглядеть отлично!

Дык, зачем тебе именно png?

Обозначь задачу, которая перед тобой стоит.

Неужели нельзя ее выполнить в gif формате?

Щас объясню дружище, дело в том, что мне нужно решить именно мою задачу с одним спрайтом и ПНГ24 ради принципа и вообще хотелось бы узнать такой способ, если таковой имеется. Гиф - это слишком легко и совсем не то, потому что по настоящему гладкие и чёткие края можно получить именно с ПНГ-24 :blink:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy