css box shadow + sfondo trasparente images = breakdown intuitivo

Question

• Ho un'immagine di un pulsante che sto usando come immagine di sfondo per alcuni link.
• L'immagine di sfondo ha gli angoli arrotondati.
• voglio usare un'ombra css goccia invece di mettere l'ombra nell'immagine

Il problema è che l'ombra sembra essere disegnato intorno l'elemento. Anche se mi aspettavo di vedere il colore dell'ombra esterna attraverso le parti trasparenti dell'immagine di sfondo, vedo invece il colore di sfondo (see this jsfiddle).

Il mio obiettivo attuale è un po 'più complesso, ma se riesco a satinare i miei primi tre punti elenco, posso inchiodare questo compito. Nello specifico, quello che voglio fare è usare due elementi annidati con immagini di sfondo delle parti destra e sinistra di un'immagine di un pulsante (angoli arrotondati) in modo che io possa usare lo stesso css per avvolgere un "bottone" attorno a un testo di qualsiasi lunghezza. Poiché gli sfondi si sovrappongono in uno stile css 'sliding doors', un'ombra drop alfa png mostra una sezione scura 2x in cui le immagini si sovrappongono. Soo .. Ho pensato di usare un'ombra di css, ma come puoi vedere nel jsFiddle, ci sono anche dei problemi.

Qualche idea?

Answer 1

Le ombre delle caselle non vengono visualizzate attraverso gli sfondi trasparenti. Un caso di test più semplice sarebbe:

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: transparent; 
    box-shadow: 0 0 10px #000; 
}​ 

L'output previsto sarebbe un bel quadrato nero sfocato giusto? Beh ... no, è un quadrato bianco con un ombretto. http://jsfiddle.net/UjhrW/

per ottenere quello che si vuole fare è necessario markup separato per il dropshadow, riempirlo con il bianco, e quindi impostare la fuoriuscita dell'ombra modo che appaia come una piazza sfocata ...

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: #000; 
    box-shadow: 0 0 10px 6px #000; 
}​ 

http://jsfiddle.net/Etmty/