soy Kseso y esto EsCSS

Diferencias: box-shadow frente al filtro Css drop-shadow

Las diferencias entre las propiedades css box-shadow y el filtro drop-shadow con ejemplos ilustrativos.

Diferencias: box-shadow frente al filtro Css drop-shadow

·Por Kseso ✎ 6

Ambas son propiedades de Css. Y pese a que la sintaxis es la misma, hay grandes diferencias en el resultado obtenido tras aplicar box-shadow o drop-shadow

Antes de entrar a verlas, quizás te interese ampliar tus conocimientos sobre ellas:
.- Box-shadow Css: La sombra a fondo
.- Introducción a los Filtros Css.

Box-shadow vs drop-shadow Semejanzas

Quizás la primera y única es que comparten la misma sintaxis y que el efecto conseguido inicialmente parezca el mismo:

.box-shadow { box-shadow: rgba(0,0,0,.5) 2px 2px 10px 4px; } .drop-shadow { drop-shadow: rgba(0,0,0,.5) 2px 2px 10px 4px; }

Y hasta aquí los parecidos

Diferencias entre Box-shadow y drop-shadow

  1. Sobre la sintaxis: Drop-shadow no admite el valor inside
  2. El soporte de los navegadores: prácticamente total para box-shadow y según caniuse para drop-shadow sólo algunas versiones de webkit (y con prefijo).
  3. Drop-shadow supone una carga mayor para el navegador y el equipo que box-shadow.
  4. El resultado del efecto aunque similar difiere notáblemente, no en cómo se muestra la sombra sino qué la muestra.

Qué genera sombra

Con box-shadow la sombra se aplica a la caja del elemento. Sin embargo el filtro Css drop-shadow lo es sobre el elemento generado. Mira la imagen de abajo:

imagen ilustrativa diferencia entre box-shadow y drop-shadow

Es el típico triángulo css conseguido con bordes. Como ves, la sombra con box-shadow es para toda la caja generada, mientras que drop-shadow lo hace sólo en el elemento visible: el borde que tiene color.

Aquí un ejemplo en vivo.

Pero si hablamos de más de un elemento también hay diferencias. 2 caso:
El típico 'callout' conseguido en base a una caja y el pseudoelemento ::before

2ª imagen ilustrativa diferencia entre box-shadow y drop-shadow

La sombra tanto con drop-shadow como con box-shadow sólo se declara en la caja. Sin embargo, con el filtro se aplica también al triángulo del pseudoelemento y el efecto final es mucho más "realista". Si aplicamos box-shadow también al pseudoelemento el efecto es el tan antiestético de arriba.

Ejemplo vivito y sombreado:

Especialmente notorias las diferencias en la flecha con el asta curva.

Y en imágenes

Pero donde es más evidente la diferencia entre el filtro drop-shadow y box-shadow es al aplicarlos a imágenes con transparencias, como los png.

Volvemos a encontrarnos que box-shadow pone la sombra al contorno de toda la imagen, esto es, a la caja que genera la imagen.

por contra, la sombra obtenida con el filtro drop-shadow lo es sólo sobre el contorno de las partes visibles.

La diferencia en png´s

El porqué de la diferencia

Para comprender el comportamiento del filtro hay que ir al documento del consorcio que lo desarrolla: filters effects 1.0

A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output. The output image is either rendered into the document instead of the original element, used as an input image to another filter effect, or provided as a CSS image value.

"Un efecto de filtro es una operación gráfica que se aplica a un elemento tal como está dibujado en el documento. Se trata de un efecto basado en imágenes, en que se toman cero o más imágenes de entrada, (aplica) una serie de parámetros específicos para el efecto y, a continuación produce como salida (resultado) una imagen."

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso