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

Escrito por sara williams | Traducido por analia moranchel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo agregar un borde de sombra gris alrededor de un blog en CSS
Los blogs dentro de las fronteras son comunes en Internet. (Stockbyte/Stockbyte/Getty Images)

Los blogs dentro de las fronteras son comunes en Internet. A menudo tienen efectos visuales, como esquinas redondeadas, degradados y borde de sombra. Crear un borde de sombra solía tomar un montón de trabajo que involucraba hacer imágenes en Photoshop, cortarlas y escribir un código complicado para colocarlas en los bordes. Con la propiedad "box-shadow" de CSS level 3 (CSS3), puedes agregar un borde sombreado en una línea de código CSS.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo de plantilla principal de tu blog en un editor de texto o un editor de código. Encuentra las etiquetas de "<div>" o "<section>" que rodean el cuerpo de tu blog:

    <div id=”blog_wrapper”> Todo contenido de blog iría aquí... </div>

    Obtén el nombre ID de las etiquetas o agrega una como se muestra arriba.

  2. 2

    Abre la hoja de estilos para tu blog. En la parte inferior del código de la hoja de estilos, crea una nueva regla de estilo que sirva como envoltura de etiquetas por su nombre ID:

    blog_wrapper {

    }

  3. 3

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

    blog_wrapper {

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

    Al establecer los dos primeros valores, es decir, los desplazamientos izquierdo y superior, le dices al navegador que centre la sombra detrás del blog. El tercer valor representa la cantidad de desenfoque añadido a la sombra. Mayor es el número, mayor será el desenfoque.

  4. 4

    Cambia "black" ("negro") a un código de color RGBa ("Red, Green, Blue and Alpha" o "rojo, verde, azul y alfa"):

    blog_wrapper {

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

    El ejemplo anterior muestra un código de RGBa para negro con transparencia del 30 por ciento. Los tres primeros valores en RGBa corresponden con valores de rojos, verdes y azules. El último valor oscila entre cero a uno en decimales y ajusta el nivel de transparencia. El cero es invisible y el uno es opaco.

Consejos y advertencias

  • En WordPress, los archivos a editar son "index.php" para la plantilla principal y "style.css" para la hoja de estilos. Existen muchos otros sistemas de blogging que utilizan diferentes nombres y código. Consulta el manual en línea para esas plataformas.
  • Las sombras no funcionan en versiones de Internet Explorer 8 y anteriores. Los visitantes de tu sitio aún verán la página, pero la sombra no estará allí.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles