2012-06-07 25 views
6

Tengo una gota CSS menú desplegable que yo estoy tratando de construir, y el fondo de la lista desplegable tiene una caja/cónica desvanecido sombra:Taper/fade CSS shadow box?

enter image description here

Tengo problemas quitándose cómo hacer que la sombra de la caja realmente se reduzca o desaparezca.

Aquí es donde estoy en este momento: http://jsfiddle.net/Shpigford/f9aKR/

He intentado usar :before y :after seudo selectores, entre otras cosas, pero no puedo hacerlo bien.

Para aclaración, específicamente solo necesito ayuda con la sombra en el menú desplegable. Mi jsFiddle es una versión simplificada para mantener el ejemplo lo más sencillo posible.

+0

Parece desvanecido para mí. –

+0

No lo es. Es solo compensación. Mira de cerca. :) La imagen de ejemplo se desvanece gradualmente, y el CSS en mi jsFiddle simplemente se desvaneció la cantidad del radio de la sombra. – Shpigford

+1

Para que quede claro, estás contento con la parte inferior de 'box-shadow', pero ¿te gustaría que las partes izquierda y derecha se desvanezcan? – thirtydot

Respuesta

12
  1. He añadido un elemento antes.
  2. le dio un fondo degradado (de transparente a un negro semitransparente) para lograr el fundido de arriba a abajo.
  3. le dio una sombra de cuadro insertada para lograr el desfasaje ->.

Tome una mirada ->http://jsfiddle.net/f9aKR/22/

Editar la cantidad de desvanecimiento/colores como desee.

+0

Awe. Algunos. Seriamente. – Shpigford

+0

Gracias;) Me alegro de haber ayudado. – banzomaikaka