2012-06-07 13 views
6

Ho una goccia CSS menù a tendina che sto cercando di costruire, e lo sfondo della discesa ha una sbiadita scatola/conico ombra:Ombra casella CSS Taper/fade?

enter image description here

Ho problemi tirando fuori come ottenere l'ombra del riquadro per rastremare/sfumare effettivamente.

Ecco dove sono in questo momento: http://jsfiddle.net/Shpigford/f9aKR/

Ho provato con :before e :after pseudo selettori, tra le altre cose, ma non riesco a farlo bene.

Per chiarimenti, in particolare, ho solo bisogno di aiuto con l'ombra sul menu a discesa. Il mio jsFiddle è una versione ridotta per mantenere l'esempio il più semplice possibile.

+0

Sembra sbiadito per me. –

+0

Non lo è. È appena compensato. Guarda da vicino. :) L'immagine di esempio ha una dissolvenza graduale e il CSS nel mio jsFiddle è appena sbiadito della quantità del raggio di ombra. – Shpigford

+1

Giusto per essere chiari, sei contento della parte inferiore del 'box-shadow', ma vorresti che le parti sinistra e destra si dissolvessero? – thirtydot

risposta

12
  1. Ho aggiunto un elemento precedente.
  2. dava uno sfondo sfumato (da trasparente a nero semi trasparente) per ottenere la dissolvenza da cima a fondo.
  3. ha fornito un'ombra di riquadro per ottenere l'in -> outfade.

Date un'occhiata ->http://jsfiddle.net/f9aKR/22/

Modificare la quantità di dissolvenza/colori come si desidera.

+0

Impressionante. Alcuni. Sul serio. – Shpigford

+0

Grazie;) Sono contento di aver aiutato. – banzomaikaka