Tamaño de sombras con box-shadow en CSS3

Existe un quinto parámetro opcional para box-shadow en CSS3 y éste sirve para darle un tamaño a dicha sombra que estamos invocando.

ver ejemplo

Por ejemplo normalmente usamos box-shadow asi:

Código :

box-shadow: 10px 10px 20px black;
/* que significa
box-shadow: "X" "Y" "difuminado" "color";
*/

Ahora lo que planteo en este tutorial es usar un párametro adicional que rige el tamaño de dicha sombra, ya que en su defecto es del mismo tamaño de la caja asociada.

El código quedaría así:

Código :

 box-shadow:10px 10px 20px -10px black;
/* que significa
box-shadow: "X" "Y" "difuminado" "tamaño de la sombra" "color";
*/

Hay que tener en cuenta que si ponemos por parámetro en el tamaño de la sombra " 0 " no estamos poniendo un tamaño nulo, sino que sólo estamos usando el tamaño de la caja asociada, es decir que si yo tengo una caja de 100px x 100px y nosotros ingresamos 0 en el tamaño de la sombra esta sería también de 100px …
Continua leyendo desde la fuente