CSS3: Box-shadow - return(GiS);

Otra de las muy esperadas propiedades de CSS 3 se trata de box-shadow la cual nos va permitir añadir tanto sombras externas como internas a nuestros elementos. Esta propiedad funciona de la siguiente manera:

¿Cómo funciona realmente?

La propiedad box-shadow tiene 5 parámetros: horizontal offset, vertical offset, blur radius, spread radius, color y un valor opcional: inset. Horizontal y vertical offset son los parámetros que definen qué lados del elemento se verán afectados por la sombra y el ancho que ocuparán. Por ejemplo, si el horizontal es negativo se posicionará en el horizontal parte superior de la figura (como se muestra en el ejemplo A) y en el lado contrario si es positivo (figura B). Lo mismo ocurre con la propiedad vertical: si es negativo se situará en la izquierda de la figura y si el valor es positivo ocupará el lado derecho (figura B).

El valor opcional inset indica que la sombra que estamos mostrando será interior (figura C).

Por otro lado, para que la sombra no parezca artificial tenemos los valores blur radius y spread radius, los cuales nos permiten difuminar la misma. Si aplicamos el primero de ellos, como en la figura D, veremos que la sombra es mucho más difuminada y produce una sensación más amigable. Si además indicamos spread radius lo que vamos a conseguir es que esa sombre se extienda más ampliando el campo del elemento (figura E). Por supuesto, estos efectos pueden utilizarse como sombra interior, tal y como se muestra en la figura F.

Por último, si queremos que dicha sombra envuelva a toda la figura, tanto el vertical como el horizontal serán 0 píxeles y jugaremos con el blur radius y el spread radius de la sombra, la cual se extenderá desde los bordes externos o internos del elemento (figura G).

Por lo tanto, el código HTML sería el siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>BoxShadow</title>
</head>
<body>
    <div id="example_A">
        example A
    </div>
    <div id="example_B">
        example B
    </div>
    <div id="example_C">
        example C
    </div>
    <div id="example_D">
        example D
    </div>
    <div id="example_E">
        example E
    </div>
    <div id="example_F">
        example F
    </div>   
    <div id="example_G">
        example G
    </div>
</body>
</html>

Y a través del CSS definiríamos cada una de las sombras:

body
{
    font-family: Segoe UI;
}
div
{
    background-color: #EEEEEE;
    float: left;
    height: 65px;
    margin: 40px;
    width: 160px;
    text-align: center;
    padding-top: 50px;
}
/*box-shadow: horizontal offset, vertical offset, blur radius,spread radius, color,[inset]  */
#example_A
{
    box-shadow: -5px -5px #888888; 
}
#example_B
{
    box-shadow: 5px 5px #888888;
}
#example_C
{
    box-shadow: 10px 10px #888888 inset;
}
#example_D
{
    box-shadow: -5px -5px 5px #888888;
}
#example_E
{
    box-shadow: -5px -5px 5px 5px  #888888
}
#example_F
{
    box-shadow: -5px -5px 5px 5px #888888 inset;
}
#example_G
{
    box-shadow: 0 0 5px 5px #888888;
}

Espero que os haya ayudado a entender mejor todas las posibilidades que nos da esta magnífica propiedad y dejemos de lado las imágenes con sombreado incluido 🙂

Adjunto el enlace del ejemplo por si fuera de utilidad.

¡Saludos!