Cajas sombreadas en CSS3

Las divs sombreadas en CSS3 son de mucha utilidad para resaltar nuestras cajas (div) de enlaces con las que cuenta nuestros paginas web o simplemente para crear fondos donde se encuentran nuestros contenidos. Las vistas dinámicas en CSS3 que se originan con esta tecnología se entorpece cuando es cargado en navegadores que no son compatibles como lo es Internet Explorer, sin embargo, esto no nos impide valorar esta tecnología y entusiasmarse por el arte que puedan estas generar.

Las cajas sombreadas utilizan los siguientes elementos :

box-shadow: -10px 0px 30px #FFF;

Donde el primer numero indica el desplazamiento de cual se moverá la sombra, el segundo nos indica como se desplazara hacia el lado vertical, el tercero nos indica el desenfoque de nuestra sombra y el cuarto nos indica el color,

Para poder practicar este código ponemos en nuestro body el siguiente div que emplearemos para ver el resultado que origina box shadow:

<div id="uno">
La vida es una escuela de gladiadores, donde los hombres viven y luchan unos contra otros. Lucio Anneo Séneca
</div>

Agregamos nuestra hoja de estilo:

#uno {
width:400px;
background:#06F;
padding:30px;
margin: 100px;
shadow:20px 20px 1px #FFF;
-o-shadow:20px 20px 1px #FFF;
box-shadow:20px 20px 1px #FFF;
-moz-box-shadow:20px 20px 1px #FFF;
webkit-box-shadow:20px 20px 1px #FFF;
border-radius:10px;
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
font-family: "Comic Sans MS", cursive;
font-size: 20px;
color:#FFF;
text-align: justify;
}

Nos quedara de la siguiente forma:




Podemos estar jugando con los valores dando 10px en horizontal, 40px en vertical y un desenfoque que se notara un poco de 5px, dejando el color blanco.



Una sombra atrás de nuestra caja o un resplandor es lo que se logra utilizando esta elegante tecnología:




Por ultimo, al introducir inset a nuestro codigo; box shadow, permitirá que la sombra se vea dentro de nuestra caja:



En este tutorial escribimos un poco de border-radius que nos permite crear bordes redondos en nuestras divisiones como se hablara más a delante. border-radius