Los requisitos para dominar cada uno de estos pasos son los siguientes:
Primero que nada vamos a crear la imagen inicial de nuestro borde y sus esquinas. Debes saber manejar algún programa de diseño como Adobe Photoshop, Macromedia Fireworks o Paint Shop Pro. La siguiente imagen te dará una idea más amplia de este proceso. Además la puedas usar como ejemplo para que practiques este tutorial.
Antes de continuar con el código necesitamos cortar la imagen. Parte del efecto se debe a la forma en que cortamos la imagen y como se posicionan estos pedazos utilizando cierto código de CSS. La imagen debe ser cortada en 8 partes:
Ya tenemos todo lo necesario para crear el efecto. Veamos ahora el código al cual le vamos aplicar la decoración.
Código XHTML:
<h1>Título del artículo.</h1>
<p>Párrafo de prueba #1. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Párrafo de prueba #2. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Párrafo de prueba #3. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Pie del artículo
<br />
Autor, fecha, referencias, etc.</p>
Para lograr lo que queremos necesitamos añadir unas capas o "layers" usando la etiqueta <div>
. Estas capas irán alrededor del código XHTML.
Código XHTML:
<div id="top"></div>
<div id="content">
<div id="box_control">
<h1>Título del artículo.</h1>
<p>Párrafo de prueba #1. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo.</p>
<p>Párrafo de prueba #2. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo.</p>
<p>Párrafo de prueba #3. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Pie del artículo<br />Autor, fecha, referencias, etc.</p>
</div>
</div>
<div id="bottom"></div>
Ver el código en acción con bordes en colores para distinguir cada capa.
Hasta ahora no hemos hecho nada complicado. Hemos creado un documento en XHTML muy bien estructurado. Tan fácil que hasta un niño pudiera hacerlo. El próximo paso será colocar las imágenes que hará esquina dentro de las capas que hemos creado. Empecemos por la parte superior.
Código XHTML:
<div id="top">
<img src="top_left.gif" alt="Esquina superior izquierda" />
<img src="top_right.gif" alt="Esquina superior derecha" />
</div>
Ahora añadiremos las imágenes correspondientes a la capa inferior.
<div id="bottom">
<img src="btm_left.gif" alt="Esquina fondo izquierda" />
<img src="btm_right.gif" alt="Esquina fondo derecha" />
</div>
Hasta ahora esto es lo que tenemos.
Llegó el momento de aplicar el lenguaje de CSS a nuestro documento. Vamos a continuar aplicando ciertas reglas de CSS a nuestra capa superior.
Código XHTML:
<div id="top" class="top">
<img src="top_left.gif" alt="Esquina superior izquierda" class="esquina_sup_izq" />
<img src="top_right.gif" alt="Esquina superior derecha" class="esquina_sup_der" />
</div>
Código CSS:
img.esquina_sup_izq { float:left; } img.esquina_sup_der { float:right; }
div.top {
/* La altura es de 28 píxeles ya que ese es el espacio que ocupa nuestra imagen de esquina. */
height:28px;
background-image:url(top_line.gif);
background-repeat: repeat-x;
}
Ahora prácticamente escribiremos las mismas reglas para la capa inferior solo que cambiaremos el nombre de las clases. Además en la regla background-image:url(btm_line.gif);
debemos colocar la imagen correcta.
Código XHTML:
<div id="bottom" class="bottom">
<img src="top_left.gif" alt="Esquina inferior izquierda" class="esquina_inf_izq" />
<img src="top_right.gif" alt="Esquina inferior derecha" class="esquina_inf_der" />
</div>
Código CSS:
div.bottom {
height:28px;
background-image:url(btm_line.gif);
background-repeat: repeat-x; }
img.esquina_inf_izq { float:left; }
img.esquina_inf_der { float:right; }
Aaaaaaaaah! Ya esta tomando forma nuestra pequeña obra de arte. En menos de lo que te imaginas habremos terminado todo. Es bueno que entendamos todo lo que hemos hecho hasta ahora. Usando background-image:url(fuente_de_origen);
hemos invocado la imagen que forman el borde superior e inferior. Con background-repeat:repeat-x;
nos aseguramos que la imagen se repita rellenando todo el espacio necesario para lograr el efecto de una imagen completa. Y con la regla float:xxx;
obligamos a que cada imagen ocupe su esquina pertinente.
En siguiente paso codificaremos las reglas que darán forma a nuestro contenido.
Código XHTML:
<div id="content" class="content">
Código CSS:
div.content {
background-image:url(left_line.gif);
background-repeat:repeat-y; }
Ver como ya está casi terminado.
¿Para que es el Box Control? (<div id="boxcontrol">
)
Esta capa nos ayudara a tener más control de la posición de nuestro contenido. Además podremos manejar fácilmente los atributos como el padding o el border que muchas veces nos causan dolor de cabeza cuando queremos formatear el contenido. Y para dejarte con la curiosidad si utilizas selectores contextuales en tu CSS las posibilidades de controlar la presentación visual del contenido son innumerables. Para efectos de este tutorial la función principal será la de crear el efecto del borde a la derecha.
Código XHTML:
<div id="boxcontrol" class="boxcontrol">
Código CSS:
div.boxcontrol {
padding:0 5% 0 5%;
background-image:url(right_line.gif);
background-position:right;
background-repeat:repeat-y; }
¿Pero que pasó? ¿Y esos odiosos espacios en blanco? Aún tenemos que hacer algunos retoques para que tengamos todo funcionando perfectamente. Estos espacios en blanco a un conflicto que causan las etiquetas de tipo block como h1, h2, h3, p, etc., con algunos atributos dentro del Box Model de CSS. Explicar porque ocurre esto sería escribir otro artículo. En este tutorial nos enfocaremos en como solucionar lo del espacio en blanco.
Para que todo funcione como Dios manda añadiremos esta regla a la capa superior.
Código CSS:
div.top {
height:28px;
background-image:url(top_line.gif);
background-repeat: repeat-x;
margin:2em 0 0 0;}
Ahora editamos la etiqueta de encabezado. Así evitamos la horrible línea blanca superior.
h1 {
margin:0;
/* Solo para decoración, no tiene nada que ver con la solución al espacio en blanco */
border-bottom:1px dashed #996;}
Para desaparecer la línea inferior añadiremos la siguiente clase, class="autor"
, a la etiqueta <p>
, donde se encuentra la información del autor.
Código XHTML:
<p class="autor">Pie del artículo<br />Autor, fecha, referencias, etc.</p>
Código CSS:
p.autor {
margin:-.1em 0 0 0;
/* Solo para decoración no tiene nada que ver con la solución al espacio en blanco */
padding-right:8px;
border-right:1px dashed #996;
text-align:right;}
Como último detalle debemos colorear el area del contenido con el color de fondo de nuestra imagen.
Código CSS:
div.content {
background-image:url(left_line.gif);
background-repeat:repeat-y;
background-color: #a9d974; }
Nota: El Internet Explorer 5 ó 5.5 no posiciona correctamente las imágenes de las esquinas. Para lograr la compatibilidad con IE 5 ó IE 5.5 necesitamos añadir unas cuantas reglas a nuestra hoja de estilo. Estas reglas forman parte del Simplified Box Model Hack para IE. El SBMH es una técnica muy utilizada para corregir la implementación incorrecta del CSS en IE. Hablar sobre esto nos tomaría otro artículo así que por ahora solo te mostraré donde utilizar esta técnica en nuestra hoja de estilo.
Código CSS:
/* Simplified box model hack para posicionar correctamente las imagenes de esquina. */
* html img.esquina_sup_izq, * html img.esquina_inf_izq { \margin-left:-.2em; ma\rgin-left:0; }
img.esquina_inf_der, img.esquina_sup_der { margin-left:.2em; }
Fácil! Con solo 4 capas, 8 imágenes de menos de 1 KB y utilizando CSS hemos cambiado radicalmente la la presentación visual del contenido de nuestro ejemplo. Ten la libertad de experimentar con este código y de crear tus propios efectos. Como mencioné arriba, si aprendemos a manejar correctamente las hojas de estilo, las formas de expresar la presentación visual del contenido de nuestros documentos webs son innumerables.
Archivo zip (Incluye el documento XHTML, la hoja de estilo (CSS) y los gráficos utilizados.)
Referencias:
The css-discuss Wiki
World Wide Web Consortium
Modified SBMH (Simplified Box Model Hack)