È possibile creare un'ombra css su un'immagine PNG in background trasparente?

Question

Qualcuno sa se è ancora possibile creare un'ombra esterna basata su CSS su un'immagine PNG in background trasparente?

Forse con CSS3, jquery o lato server?

Esempio dopo l'effetto di quello che sto cercando di acheive:

Abbastanza sicuro se è possibile non sarebbe cross browser, ma disposti ad applicare se si degrada bene?

Sentitevi liberi di aggiungere si immette, le tecniche di discussione aperta ..

Answer 1

Se si carica l'immagine in un contesto di tela, è possibile farlo.

buona fonte pulita qui:

http://philip.html5.org/demos/canvas/shadows/various.html

Answer 2

CSS non ha idea di quale sia la forma dell'immagine è, pertanto, non può determinare il contorno e non può applicare un'ombra ad esso.

È possibile creare una copia nera dell'immagine e posizionarla dietro di essa, usando z-index, offset direzionali e un po 'di opacità. Questo è tutto.

Answer 3

No, non è possibile. Anche quando lo sfondo è trasparente, l'immagine è ancora un rettangolo e l'ombra verrà applicata al bordo intorno.

Quello che puoi fare è mettere un'ombra grafica direttamente nel png. Funziona benissimo su uno sfondo trasparente.

Answer 4

So che è possibile utilizzare la libreria GD PHP. Dai un'occhiata a questo tutorial:

http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/

Direi che usando una soluzione PHP sarebbe la più compatibili con tutti i browser.

Answer 5

SI! È possibile creare ombre su un file .png trasparente in CSS3! Ne avevo bisogno in un progetto che si stava rivelando come spazzatura in IE10. Invece di usare box-shadow, usa filter: drop-shadow(). La sintassi è praticamente la stessa. Ecco l'articolo: link

La soluzione finale è questo (in caso di rottura link):

.filter-drop-shadow { 
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
}