Este documento pretende:

  • Crear
    un diseño de bordes nítidos y esquinas redondeadas usando CSS,
    evitando el uso de tablas.
  • Que el código del CSS
    y el XHTML
    sea validado por la W3C y
    que además sea semánticamente lógico.
  • Que el diseño sea totalmente fluido o sea que se adapte a cualquier
    resolución del usuario.
  • Compatible con la mayoría de los navegadores.

Los
requisitos para dominar cada uno de estos pasos son los siguientes:

  • Saber
    crear un documento XHTML bien
    estructurado.
  • Saber aplicar CSS a documentos
    XHTML usando clases.

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.

Esquinas

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:

Esquina
inferior izquierda:
css
Esquina
inferior derecha:
esquinas
Esquina
superior izquierda:
esquinas
Esquina
superior derecha:
esquinas
Borde
inferior:
esquinas
Borde
superior:
esquinas
Borde
izquierdo:
esquinas
Borde
derecho:
esquinas

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>

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>

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:

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; } img.esquina_sup_izq { float:left; } img.esquina_sup_der { float:right; }

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; }

¿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.

Para
implementar esta técnica añadiremos las siguientes reglas a 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; }

¿Listo
para gran el final?

Fácil!
Con solo 4 capas, 8 imágenes de menos de 1 KB y utilizando CSS hemos cambiado radicalmente 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: