En diseño web es muy habitual encontrar multitud de elementos que tienen sombra. Desde botones, tarjetas, marcos de imágenes, etc. Pero cuando intentamos crear una, vemos como tienen varios valores, y en muchas ocasiones no sabemos cuales son los más adecuados, o que efectos van a provocar. Es por esto que hemos querido hacer una pequeña guía parea conseguir mejores resultados con tus sombras.
Con las sombras vamos a conseguir, como mínimo, dos efectos en nuestro diseño. Por un lado, el elemento con sombra va a destacar sobre los demás, y sobre su fondo. Por otro, la sombra nos produce una efecto de tridimensionalidad, como pasa en la vida real. Esto es muy eficaz si queremos dar cierta volumetría a nuestro diseño, y que no parezca que esté todo en un mismo plano.
En este artículo nos hemos querido centrar en dos partes. Por una, veremos los diferentes valores que componen una sombra, cuales son los más adecuados y por qué. Y por otro, como aplicarlo mediante CSS en nuestro diseño web. Empezaremos con una pequeña explicación sobre la propiedad CSS box-shadow
, que es la que necesitaremos para aplicar una sombra exterior a cualquier elemento de nuestra web.
Conociendo la propiedad CSS box-shadow
Para los que no estéis familiarizados con esta propiedad, vamos a hacer una breve parada para conocer sus valores. Su sintaxis sería la siguiente:
box-shadow: h-offset v-offset blur spread color;
Cada uno de estos valores representa:
- h-offset – desplazamiento horizontal. Los valores negativos indican un desplazamiento de la sombra hacia la izquierda, y los valores positivos hacia la derecha.
- v-offset – desplazamiento vertical. Los valores negativos indican un desplazamiento de la sombra hacia arriba, y los valores positivos hacia abajo.
- blur – nos indica el difuminado de la sombra. Con un valor 0, la sombra no tendrá ningún tipo de difuminado.
- spread – nos marca la propagación de la sombra. Con un valor 0, la sombra tiene el mismo tamaño que su elemento. Conforme más alto sea este valor más grande será la sombra con respecto a su elemento.
- color – el color de la sombra. Se puede utilizar valores HEX, pero utilizaremos RGBA para usar transparencias.
Una vez conocemos lo básico, pasemos a ver que valores son los más aconsejables de emplear en nuestros diseños web.
Color base de la sombra
Empecemos por lo básico, que es determinar el color que va a tener la sombra de nuestro elemento. Lo normal es representar una sombra con la misma representación que tienen en el mundo real. Es decir, elegir el color negro, y darle una transparencia. Personalmente, el negro puro es algo que trato de evitar en mis diseños, aunque vaya a combinarlos con una transparencia.
Lo ideal es elegir una tonalidad de gris, a la que le daremos una transparencia. Podéis probar diferentes combinaciones para ver con cual os sentís más cómodos. La elección de un gris más claro u oscuro dependerá de la prevalencia que le queramos dar a la sombra, y del color del fondo que tengamos. En fondos más oscuros, quizás necesitemos grises más oscuros para que hagan más efecto.
Valor alpha / transparencia
Como hemos mencionado en un par de ocasiones, la transparencia de nuestra sombra, o su valor alpha, cumple un cometido esencial. Con este parámetro trataremos de crear una sombra más suave y amigable, que cumpla su cometido dentro del diseño sin ser un elemento de distracción.
Trataremos de simular una sombra suave, y lo conseguiremos con un valor alpha entre el 5% y el 25%. O incluso podemos llegar a un 40% si el color base de la sombra es muy claro. Trataremos de evitar irnos más allá del 40%, ya que obtendríamos una sombra demasiado dura.
Desplazamiento vertical de la sombra
Tal como comentamos al principio, el valor v-offset nos daba el desplazamiento vertical de la sombra. Jugando con este valor conseguimos darle profundidad y tridimensionalidad a nuestro diseño, a pesar de estar en un entorno 2D. Y todo gracias al efecto óptico que provoca la longitud de la sombra.
Con un desplazamiento vertical pequeño, el elemento da la impresión de estar muy cerca del fondo. Y con un desplazamiento vertical grande, de estar mucho más alejado. El truco esta en jugar con este valor de desplazamiento vertical y el blur. En la vida real, los objetos cercanos a su base proyectan una sombra con bordes muy duros. Mientras que los objetos muy alejados, suelen tener unas sombras con bordes más difuminados.
¿Y qué ocurre con el desplazamiento horizontal?. En mi caso, no soy muy fan de darle uso, y suelo dejarlo con un valor 0, ya que me da una impresión de diseño más apilado. Esto es un poco manías personales, por lo que tampoco quiero sentar cátedra ;).
Usando un tono de color en nuestra sombra
Hemos hablado de sombras con tonalidades grises de elementos blancos. Pero, ¿qué pasa si nuestro elemento tiene una tonalidad diferente?. Pues no es mala idea que la sombra tenga el mismo color. Eso si, es conveniente que sea un poco más oscuro. Para ello, lo ideal es usar el modelo de color HSB, y bajarel valor B (brightness / brillo) entre 20 y 30 puntos.
Código CSS final
Una vez sabemos todo esto, ya podemos generar el código CSS de nuestra sombra. Por ejemplo, voy a utilizar estos valores:
box-shadow: 0px 35px 80px (173, 185, 201, 0.2);
Estos valores los he tomado porque estoy trabajando en un entorno claro, y quiero que mis elementos den la impresión de estar alejados del fondo, por eso el valor del desplazamiento vertical es tan alto.
Consejos finales
Estos parámetros nos pueden servir como una base sólida para empezar a mejorar nuestras sombras, pero como hemos comentado, no están escritos en piedra. Podemos modificarlos a nuestro gusto, siempre dentro de ciertos intervalos, y conociendo perfectamente el efecto que va a provocar cada cambio.
Y es que esto es lo más importante de todo: lo interesante no es saber una fórmula, sino conocer como funciona y como podemos modificarla para conseguir los objetivos que queramos. Porque estos objetivos van a variar de un proyecto a otro, y lo más seguro es que nunca tengamos los mismos valores de sombras en todos. Pero lo interesante es saber adaptarnos de forma adecuada a cada uno. Por suerte, en el mundo del diseño no hay una formula del éxito, ya que sería todo muy aburrido. El buen diseñador sabe adaptar sus conocimientos y aplicarlos de forma correcta en cada situación.
Esperemos que os haya resultado ameno este artículo, y que os sirva de ayuda en vuestro próximos proyectos. Como siempre, tenéis disponibles los comentarios para cualquier duda o sugerencia que nos queráis hacer.