Sombras y dimensiones con CSS3 – box-shadow

En este artículo practicamos con propiedades CSS3 para agregar sombras a las imágenes y efectos de profundidad al sitio.

El agregar efectos de sombra ha sido uno de los trucos más recurridos para realzar las imágenes que desplegamos en nuestros sitios Web. Desde que el uso de Photoshop y otros programas de edición ha venido a la alza, este efecto se ha practicado cotidianamente como parte de un ritual de estilización proporcionada por los diseñadores gráficos.

En la actualidad ya no es requerido el llevar un tutorial completo sobre edición de imágenes para poder aplicar esta clase de efectos, ya que CSS nos permite utilizarlos aún sin tener conocimientos previos de diseño, facilitando las cosas a los programadores que nos hemos enfocado más en el funcionamiento de los sitios y que ahora podemos tener un mejor trato del entorno visual.

Box-shadow de CSS3

Box-shadow es una propiedad CSS3 que permite a los diseñadores y desarrolladores implementar fácilmente sombras sobre cualquier elemento de tipo capa. Con esta propiedad podemos especificar las propiedades de la sombra que queremos desplegar proporcionando valores de tamaño, color, offset, y el desenfoque deseado.

Al agregar una sombra creamos un efecto de dimensión y cambia la perspectiva de la imagen, al realizar esto con CSS nos ahorramos el hecho de tener una imagen con cada efecto ya aplicado, simplemente basta con tener la imagen base a la cual podemos añadirle y quitarle efectos mediante propiedades como la ya mencionada.

En este artículo nos enfocaremos a dar un efecto de sombra base para después crear una sombra que de dimensión para darle vida a nuestra imagen plana.

Aplicando la propiedad CSS3 box-shadow

La imagen

Lo primero que necesitamos para llevar a cabo esta práctica es una imagen plana que no tenga ningún tipo de borde ni efecto añadido, de tal manera que podamos aplicar nuestros propios bordes con CSS sin que haya conflicto con la imagen base.

Dicha imagen será colocada dentro de un elemento div, al cual posteriormente le vamos a aplicar los estilos CSS necesarios para lograr el efecto.

<div id="contenedorImg">
    <img src="imagenPlana.png" />
</div>

Añadiendo el borde

Después de definir la imagen pasamos a añadir la clase base “box-shadow”, la cual nos proporcionará un tipo de borde difuminado alrededor de la imagen que produce el efecto tridimensional que buscamos. Como buena propiedad CSS, el efecto producido por “box-shadow” puede ser modificado y alterado, podemos ajustar su tamaño añadiendo píxeles en las propiedades de los elementos.

Nuestro CSS quedaría definido de la siguiente manera:

.sombra-borde {
    width: 600px;
    -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
    -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
    box-shadow: 1px 2px 4px rgba(0,0,0,.5);
}

Y al aplicarlo a nuestro HTML obtendríamos una imagen así:

Sombra profunda

Después de tener listo la aplicación de la sombra a la caja contenedora, continuamos con la creación de una clase de estilo que agregue un efecto sombra profunda para nuestra imagen. Esta sombra nos dará una sensación de mayor profundidad y para ello definimos un código CSS como el siguiente, entorno al elemento “div” que contiene la imagen:

.sombra-profunda:after {
    -moz-transform: skew(-40deg);
    -webkit-transform: skew(-40deg);
    -moz-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);
    -webkit-box-shadow:  70px 0 10px 40px rgba(0,0,0,.2);
    box-shadow: 70px 0 10px 40px rgba(0, 0, 0, 0.2);
    content: "";
    height: 40px;
    left: 0;
    position: absolute;
    top: 360px;
    width: 550px;
}

Con este código la sombra queda sobre la imagen, pero esto lo vamos a corregir en el siguiente paso.

Ajustar el orden del índice Z (z-index)

Por último, cambiamos el orden del índice Z de nuestra sombra, dicho índice indica el orden en que se mostrarán los elementos en el sitio, con ello se evita el empalmar elementos sobre otros más importantes, en este caso lo utilizamos para lograr el efecto de profundidad necesario y evitar que la sombra quede en el primer marco del sitio.

Al darle un valor de “-1” a la propiedad “z-index” logramos pasar la sombra al fondo y con esto completar el marco visual que estamos buscando.

z-index: -1;

Como se puede apreciar en la imagen final, hemos logrado transformar lo plano en algo tridimensional y sólo con unos cuantos pasos sencillos. Basta con aplicar al “div” contenedor de la imagen las clases que creamos en este artículo, para así poder observar los resultados.

<div id="contenedorImg" class="sombra-borde sombra-profunda">
    <img src="imagenPlana.png" />
</div>