Cajas con sombra

Vamos a crear una sombra para nuestra caja. Creamos una nueva carpeta que llamaremos»sombras» y es donde guardaremos nuestros archivos HTML y CSS para este ejemplo. Para el archivo HTML le llamaremos (como siempre) «index.html«… 

… y para el archivo CSS que llamaremos «css3.css«.  Copia el siguiente listado.

La regla box-shadow tiene tres opciones …

…  box-shadow necesita al menos tres valores. El primero, que puede ver en la regla rgb(), es el color. Este valor fue construido aquí utilizando la función rgb(rojo, verde, azul) y números decimales, también podemos escribirlo en números hexadecimales. Los siguientes dos valores, expresados en pixeles, establecen el desplazamiento de la sombra.

Este desplazamiento puede ser positivo o negativo. Los valores indican, respectivamente, la distancia horizontal y vertical desde la sombra al elemento. Valores negativos posicionarán la sombra a la izquierda y arriba del elemento, mientras que valores positivos crearán la sombra a la derecha y debajo del elemento. Valores de 0 o nulos posicionarán la sombra exactamente detrás del elemento, permitiendo la posibilidad de crear un efecto difuminado a todo su alrededor.

• Modifique el listado CSS de manera que muestre algo parecido a la imagen de abajo.