Анимация на css3

[Jeka778]

Всем привет!

Имеется вот такое вот меню. Хотелось бы сделать плавное наполнение заднего фона пунктов меню при наведении, но так, как задний фон сделан из "спрайта" выглядит фигово.

Можно ли как-то сделать красивое, плавное наполнение (насыщение).

http://jsfiddle.net/eW3YR/1/

Edited February 24, 2014 by Jeka778

[Игорь Ермаков]

Можно. 

[Jeka778]

Можно. 

А поподробнее?

[klierik]

можно так: http://jsfiddle.net/klierik/eW3YR/2/

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

 

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

[Jeka778]

можно так: http://jsfiddle.net/klierik/eW3YR/2/

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

 

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

Про это я и говорил. Дело в том, что я такой градиент на css3 не сделаю, по этому ищу способ сделать плавное появление именно картинки.

 

Может кто может очень похоже сделать только градиентом?

[klierik]

сам градиент делается элементарно. вот в помощь: http://www.colorzilla.com/gradient-editor/

вообще кнопка не сложная. деталей много, но при помощи (возможно) одного добавочного внутренего тега и :before :after сделать можно.

[Jeka778]

Кто-то может помочь?