Sombreado avanzado con CSS3

       En la entrada anterior vimos el uso de sombras en elementos HTML. Ahora vamos a ver algunos parámetros más de sombreado.

       Hasta ahora habíamos visto que podíamos desplazar horizontalmente la sombra, verticalmente, y desenfocarla. Pero no hay que confundir esos desplazamientos con el tamaño de la sombra. Puede parecer que cuando decimos 10px estamos diciendo que la sombra ocupe 10 píxeles hacia cierto lado, pero no, lo que estamos diciendo es que la sombra se desplace 10 píxeles hacia ese lado. Si la desplazamos mucho veremos que es un cuadrado del mismo tamaño que el elemento sombreado. Con un cuarto parámetro podemos hacer esta sombra más grande o pequeña. Con un valor positivo la hacemos más grande (similar a usar padding en un elemento) y con un valor negativo la hacemos más pequeña.

#sombraGrande{
    box-shadow:50px 50px 10px 25px #666;
}

Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.



#sombraPequena{
    box-shadow:50px 50px 10px -20px #666;
}


Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.



       Por último, todo lo que hemos visto eran sombras externas al elemento, pero también podemos usar sombreado interno.

#sombraInterna{
     box-shadow:10px 10px 50px 20px #ffc inset;
}


Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.



       Como vemos con esto conseguimos una sombra interna amarilla. Combinando lo visto hasta ahora, vamos a hacer una sombra doble, una interna, y otra externa en un tono un poco más oscuro. Una vez más combinando bordes y múltiples sombras internas y externas se pueden conseguir efectos visualmente mucho más aparentes que los ejemplos aquí mostrados.

#sombraInterna2{
     box-shadow:10px 10px 50px 5px #ccf inset,10px 10px 50px 5px #aaf;
}

Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.