Cómo crear una plantilla con bordes sombreados en CSS

Inicié hace poco en esto del diseño web utilizando CSS; así que todavía no estoy muy empapado sobre el tema, pero de todas formas, espero que les resulte de utilidad este pequeño tip.

Ya se discutió hace un buen rato por los foros, pero no encontré documentación al repecto, por lo que aquí se las comparto, no se si sea la mejor manera pero igual, puedes sugerir mejoras.

Primero necesitamos diseñar el aspecto que queremos que tenga nuestra página (plantilla), para esto puedes utilizar el programa que gustes, siempre y cuando sepas como hacer los efectos que manejaremos en el programa que hayas elegido (que en realidad es el "Glow"), el formato no importa tampoco, eso te lo dejo a tu elección. En éste caso utilizaré Fireworks (imagen PNG).

Primero elegimos el tamaño del lienzo, es importante que elijas un valor de anchura adecuado para los usuarios que aún utilizan la resolución de (800x600), toma en cuenta lo estresante que es el scroll horizontal. Yo utlizaré un lienzo de 790x500 px.

A continuación, echamos a volar nuestra imaginación y plasmamos una plantilla para nuestra página, que consta de un encabezado, un cuerpo y un pie de página (si no se te ocurre nada en estos momentos has lo que yo, recuadros coloridos).



Al recuado blanco que formará el body puedes aplicarle esquinas redondeadas para una mejor apariencia. Ahora le agregamos el efecto de Glow; para los que decidieron seguir este tuto con Fireworks, lo explico a continuación:

Seleccionas el rectángulo y das un clic sobre el icono de "+" junto a la etiqueta "efect", te posas sobre "Shadow and Glow" y eliges "Glow".



aparecerá un pequeño recuadro de donde puedes elegir los valores de dispersión, color y transparencia. He aquí los que elegí yo.

Una ves elegidos los valores deseados, procedemos a cortar la imagen. Tomemos en cuenta las tres divisiones que mencioné antes: encabezado, cuerpo y pie.



entonces cortamos nuestra imagen en tres y guardamos cada una de las partes en archivos diferentes. chécate el ejemplo.



Imagen guardada como "header.png".



Ésta la guardé como "body.png".



Y por último, el pie de página ("foot.png").

Ahora nos vamos a nuestro CSS y agregamos lo que sigue:

Código :

 *
   {
      margin: 0;
      padding: 0;/* para Firefox */
   }
body
   {
      text-align: center; /* para centrar los DIV's*/
   }
div#encabezado
   {
      margin: 0 auto 0 auto; /* centrar el DIV */
      width: 790px; /* ancho del DIV */
      height: 142px;/* Especificamos el alto resultante después de haber cortado la imagen (header.png)*/ 
      background-image: url("header.png");
      background-repeat: no-repeat; /* Evitamos que se repita la visualización de la imagen*/
   }
div#cuerpo
   {
      margin: 0 auto 0 auto;
      width: 790px;
      background-image: url("body.png");
      background-repeat: repeat-y; /* Especificamos que se repita de forma vertical */
   }
div#pie
   {
      margin: 0 auto 0 auto;
      width: 790px;
      height: 54px; /* alto de la imagen (foot.png) después de haberla cortado */
      background-image: url("foot.png");
      background-repeat: no-repeat; 
   }

Lo lógico es que nuestra plantilla se encuentre centrada en el documento, es por esa razón que agrego la especificación para el body (en caso de IE). Para entenderlo mejor, checa el tutorial de cómo centrar DIV's horizontales.

Como hemos especificado que la imagen central se repita sólo verticalmente, podrás agregar toda la información que desees y dará la apariencia de que la plantilla se va estirando, ¿Ahora entindes por qué dejamos las esquinas redondeadas superiores en la imagen del header?.

Hemos terminado, fácil no? . Puedes descargar aqui el ejemplo funcionando

Ahora intenta jugar con los colores, si deseas un color diferente para el área vacía alrededor de la plantilla, cambia el color del lienzo de la imagen y aplica el mismo valor hexadecimal para el body. Y como un consejo, en ocasiones, si seleccionas todo el contenido de una página web, podrás descubrir algunos secretos de su diseño, y si aún así no se te prende el foco, pregúntale a San Google.

 

Tweet