Revista Blog

Sombras en la Imágenes del Blog

Publicado el 11 octubre 2013 por Eduardo Javier Perez Cenepo @NeytorTec
Sombras en la Imágenes del BlogLas 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 }
Sombras en la Imágenes del Blog
img{ box-shadow: 8px 2px 4px 1px #cccccc }
Sombras en la Imágenes del Blog
img{ box-shadow: 2px 8px 8px 1px #000000 }
Sombras en la Imágenes del Blog
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!

Volver a la Portada de Logo Paperblog