Posible crear una sombra css sobre fondo transparente Imagen PNG?

¿Alguien sabe si todavía es posible crear una sombra paralela basada en css sobre fondo transparente imagen PNG?Posible crear una sombra css sobre fondo transparente Imagen PNG?

¿Quizás con CSS3, jquery o por último lado del servidor?

Ejemplo efecto después de lo que estoy tratando de acheive:

Example

Bastante seguro de si es posible, no sería de navegadores, pero dispuestos a aplicar si se degrada así?

Siéntase libre de añadir que de entrada, técnicas de discusión abierta ..

Fuente

2012-03-26 Webby

No puedo imaginar que sea posible. ¿Cómo sabría el navegador qué es el enmascaramiento de la imagen para proyectar la sombra? – MetalFrog

¿No es esa la imagen del tutorial sobre cómo hacer exactamente lo que pides aquí: http://lineandpixel.com/blog/png-shadow? –

probable duplicado: http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css – RozzA

Si carga la imagen en un contexto canvas, puede hacerlo.

buena fuente limpia aquí:

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

Fuente

2012-03-26 20:12:15 ERR0

CSS tiene ni idea de lo que la forma de la imagen es, por lo tanto, no se puede determinar el contorno y no puede aplicar una sombra a la misma.

Puede crear una copia negra de la imagen y colocarla detrás de ella, utilizando z-index, desplazamientos direccionales y algo de opacidad. Eso es todo.

Fuente

2012-03-26 19:10:16

Antes de usar 2 imágenes solo para hacer una sombra en un png, entonces hago que la sombra sea mejor directamente en el png. –

Sí, realmente no hace diferencia en ese punto. Sin embargo, no puedes resolver esto al final del cliente. Necesita ver una solución del lado del servidor. –

@diodeus supongo que podría obtener la imagen como blob y trabajar en los datos con javascript, así que no diría "no puedo", sino más bien "no quiero" ... :) – Christoph

No, no es posible. Incluso cuando el fondo es transparente, su imagen sigue siendo un rectángulo y la sombra se aplicará al borde.

Lo que puedes hacer es poner una sombra gráfica directamente en el png. Eso funciona muy bien sobre un fondo transparente.

Fuente

2012-03-26 19:10:58

Sé que es posible usar la biblioteca PHP de GD. Echa un vistazo a este tutorial:

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

yo supongo que el uso de una solución PHP sería la más compatible con todos los navegadores.

Fuente

2012-03-26 19:11:39

SÍ! ¡Es posible hacer sombras en un .png transparente en CSS3! Necesitaba esto en un proyecto que se mostraba como basura en IE10. En lugar de usar box-shadow, use filter: drop-shadow(). La sintaxis es más o menos la misma. Aquí está el artículo: link

La solución final es la siguiente (en caso de rotura de enlace):

.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)); 
}

Fuente

2012-11-29 12:59:39

¡Aaaand lo encontré! En lugar de usar box-shadow, use filter: drop-shadow(). La sintaxis es más o menos la misma. Aquí está el artículo: [enlace] (http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow) –

Su comentario es más valioso que su respuesta. Debe editar la respuesta, ya que realmente no ayuda (sin el comentario). – looper

Hecho. Gracias por el consejo. –

Posible crear una sombra css sobre fondo transparente Imagen PNG?

Respuesta

Cuestiones relacionadas