Una de las funciones más usadas y populares de CSS3, junto con el redondeo de bordes, es el sombreado. Es una técnica sencilla, y con la propiedad box-shadow, generalmente, podemos conseguir el sombreado que necesitemos a cualquier elemento de la web. Por supuesto hay salvedades, y no siempre el resultado del sombreado es el esperado, puesto que box-shadow sea aplica a la caja del elemento. Para ello también poseemos una herramienta más potente, el filtro de CSS drop-shadow que aplica el sombreado directamente sobre el objeto generado.

Pero, ¿hay alguna similitud entre ambas propiedades?, ¿cuáles son sus diferencias?, y su compatibilidad con los navegadores, ¿es la misma?. En este post voy a intentar responder a todas estas dudas, y puede que alguna más, con ejemplos muy claros sobre su sintaxis y funcionamiento. Así que no esperes más, que no se diga que otro blog te hace sombra.

Vamos a comenzar con la sintaxis de ambas propiedades, que quizás sea en único punto de unión entre ambas y por tanto su única semejanza. Sería de la siguiente forma: box-shadow: h-shadow v-shadow blur spread color inset y filter: drop-shadow (h-shadow v-shadow blur spread color). Como puedes ver la sintaxis es muy parecida, aunque hay algunas diferencias: drop-shadow se comporta de forma diferente en el uso de blur, no admite spread en algunos navegadores y no admite inset, un valor que permite crear sombras interiores con box-shadow.

#ejemplo1{box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);}
#ejemplo2{filter:drop-shadow(0 8px 8px rgba(0,0,0,0.2));}

Y todos esos valores, ¿para qué son?:

• H-shadow es el valor del desplazamiento horizontal de la sombra, hacia la derecha si el valor es positivo y hacia la izquierda si el valor es negativo.
• V-shadow es el valor del desplazamiento vertical de la sombra, hacia abajo si es positivo y hacia arriba si es negativo.
• Blur es el radio de desenfoque, un valor opcional que define la dureza o suavidad de la sombra. No admite valores negativos. Se comporta de forma diferente según que propiedad usemos.
• Spread es la distancia de propagación, también opcional, y que define el tamaño de la sombra con respecto al objeto. Puede tomar valores tanto positivos como negativos. Es una diferencia fundamental, ya que webkit y otros navegadores no soportan este valor si usamos drop-shadow, y la sombra no será renderizada.
• Color, este está muy claro, es el color de la sombra.

Puede existir un sexto valor, que toma por defecto el valor outset, y que se puede cambiar a inset para crear una sombra interior en lugar de una exterior, aunque este valor sólo lo puede tomar box-shadow.

Para conseguir ver la verdadera diferencia entre una u otra propiedad vamos a usar uno de esos triangulitos que dibujamos en cómo dibujar triángulos con CSS y les aplicaremos la misma sombra que usamos en los dos primeros ejemplos. Recuerda que una de las pegas de usar este método para dibujar triángulos era que no podíamos usar sombreados u otras técnicas de CSS3, pues bien, no es del todo cierto, si se puede hacer un sombreado, aunque el resultado no es el esperado usando box-shadow.

En cuanto a la compatibilidad con los navegadores actuales, box-shadow es de esas propiedades consideradas "100% compatibles", de hecho desde muchos sitios se insta dejar usar los prefijos. Por contra drop-shadow, aunque no todo el mundo opine lo mismo, no es ni mucho menos tan compatible, tanto es así que los prefijos son del todo aconsejables.

Por último, sólo queda destacar que drop-shadow supone una carga mayor para el navegador, y por tanto para el equipo. Cual usar depende en gran medida a que vamos aplicar el sombreado. Si es un elemento simple, como puede ser un div o un texto, con box-shadow será mas que suficiente, además de recomendable. Si por el contrario vamos a aplicar el sombreado sobre un elemento generado, como por ejemplo el triángulo que hemos usado en el ejemplo anterior, no nos queda otro remedio que usar drop-shadow.