Hay detalles en los que no caemos hasta que los necesitamos o no nos preguntan directamente sobre ello.
Este es el caso de darle sombra a una imagen de formato png con fondo transparente. Si tenemos un logotipo por ejemplo y queremos darle sombra con CSS, si por costumbre usamos el atributo box-shadow, nos encontraremos con esto:
Investigando un poco, descubrimos que existe otro, el filter drop-shadow, que hasta ahora habíamos usado indistintamente y no sabíamos bien cual era la diferencia, que nos sirve exactamente para lo que necesitamos:
Aunque la forma que tienen de calcular el desenfoque es algo diferente y puede que en algun navegador no se vean exactamente igual, en general podemos utilizar una u otra opción indistintamente, a menos que estemos buscando esa transparencia fuera de la caja (de ahí lo de box -shadow), que en ese caso podemos recurrir al filtro drop-shadow
¿Y qué pasa con la sombra del texto?
Pues en este caso, el filtro drop-shadow tiene el mismo efecto que el atributo text-shadow, que es específico para caracteres.
En este caso, box-shadow, cumpliría su función y mostraría la sombra alrededor del elemento de párrafo, encabezado, etc… que lo contiene.
Aquí podéis ver un ejemplo de las diferentes opciones:
See the Pen Sombra en imagenes transparentes by esolalf (@esther_sola) on CodePen.
¿Y la compatibilidad con navegadores?
Aunque ambas opciones ya están extendidas en los principales navegadores actuales, el filtro tiene algún problemilla más con los navegadores de Microsoft.
Aquí podéis comparar las dos en cuanto a compatibilidad:
