Cómo poner sombra en el contenedor del blog

cómo-poner-sombra-al-contenedor-del-blog

Cómo poner sombra difuminada alrededor del contenedor de tu blog es lo que he descubierto recientemente y quiero compartirlo contigo.

Esta forma de colocar sombra difuminada la he realizado en mi blog cuyo theme es Genesis con el child theme New Pro.

 

 

Cómo poner sombra, pasos que debes seguir:

  1. Acceder al archivo style.css
  2. Localizar la clase CSS que se aplica al contender
  3. Insertar el código correspondiente a esa clase

1. Acceder al archivo style.css

Para acceder al archivo style.css, debes de colocarte en el menú de la izquierda sobre “Apariencia” y seleccionar “Editor”

acceder-al-archivo-style-css-1
acceder al editor

De manera predeterminada se abrirá la hoja de estilos de tu child theme en mi casocomo puedes ver, es News Pro

acceder-al-archivo-style-css-2
Seleccionar Estilos > Hoja de estilo (style.css) si no lo está de forma predeterminada

Esto te va a permitir modificar los diferentes archivos ya que tenemos que modificar el contenedor del blog.

2. Localizar la clase CSS que se aplica al contendor

Una vez en el editor CSS vamos a localizar la clase CSS que corresponde al contenedor del sitio, lo vamos a hacer en dos pasos:

  1. Pulsar las teclas Control + F
  2. Escribir en el  buscador que nos sale, en mi caso en la parte superior derecha, .site-container
localizar-la-clase-css
Localizar la clase del contenedor

Al hacer esto ya veras como se resalta en color naranja la primera vez que se encuentra la búsqueda en el archivo.

Pulsa en la flecha hacia abajo del buscador hasta que encuentres la clase “.site-container” ella sola, tal y como puedes ver en la siguiente imagen

site-container

3. Insertar el código correspondiente a esa clase

Para finalizar el apartado de cómo poner sombra sólo queda el último paso y que es insertar el código en el lugar correcto.

Para hacerlo colócate al final de la línea “background-color: #fff;” y pulsa la tecla intro para realizar un salto de línea

insertar-codigo-nuevo-1
Salto de línea para pegar el código

Una vez hecho esto, copia y pega en esa línea el siguiente código: box-shadow: 0px 10px 16px 8px rgba(186, 186, 186, 0.5);

insertar-codigo-nuevo-2
Código insertado

Para finalizar haz click en el botón azul que encontrarás en la parte inferior “Actualizar archivo” y ya puedes visualizar el blog con la sombra

actualizar-archivo
Para actualizar el archivo, pulsar en el botón azul

Acabas de aprender cómo poner sombra difuminada en el contenedor de tu blog y sin saber código sólo copiando y pegando.

Puedes cambiar tanto el color de la sombra como también el porcentaje, tamaño y porcentaje de transparencia:

  • Los números en pixels controlan la distancia o tamaño de la sombra. A mayor número, más difuminado.
  • Las tres primeras cifras dentro del paréntesis controlan el color. Esas tres iguales hacen un gris claro.
  • El último número (0.5) hace referencia a la transparencia de la sombra. Yo la tengo puesta en el 50% (va de 0 a 1)

Explicación en vídeo

Cómo poner sombra difuminada al blog es muy sencillo siguiendo los pasos que te he explicado pero para que lo veas mejor aquí tienes un vídeo


 
Web Hosting
 
 

Te acompaña y apoya en tu éxito,

Toni Herrera

 

 

 

Mailrelay, marketing por correo electrónico

 

Quiero darte las gracias por ayudarme a hacer crecer este blog y pedirte, si te pareció que esta información es útil, que compartas este artículo en Twitter, Facebook o Google +1.

Por mi parte te puedo asegurar que seguiré trabajando para aportar el máximo valor que me sea posible.

No te olvides de déjame tus comentarios más abajo, que con mucho gusto leeré y atenderé. Gracias de veras y de corazón por tu apoyo incondicional.

icon-angle-double-down

Deja un comentario

A %d blogueros les gusta esto: