El diseño web y la sombra CSS

Son innumerables los elementos que solemos encontrar con sombra en el diseño web. Comenzando por tarjetas, botones, marcos de imágenes, y un largo etc. Pero al momento de pretender crear una, vemos que presentan varios valores, y generalmente no conocemos cuáles son los más convenientes, o que efectos producirán.
A través de las sombras se logran, por lo menos, dos efectos en un diseño. Primero que nada, los elementos con sombra sobresalen sobre los otros, y sobre el fondo. En segundo lugar, la sombra genera un efecto tridimensional, tal como sucede en la realidad.

Esto es muy eficiente si deseamos agregar algo de volumen a nuestro diseño, y que no dé la impresión de estar todo en un mismo plano.

Conociendo la propiedad de sombra CSS box-shadow

Para quienes no han tenido experiencia con esta propiedad, se presenta a continuación los valores de sus aplicaciones.

Cada uno de estos valores modifican la sombra:

• h-offset – desplazamiento horizontal. Valores negativos indican desplazamiento de la sombra hacia la izquierda, y positivos hacia la derecha.
• v-offset – desplazamiento vertical. Valores negativos, desplazamiento hacia arriba, y positivos, hacia abajo.
• blur – difuminado de la sombra. Valor 0 sin difuminado.
• spread – propagación de la sombra. Valor 0, la sombra tiene el mismo tamaño que su elemento. Mayor valor, más grande la sombra.
• color –color de la sombra. Se puede utilizar valores HEX, pero utilizaremos RGBA para usar transparencias.

Color base de la sombra

Lo conveniente es representar una sombra con la forma y color que tienen realmente. O sea, seleccionar el color negro, y darle una transparencia.

Lo más recomendable es seccionar un tono gris y darle una transparencia. Se puede ensayar con distintas combinaciones para definir con cual te agrada más. El seleccionar una tonalidad de gris más claro u oscuro depende del predominio que le quiera dar a la sombra, y del color del fondo que se tenga.

Transparencia o valor alpha

La transparencia o valor alpha de nuestra sombra cumple una función principal, tal como se ha señalado. Con esta instrucción procuraremos dar una sombra más tenue en el diseño web, que cumpla su función dentro del diseño web, sin constituir un factor de entretenimiento.

Para aparentar una sombra suave, el valor de alpha debe estar entre el 5% y el 25%. Inclusive, si el color base de la sombra es muy débil podemos prolongar hasta un 40%. Luego de este valor ya la sombra sería muy dura, por lo que no es conveniente pasarnos de aquí.

Desplazamiento vertical de la sombra

Habíamos indicado que el valor v-offset proporcionaba el deslizamiento vertical de la sombra. Manipulando ese valor logramos proporcionarle profundidad y efecto tridimensional a nuestro diseño web, si bien está estar en un plano de 2D. Gracias al efecto óptico que produce la extensión de la sombra.
Al agregarle un desplazamiento vertical reducido el objeto aparenta estar muy próximo al fondo. Pero con un deslizamiento vertical mayor, simula estar más alejado. Lo mágico está en manejar ese valor de desplazamiento vertical y el blur. Los objetos próximos a su base reflejanrealmente una sombra con orillas muy duros. En tanto que las cosas muy alejadas, habitualmente tienen sombras con bordes menos definidos.

Agregándole tonalidades a nuestra sombra

Se han mencionado las sombras con tonos grises de elementos blancos. Pero podemos experimentar otras combinaciones. ¿Qué pasaría si nuestro elemento presenta un tono distinto? Sería buena idea que la sombra presente el mismo color. Claro, siempre y cuando sea más oscuro. Para esto lo más acertado es utilizar el modelo de coloración HSB, y bajar el valor B (brightness / brillo) de 20 a 30 puntos.

Código CSS final

A este nivel ya estamos en capacidad de producir el código CSS de nuestra sombra. Aplicando estos conocimientos, por ejemplo, se pueden usar los siguientes valores:
Box-shadow: 0px 35px (173, 185,201, 0.2)
Se tomaron estos valores suponiendo que se está trabajando en un ambiente claro, y se desea que los elementos aparenten estar apartados del fondo, por ello el valor del deslizamiento vertical es muy elevado.