Añadir sombras a las imágenes

Cómo añadir sombras a las imágenes con CSS

En este artículo vamos a aprender a crear sombras para destacar nuestras imágenes, aunque en realidad, este código podemos aplicárselo a cualquier objeto de nuestra web.

Al igual que en un diseño realizado con cualquier programa vectorial o de tratamiento de imágenes, este efecto sirve para destacar unos objetos sobre otros, para darle profundidad al diseño, o simplemente como elemento decorativo.

Veremos cómo aplicar sombras a imágenes, a divs (o cualquier otro objeto), y también cómo crear un efecto hover que aplique sombra al objeto cuando situamos el puntero del ratón sobre ese objeto.

¡Vamos a ello!

Sombra en las imágenes

Como siempre, utilizaremos un código CSS muy sencillo de utilizar, además, crearemos una clase para que podamos a plicar el efecto a los objetos que necesitemos.

El código que vamos a utilizar es el siguiente:

Como ves es un código muy sencillo, tanto de escribir como de explicar.

¿Qué hace este código?

En primer lugar, creamos una clase llamada sombra, a la que le añadimos la propiedad box-shadow, que será la encargada de aplicar la sombra al objeto que seleccionemos.

A continuación, tenemos que saber cómo se aplica la sombra:

• Primer valor: es el encargado de crear la sombra en el eje horizontal, de tal forma que si ponemos valores positivos, la sombra se extenderá hacia la derecha, si los ponemos negativos, hacia la izquierda.
• Segundo valor: creará la sombra sobre el eje vertical, y al igual que el anterior, si ponemos valores positivos, la sombra se extenderá hacia abajo, y si ponemos valores negativos, hacia arriba 🙂
• El tercer parámetro será el difuminado de esa sombra, es decir, haremos que no se vea tan dura esa sombra al rededor del objeto.
• El siguiente valor es la extensión de la sombra, es decir, hasta cuántos píxeles se puede extender la sombra, independientemente del difuminado.
• El último valor que podemos tener en cuenta es el color de la sombra, para que no sea tan oscura con el color que viene por defecto, que es negro.

¿Dónde ponemos este código para que funcione?

Al ser código CSS, podemos pegarlo directamente en el personalizador de WordPress, para ello vamos al menú Ajustes, Personalizar,

Recuerda que hemos creado la clase .sombra para poder aplicársela a cualquier objeto de nuestro WordPress: una imagen, un div… al que quieras…

Teniendo todo esto en cuenta, podemos darle sombras a las imágenes y crear este tipo de efecto:

Creando sombras internas para los objetos

Jugando un poco con este efecto, podemos crear sombras internas que se verán por dentro del objeto, para ello utilizaremos la propiedad inset.

Para ver cómo se vería este efecto en otro objeto que no sea una imagen, crearemos un div de 350px de longitud y 350px de altura, y le aplicaremos el efecto. Lo primero que haremos será crear los valores anteriores, el código sería algo parecido a este:

En este caso no le damos desplazamiento horizontal ni vertical al efecto, para que se aplique justo a los bordes de la imagen, le damos un difuminado de 20px y una extensión de 5px. Por último, le damos un color para la sombra interna, que en este caso es blanca (#fff), ya que la imagen es muy oscura.

El código HTML para insertar este objeto es el siguiente:

Y el resultado sería este:

Crear un efecto hover con sombra al pasar sobre un objeto

Este efecto es super secillo de hacer, una vez que ya hemos hecho el anterior de crear una sombra externa a una imagen. Tan solo tenemos que añadir la pseudo-clase hover al código que ya tenemos.

El código que vamos a utilizar es el siguiente:

En este caso hemos creado una clase llamada sombrasobre, para que no interfiera con el efecto anterior, y el resultado es el siguiente:

Nota
Si crees que no debería utilizar la imagen de esta persona, para mostrar los efectos, tengo que decirte que esta persona no existe. Esta cara, y alguna más que he utilizado en otros artículos, ha sido creada con inteligencia artificial mediante la tecnología deep learning de NVIDIA. Si tú también quieres generar caras, puedes visitar la web Thispersondoesnotexist.