Sombras en la Imágenes del Blog

Las imágenes en nuestro Blog son una guía visual del contenido de nuestras entradas, así que efectuar estilos para que estas sean mas atractivas y llamativas al lector puede ser una una magnifica idea a la hora de querer captar la atención de los visitantes. En esta entrada veremos como añadir sobra a los bordes de nuestras imágenes usando la tecnología de los estilos CSS.

 Sombras en la Imágenes del Blog:

Si observamos la imagen de arriba podemos notar que tiene bordes sombreados esto podemos obtener aplicando la propiedad: box-shadow en los estilos CSS que le aplicamos a la imagen.

img { box-shadow: 2px 2px 2px 2px #7EB4FC }

Explicación de los valores en box-shadow:

img { box-shadow: "derecha" "abajo" "brillo" "borde" "color" }

-El primer valor indica el tamaño de la sombra que tendrá la parte derecha de la caja en este caso la imagen.

-El segundo valor indica el tamaño de la sombra que tendrá la parte de abajo de la caja en este caso la imagen.

-El tercer valor indica el brillo de la sombra que tendrá la caja en este caso la imagen.

-El cuarto valor indica el tamaño del borde que tendrá la caja en este caso la imagen.(este valor puede ser opcional)

-El quinto valor indica el color que tendrá la sombra de la caja en este caso la imagen.

Ejemplos de Imágenes con sombras:

img { box-shadow: 4px 4px 2px 1px #a12b32 }

img { box-shadow: 8px 2px 4px 1px #cccccc }

img { box-shadow: 2px 8px 8px 1px #000000 }

Espero que este Tutorial les sea de mucha ayuda, ahora podemos generar sombras a nuestras imágenes o cualquier division del blog de manera fácil y sencilla solo conociendo algunos parámetros de CSS.

Cualquier duda o Aporte hacerlo por comentarios. Gracias por su Tiempo!