Box-shadow Css: La sombra a fondo y su diferencia con el filtro drop-shadow 10.2.15

Box-shadow Css: La sombra a fondo y su diferencia con el filtro drop-shadow

Seguro que has pensado al ver el título, otro artículo más con algún efecto rarillo basado en box-shadow. A buenas horas, mangasverdes.
Y razón no te faltaría. A estas alturas, hasta el mas novato en Css ya lo conoce y usa.
Pero no va por ahí esta entrada. Fíjate en el siguiente código y compara con el que suelas utilizar:

Sintaxis completa de box-shadow

Un ejemplo de un valor simple y completo en la declaración de la sombra a un elemento.

¿Intrigado por tanto número? Pues a ello vamos y de esto va esta entrada. Ver a qué corresponde y cuál es el efecto de cada uno de los valores posibles en la propiedad box-shadow.

1º Valor: color de la sombra

Puedes elegir expresarlo en cualquiera de las forma permitidas. En el ejemplo está expresada en valor rgba (rgb+canal alpha de transparencia)

En caso de no declarar un valor del color, toma el de la propiedad color del elemento.

2º valor: Desplazamiento horizontal de la sombra (offset)

Puede ser un valor positivo o negativo y estar expresado en cualquiera unidad de longitud que permite css. Expresa el desplazamiento horizontal de la sombra creada (espacio cubierto por ella) respecto al elemento que la genera. Un valor positivo: sombra a la derecha. Negativo: hacia la izquierda. La posición de la sombra es creada con relación a la posición del elemento al que se aplica.

3º valor: Desplazamiento vertical:

Aplica lo mismo que en el anterior, pero en la vertical. valor positivo hacia abajo, negativo hacia arriba.

4º valor: radio de desenfoque

En inglés "Blur Radius". Es opcional. El radio de desenfoque define la dureza o suavidad de la sombra. Cuanto menor sea el valor, más nítida la sombra. Un valor alto creará un desenfoque grande. Admite cualquier valor, pero los negativos son computados como Cero (0).

5º valor: Distancia de propagación (opcional).

Otro valor de la longitud, puede ser positivo o negativo, y define el tamaño de la sombra respecto al del elemento. Un valor negativo hará que la sombra sea más pequeña que el elemento que la genera y un valor positivo mayor.

6º valor: Inset/outset (opcional)

Dos posibles valores, siendo outset el valor por defecto. Marca hacia dónde se creará la sombra.
Inset: se crea en el interior del elemento, outset por fuera de él.
Se puede declarar al inicio o al final, si se intercala entre los demás valores se anula la declaración.

Múltiples valores:

Box-shadow admite múltiples valores. Para ello sólo es necesario separar cada grupo por una coma (,). Como en el siguiente código:

Cuando se declara un valor múltiple (varias sombras separadas por comas), la primera declarada se dibuja sobre (eje Z) la segunda, y ésta sobre la tercera y así sucesivamente.

Un vieja realización: texto 3D con box-shadow:

Otra vía para crear sombras

Css permite crear sombras sin necesidad de utilizar la propiedad box-shadow. Con la llegada de los filtros Css o propiedad filter y su valor drop-shadow o mediante filtros SVG.

See the Pen Filtro: drop-shadow exterior by Kseso (@Kseso) on CodePen.

La característica de las sombras creadas mediante filtros frente a la propiedad box-shadow es que la segunda crea sombra a todos y cada uno de los elementos, mientras que si se declara vía filtros a un grupo de elementos la sombra es la silueta formada por todos ellos, no son sombras individuales de cada uno. Ver demo Diferencias entre Box-shadow y drop-shadow.

El filtro drop-shadow está incluido entre los costosos para el navegador. Lo sobrecargan de trabajo.

También la propiedad box-shadow con múltiples y complejos valores en según qué configuraciones d navegador, SO y hardware puede causar problemas de rendimiento, dibujado y manejo de la página.

Artículo publicado originalmente el 6 de Marzo de 2012

Kseso

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