Añadir sombras a las imágenes

Tiempo estimado de lectura: 6 minutos

 

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:

.sombra {
box-shadow: 3px 3px 5px 3px #999;
}

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:

Añadir sombras a las imágenes: crear una sombra paralela
Añadir sombras a las imágenes: crear una sombra paralela

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:

.sombrainterna {
width: 350px;
height: 350px;
background-image: url("https://www.josegonzalezbueno.com/wp-content/uploads/2020/08/imagen-cuadrada.jpg");
box-shadow: inset 0 0 20px 5px #fff;
}

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:

<div class="sombrainterna"></div>

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:

.sombrasobre:hover {
box-shadow: 3px 3px 5px 3px #999;
}

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

Efecto de sombra paralela al pasar el ratón sobre la imagen
Efecto de sombra paralela al pasar el ratón sobre la imagen

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.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

2 comentarios

    1. Hola Pedro, en primer lugar me gustaría darte las gracias por visitar el blog y leer los artículos.
      También te doy las gracias por tu comentario y te animo a que leas y comentes otras entradas.
      Muchas gracias de nuevo por tu visita.

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *