Sombras sueltas. Los diseñadores web los han amado durante mucho tiempo en la medida en que solíamos falsificarlos con imágenes PNG antes de que CSS Nivel 3 los presentara formalmente a la especificación como el box-shadow propiedad. Todavía busco sombras paralelas a menudo en mi trabajo porque agregan una textura agradable en algunos contextos, como trabajar con diseños en gran parte planos.
No mucho después box-shadow Se presentó un borrador de trabajo para los filtros CSS y, con él, un método para drop-shadow() eso se parece mucho a box-shadow a primera vista. Sin embargo, los dos son diferentes y vale la pena comparar esas diferencias.
Para mí, la principal diferencia salió a la luz desde el principio cuando comencé a trabajar con box-shadow. Aquí hay un triángulo simple no muy diferente al que hice en ese entonces.
Vea Pen CSS Caret de Programar Plus(@ css-tricks) en CodePen.
Usemos esto para desglosar la diferencia entre los dos.
Sombra de la caja
Agrega un box-shadow en ese chico malo y esto sucede.
Vea Pen CSS Caret Box Shadow de Programar Plus(@ css-tricks) en CodePen.
Es molesto, pero tiene sentido. CSS usa un modelo de caja, donde los bordes del elemento están enlazados en forma de rectángulo. Incluso en los casos en los que la forma del elemento no parece ser una caja, la caja sigue ahí y es box-shadow es aplicado a. Este fue mi momento “ah-ha” cuando entendí la caja en box-shadow.
Sombra paralela del filtro CSS
Los filtros CSS son bastante impresionantes. Eche un vistazo a todas las posibilidades de agregar filtros visuales en los elementos y maravíllese de cómo CSS de repente comienza a hacer muchas cosas que solíamos tener que hacer en Photoshop.
Los filtros no están vinculados al modelo de caja. Eso significa que se reconoce el contorno de nuestro triángulo y se ignora la transparencia a su alrededor para que la forma deseada reciba la sombra.
Vea Pen CSS Caret Drop Shadow de Programar Plus(@ css-tricks) en CodePen.
Decidir qué método usar
La respuesta depende totalmente de ti. El simple ejemplo de un triángulo anterior podría hacer parecer que filter: drop-shadow() es mejor, pero no es una comparación justa de los beneficios o incluso las posibilidades de ambos métodos. Es simplemente una ilustración de sus diferentes comportamientos en un contexto específico.
Como la mayoría de las cosas en desarrollo, la respuesta de qué método usar depende. Aquí hay una comparación lado a lado para ayudar a distinguir los dos y cuándo sería mejor elegir uno sobre el otro.
| Sombra de la caja | Sombra paralela | |
|---|---|---|
| Especificación | Módulo de fondos y bordes CSS, nivel 3 | Módulo de efectos de filtro, nivel 1 |
| Soporte del navegador | Estupendo | Bien |
| Admite radio de propagación | Sí, como cuarto valor opcional | No |
| Radio de desenfoque | El cálculo se basa en la longitud de un píxel | El cálculo se basa en el stdDeviation atributo del filtro SVG |
Apoyos inset oscuridad |
sí | No |
| Rendimiento | No acelerado por hardware | Hardware acelerado en navegadores que lo admitan. Es un trabajo pesado sin él. |
Terminando
La diferencia entre box-shadow y filter: drop-shadow() realmente se reduce al modelo de caja CSS. Uno lo ve y el otro lo ignora. Hay otras diferencias que distinguen a los dos en términos de compatibilidad con el navegador, rendimiento y demás, pero la forma en que los dos tratan el modelo de caja es la diferencia clave.
Actualizar: Amelia identificó otra diferencia clave en los comentarios donde la extensión del radio para drop-shadow() se calcula de forma diferente a box-shadow e incluso el de text-shadow. Eso significa que el radio de extensión que puede especificar en box-shadow no es uno a uno con el valor de dispersión predeterminado para drop-shadow, por lo que los dos no son reemplazos iguales entre sí en algunos casos.
Terminemos con esto con algunos otros buenos ejemplos que lo ilustran. Lennart Schoors también tiene un buen artículo con ejemplos prácticos usando información sobre herramientas e íconos que mencionamos anteriormente.
Vea Pen Drop-shadow vs box-shadow (2) de Kseso (@Kseso) en CodePen.
Vea Pen box-shadow & drop-shadow de qnlz (@qnlz) en CodePen.
Vea Pen Drop-shadow vs box-shadow (3) en png´s de Kseso (@Kseso) en CodePen.