Cómo agregar un borde de sombra gris alrededor de un blog en CSS

Blogs contenidas dentro de las fronteras son comunes en Internet, y que a menudo tienen efectos visuales como las esquinas redondeadas, degradados y los bordes de la sombra. Creación de un borde sombreado utilizado para tomar un montón de trabajo, que implica la creación de imágenes en Photoshop, el corte de las imágenes y la escritura de código complicado para ponerlos alrededor de la frontera. Utilizando la propiedad "box-shadow" en CSS nivel 3 (CSS3) se puede añadir un borde sombreado en una línea de código CSS.

Instrucciones

1 Abrir archivo de plantilla principal del blog en un editor de texto o un editor de código. Encontrar el "<div>" o "<sección>" etiquetas que rodean el cuerpo de su blog:

<Div id = "blog_wrapper">
Todo el contenido del blog aquí ...
</ Div>

Recibe el nombre de identificación de las etiquetas o añadir uno como se muestra arriba.

2 Abra la hoja de estilo para su blog. En la parte inferior del código de la hoja de estilo crear una nueva regla de estilo que se dirige a las etiquetas de envoltura del blog por su nombre ID:

blog_wrapper {

}

3 Agregue la propiedad "box-shadow" a su nueva regla de estilo. Esta propiedad crea sombras y también puede hacer color o un borde sombreado brillante:

blog_wrapper {

box-shadow: 0px 0px 10px negro;
}

Mediante el establecimiento de los dos primeros valores - izquierda y superior compensaciones - le dicen al navegador para centrar la sombra detrás del blog. El tercer valor representa la cantidad de desenfoque añadido a la sombra con un mayor número que indica mayor desenfoque.

4 Cambio "negro" a un RGBA (Rojo, Verde, Azul y Alfa) Código de color:

blog_wrapper {

box-shadow: 0px 0px 10px RGBA (0,0,0,0.3);
}

El ejemplo anterior muestra un código de RGBA de negro al 30 por ciento de transparencia. Los tres primeros valores en RGBA se corresponden con valores de rojo, verde y azul. El último valor va de cero a uno en puntos decimales y establece el nivel de transparencia, con ser invisible cero y uno que es opaco.

Consejos y advertencias

• En WordPress los archivos a editar son "index.php" para la plantilla principal y "style.css" es la hoja de estilo. Existen muchos otros sistemas de blogs todos los cuales utilizan diferentes nombres de archivo y código. Consulte el manual en línea para esas plataformas.
• Las sombras no funcionan en las versiones de Internet Explorer 8 y siguientes. los visitantes de su sitio seguirán viendo la página, pero la sombra no estarán allí.