Poner sombras alrededor del cuerpo del blog

enero 06, 2015



En una entrada anterior vimos como añadir bordes en blogger, a raíz de esa entrada me llegaron algunos emails preguntándome si era posible añadir sombras de colores en vez de bordes... ¡y sí, es posible! Hoy vamos a ver como añadir sombras en Blogger para enmarcar el cuerpo del blog.

Si te perdiste la entrada sobre los bordes, puedes consultarla aquí:

Añadir bordes en Blogger

Pero si no quieres perderte ninguna otra te animo a que te suscribas a mis entradas por email, puedes hacerlo al final de esta misma entrada. Así las recibirás en tu bandeja de entrada el mismo día que se publiquen, por la tarde, y no te perderás nada.

Lo que vamos a hacer es algo así:


¿Ves la sombra que hay alrededor del cuerpo blanco del blog? Pues puede ponerse de cualquier color de una forma muy sencilla.

El código que vamos a usar es:

  -moz-box-shadow: 1px 1px 5px #000000;
  -webkit-box-shadow: 1px 1px 5px #000000;
  -goog-ms-box-shadow: 1px 1px 5px #000000;
  box-shadow: 1px 1px 5px #000000;

En realidad, el efecto sombreado genérico es el que te he marcado en verde, los otros tres son para que se vea correctamente en todos los navegadores.

Empezamos:

1.- Abrimos nuestra plantilla HTML, pinchamos en cualquier zona dentro del código y abrimos el buscador interno de blogger pulsando a la vez: Control + F.


2.- Buscamos:

.content-outer {


3.- Encontraremos el siguiente código:

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}




4.- Ahora cambiamos la parte del código que te he marcado en amarillo por el primero que hemos visto. Quedaría así:

.content-outer {
  -moz-box-shadow: 1px 1px 5px #000000;
  -webkit-box-shadow: 1px 1px 5px #000000;
  -goog-ms-box-shadow: 1px 1px 5px #000000;
  box-shadow: 1px 1px 5px #000000;

  margin-bottom: 1px;
}


5.- Y, por último, solo tienes que cambiar el código del color que te he coloreado de violeta por el que quieras de esta web:

Colores HTML

Es muy importante que el código sea el mismo en las cuatro líneas, recuerda que la única diferencia es que se adaptan a navegadores distintos. También puedes jugar con el número de píxeles para cambiar la dirección y extensión del sombreado hasta dejarlo tal y como quieres.

Una vez que esté a tu gusto, solo nos queda guardar los cambios ¡y listo!


Ha sido sencillo ¿verdad? 

Pues si te animas a usarlo en tu blog ¡déjame el enlace en comentarios para verlo!





Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

4 pensamientos ¡falta el tuyo! ;)

  1. Chulo, lo probaré.
    Me gustaría poner una línea que separe mi sidebar de la entrada, me dices cómo hacerlo. Gracias.

    ResponderEliminar
  2. Buenas tardes,

    estoy actualizando mi blog y justamente estaba buscando algoasí, pero mi intención es colocar esas sombras unicamente entre las entradas del blog (main column) y las columnas laterales ( sidebar lefft/right). ¿Podría realizarse? o ¿solamente se puede en el conjunto del blog?

    Un saludo!

    ResponderEliminar
  3. Lo he probado y no me funciona. En realidad no sé que pasa que todo lo que intento cambiar no funciona. ¿Se te ocurre porqué es? Soy novata... :(

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.