Cómo Sombrear Una Imagen Con CSS (Box-Shadow CSS)

Tutoriales Blogger: Trucos para Wordpress, HTML y CSS - Blogs de Viajes y de todo tipo
CON la función BOX-SHADOW PODEMOS SOMBREAR LOS BORDES DE UNA IMAGEN PARA DAR UNA SENSACIÓN DE MAYOR PROFUNCIDAD

El diseño de cualquier blog de viajes que se precie es esencial para conseguir un plus de lectores. Y muchas veces, sombrear los bordes de una imagen o de cualquier elemento ayuda a ello. Y mucho. Te cuento cómo hacerlo con la función box-shadow.

Utilizar la función de box-shadow en CSS es tan fácil que solo cuesta una sola línea de código en implementarla. Te contamos el cómo para conseguir el efecto de sombreado en cualquier elemento de WordPress.

box-shadow css elementos imagenes
Con la función box-shadow, puedes conseguir un efecto tan sutil y efectivo como el de esta imagen

Pasos Para Redondear Bordes Con CSS En WordPress

Para redondear los bordes con la función box-shadow en WordPress, hay que personalizar el tema que tengas instalado. Da igual cual sea, ya que todos tienen un apartado para poder insertar tu código CSS personalizado.

  1. Acceder a Apariencia
  2. Acceder a Personalización
  3. Insertar el código CSS desde el apartado CSS adicional (tienes el proceso aquí abajo 👇)
border-radius css - como1
border-radius css - como2

Código Para Sombrear Una Imagen Con CSS En WordPress

En el ejemplo, te pego el código que utilizo en algunas imágenes y elementos de Proyecto Viajero. Hay otros atributos del sombreado más allá del de box-shadow, pero he resaltado el necesario para que el elemento o la imagen tenga el sombreado:

.imagen-marco{
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	border:10px solid #ffffff;
	border-bottom:0px
}

En este caso me gusta que la imagen tenga un marco de 10px, así que he utilizado la función border para enmarcar la imagen.

Si quieres que además, la imagen tenga las esquinas redondeadas (como por ejemplo las que aparecen en el blog de Proyecto Viajero, léete nuestro artículo para conseguir este efecto (border css), es super fácil de conseguir!

Alicja y Alejandro en el borde del Cañón del Parque Nacional de Ordesa - España
La foto queda más resaltada con la función box-shadow … 😚

Espera un momento: a veces conseguir el sombreado que te guste cuesta un poquito. Y es que para gustos…colores! Mírate esta página de ejemplos y escoge, en un momento, el sombreado que más te convenza. Eso es todo! ★

EL MEJOR HOSTING DEL MUNDO EN ESPAÑOL

El hosting de Webempresa es rápido, confiable y seguro: sus servidores son compartidos aislados, discos duros SSD (rápidos!) y ofrecen un hosting optimizado. Ah! y además, te atienden en español. Aquí puedes contratar tu hosting

Te Ha Gustado El Post? Guarda El Pin!

El diseño de cualquier blog de viajes que se precie es esencial para conseguir un plus de lectores. Y muchas veces, sombrear los bordes de una imagen o de cualquier elemento ayuda a ello. Y mucho. Te cuento cómo hacerlo con la función box-shadow - #blogging #wordpress #blogdeviajes