NeytorTec Tutoriales Web

Neytortec es un blog dedicado a brindar conocimientos Sobre las diferentes formas de crear un sitio web desde el aprendizaje de lenguajes web hasta su aplicación en el uso de un 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 at...

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!

2 comentarios:

  1. Hola, Neytor. Me interesa esta información, pero no entendí cómo aplicarla. Dónde poner el código. Podrías, por favor, explicarlo paso a paso. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Maria, este código lo puedes aplicar directamente en tu plantilla, o ir a añadir css en la opción plantilla de blogger, te dejo un link de una entrada anterior para que te guíes:
      Añadir css en Blogger

      Eliminar