Sombras en CSS3

Profesores:JAB y Ester Torres

Sombras de <div> (cajas)

Con HTML5 podemos crear de una manera sencilla tanto sombras para zonas del HTML (<div>, <article>, <footer>, <header>...), como para textos. Aunque cada uno de estos tipos de sombra tiene su propia etiqueta, la sintaxis sigue la misma lógica.

Así, en el caso de la sombra aplicada a <div>, zonas o secciones del html utilizamos la propiedad box-shadow.
section{
   box-shadow: 6px 20px 10px black;
}




En este ejemplo, el primer valor (6px), indica el número de píxeles que se desviará la sombra horizontalmente.
El segundo valor (20px), especifica el número de píxeles que se moverá la sombra verticalmente.
El tercer valor (10px), es la suavidad que tendrá la sombra (a menor valor más duro será el borde de la sombra).
El último valor pertenece al color de la sombra (indicando el nombre de color o su código hexadecimal).

Por ejemplo, si modificamos este tercer valor, bajándolo de 10px a 1px, la sombra tendrá una terminación mucho más dura:
section{
   box-shadow: 6px 20px 1px black;
}



Sombras internas
Para crear sombras internas únicamente tenemos que añadir el valor inset al final de 'box-shadow':
section{
   box-shadow: 7px 9px 15px black inset;
}


Creación de 'halos' o 'resplandores'

Para crear un halo o resplandor que rodee una caja o el <div> que corresponda indicamos '0px' en los dos primeros valores y especificamos el color del resplandor.
section{
   box-shadow: 0px 0px 30px blue;
}




Sombras en textos

En el caso de las sombras en textos utilizamos la etiqueta 'text-shadow', que funciona exactamente igual que 'box-shadow':

#apartado1{
   text-shadow: 10px 10px 5px gray;
}

Este es el texto que contiene el <div> con id="apartado1"

Múltiples sombras en el mismo elemento

Para aplicar más de una sombra a un mismo elemento debemos añadir los diferentes parámetros de cada una de las sombras separadas por comas:

#apartado1{
   box-shadow: 0px 0px 20px red inset, 0px 0px 25px blue;
}
La primera sombra (0px 0px 20px red inset) está situada justo encima del div, con una distancia de sombra de 20 píxeles, de color roja e interna. La segunda (0px 0px 25px blue) también está situada justo encima del div, con una longitud de sombra de 25 píxeles, de color azul y como no se indica ("inset"), es una sombra externa.