Плавный полупрозрачный фон с затуханием

[alleclf]

У меня есть блок фиксированных размеров с ссылками и простым текстом.

 

Подскажите пожалуйста как сделать:

- что бы только фон блока (в примере - желтый цвет) был полупрозрачный, а всё что в самом блоке (ссылка и текст) были нормальные БЕЗ прозрачности

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

 

Вот только что я сумел сделать -

http://jsfiddle.net/kn4k4bqh/

Edited November 30, 2014 by alleclf

[Q4Dizzy]

http://jsfiddle.net/kn4k4bqh/1/

 

про грань поточнее..

[DivMan]

http://jsfiddle.net/kn4k4bqh/2/

[Switch74]

Градиент нужно использовать для плавного затухания

[alleclf]

http://jsfiddle.net/kn4k4bqh/1/

 

про грань поточнее..

убрать красную рамку, я её нарисовал что бы границы было видно.

Так вот, если без рамки, фон справа должен плавно исчезнуть, вроде как прозрачность всё больше и больше

 

Как-то так, в фотошопе нарисовал. Первый наглядней, второй как хотелось бы сделать.

 

[DivMan]

градиентом можно попробовать 

[alleclf]

градиентом можно попробовать 

да вот как раз градиентами и пробую реализовать

[Switch74]

а в чем сложность то? Одну строчку добавить другую убрать http://jsfiddle.net/kn4k4bqh/3/ 

[alleclf]

а в чем сложность то? Одну строчку добавить другую убрать http://jsfiddle.net/kn4k4bqh/3/ 

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

[afdw]

http://jsfiddle.net/kn4k4bqh/4/

[Switch74]

http://jsfiddle.net/kn4k4bqh/5/

[alleclf]

http://jsfiddle.net/kn4k4bqh/5/

вот это то что надо!

спасибо, я немного неправильно в фотошопе нарисовал, надо было весь блок немного прозрачным сделать )