Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Crear bordes y esquinas a medida con CSS

por Søren Madsen

Todos hemos oído esta canción:

“Los sitios creados con tienden a ser cuadriculados y con esquinas rígidas. ¿Dónde están los bordes suaves?”

Respuesta: los bordes redondeados están ahí. En este artículo, mostraré com se pueden aplicar perfectamente bordes y esquinas a medida para una maquetación fluída, con contenido dinámico, utilizando código válido y con lógica semántica.

El código

En el ejemplo de código que sigue, los saltos de línea en el XHTML se han insertado para separar los párrafos de muestra:

<h2>Article header</h2>

<p>

A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>

<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>

<p>

A paragraph containing author information
</p>

Los ganchos

Si queremos control total sobre la compaginación, necesitamos asegurarnos de que tenemos elementos suficientes que podemos controlar dentro de nuestro CSS. Llamemos a estos elementos “ganchos.” Nuestro código necesita sólo algo más.

Primero, envolvamos todo el artículo en un div, y después cada sección estructural en un elemento apropiado:


<div class="Article">
  <h2>Article header</h2>

  <div class="ArticleBody">
    <p>

      A few paragraphs of article text.<br />
      A few paragraphs of article text.
      </p>

    <p>
      A few paragraphs of article text.<br />
      A few paragraphs of article text.
      </p>

    </div>
  <div class="ArticleFooter">
  <p>
    A paragraph containing author information
    </p> 
    </div>
  </div>

Si examinamos este código, veremos que nos hemos asignado al menos cinco ganchos, que es todo cuanto necesitamos para colocar gráficos a medida en cada una de las cuatro esquinas (y parte izquierda) de nuestro artículo.

Ver el paso 1código preliminar.

El diseño

Debemos decidir algunos parámetros básicos de la maqueta. Nuestro diseñador gráfico nos dió esta muestra como referencia:

[Image shows a white rectangle with
rounded corners against a solid background.]

“Quiero las esquinas y bordes que se parezcan a ésto,” dijo. También nos dijo que debíamos tener en cuenta que todos los artículos pueden tener diferentes altos y anchos, y que todavía no estaba seguro de qué tipo de fondo quería que tuvieran los artículos. De hecho, ni siquiera etaba seguro de que eran ésos los bordes que quería. “¿Podrías dejar esta parte abierta, o hacer que sea fácil de cambiar?” nos pidió.

El proceso

Queremos mantener el número de ganchos lo más bajo posible, porque si no es así deberemos dedicar un esfuerzo extra cuando empecemos a preparar las imágenes para nuestra solución, y asegurarnos que los gráficos que necesitamos son aptos para enganchar a los elementos ya presentes en el documento.

Tenemos un div que contiene el artícuo entero. Nos servirá para la esquina superior izquierda y las partes superior e izquierda. Los encabezados son elementos de bloque por defecto, y nos aprovecharemos de ello ya que se extenderán en todo el ancho de su elemento parental. Así que utilizaremos el elemento <h2> para nuestra esquina de arriba a la derecha.

Utilizaremos el pie del artículo, un div para la esquina inferior izquierda, y el párrafo contenido para la esquina inferior derecha.

El paso 1.1 muestra como recortamos el esbozo.

Nota: Obviamente, se puede utilizar cualquier elemento para engancharle los gráficos. El código de tu documento es improbable que encaje con la estructura que utilizamos en nuestro ejemplo. Puede que tengas un solo párrafo de texto al que esperas poder aplicar bordes y esquinas a medida. Puedes hacerlo fácilmente.

Como mencioné antes, todo lo que necesitas es al menos cuatro elementos estructurales. (Dependiendo de la altura de tu elelemento,puede que requieras cinco.) Si es preciso, estos elementos pueden ser no semánticos, como divs, cada uno con su propia clase, class. Recuerda que para un elemento div debe contener algo para manifestar su presencia. Ten en cuenta también que si el contenido se presta a elementos estructurales comunes como encabezados, párrafos y así sucesivamente, puedes y debes utilizar éstos en lugar de depender de código no semántico como los divs.

Los estilos

Para continuar, pasemos a los elementos de los bordes y establezcamos un ancho relativo para el div que contiene el artículo completo, para comprobar cómo van las cosas:

div.Article {
  width:35%;
  border: 1px solid red; }
div.Article h2 {
  border: 1px solid blue; }
div.ArticleBody {
  border: 1px solid black; }
div.ArticleFooter {
  border: 1px solid blue; } 
div.ArticleFooter p {
  border: 1px solid magenta; }
 

Verel paso 2comportamiento de los elementos básicos

Nada sorprendente. Sin embargo nos percatamos de los vacíos que aparecen antes y después de div class="ArticleBody". Ignorando este problema, por el momento, seguiermos y escribiremos una hoja de estilo:

body {
  background: #cbdea8;
  font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
  }
div.Article {
  background: 
	url(images/custom_corners_topleft.gif)
  top left no-repeat;
  width:35%;
  }
div.Article h2 {
  background: 
	url(images/custom_corners_topright.gif) 
  top right no-repeat;
  }
div.ArticleBody {
  background: 
	url(images/custom_corners_rightborder.gif) 
  top right repeat-y;
  }
div.ArticleFooter {
  background: 
	url(images/custom_corners_bottomleft.gif) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/custom_corners_bottomright.gif) 
  bottom right no-repeat;
  }

Ver el paso 3primer intento

No está nada mal. Realmente mejor de lo que esperábamos. Obviamente necesitamos añadir algo de espaciado a los elementos respectivos para que el layout se vea mejor — y después están esos fastidiosos vacíos que tenemos que arreglar. Los vacíos se deben a los retornos de carro insertados por nuestros párrafos, que son elementos de bloque.Podríamos evitarlos sin utilizar párrafos, y así ignorar el problema, pero por razones bien conocidas por los lectores de ALA — preferimos escribir el código de manera limpia y lógica. No es un problema de nuestros datos que seamos perezosos con el estilo.

En la primera pasada, asumimos que un salto de línea podría ser igual a 1.5em, ya que era el valor especificado en nuestro line-height. Así, nuestro primer intento fue añadir un valor de margin-top:-1.5em a ArticleBody y a ArticleFooter. Funcionó a la perfección en la mayoría de navegadores que respetan los estándares — todos excepto el que usan el 94% de los usuarios de internet de este planeta (sin nombres, por favor).

Después de pruebas, errores, cambios y repeticiones encontramos que debíamos utilizar un valor de al menos margin-top:-2em para asegurarnos de que los elementos se tocan y los vacíos se cierran:

div.Article {
  background: 
	url(images/custom_corners_topleft.gif) 
  top left no-repeat;


  width:35%;
  }
div.Article h2 {
  background: 
	url(images/custom_corners_topright.gif) 
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  }
div.ArticleBody {
  background: 
	url(images/custom_corners_rightborder.gif) 
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
div.ArticleFooter {
  background: 
	url(images/custom_corners_bottomleft.gif) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/custom_corners_bottomright.gif) 
  bottom right no-repeat;
  display:block;
  padding:15px;
  margin:-2em 0 0 0;

  }

Paso 4 parece que nos acercamos...

Compatibilidad

Si has mirado el ejemplo en Netscape 4.x, habrás notado que la página se ve en blanco. No hemos encontrado la manera de que esta técnica funcione aceptablemente en NS 4.x, así que lo que haremos es ocultar los estilos para ese navegador si no puede reconocerlas aceptablemente. NS 4.x no entiende style si lleva media="all" y nos aprovecharemos para el ejemplo siguiente. Hemos creado dos etiquetas de estilo, una con los estilos que queremos que todos los navegadores ejecuten, y otra que intentaremos ocultar de NS 4.x. Aunque nos rompe el corazón hacerlo, también hemos cambiado la especificación de tamaño de fuente, de ems a pxs. Si quieres compatibilidad hacia atrás, la tienes.

Paso 5se degrada bien en navegadores antiguos

El mundo real

“Sí, — pero queremos ver aplicaciones del mundo real, camarada,” dices. Nos hemos anticipado a eso y proporcionamos un ejemplo de la técnica aplicada a un contexto más avanzado. Hemos tomado prestado un layout puesto a prueba a fondo de Alex Robinson, y hemos aplicado nuestros estilos — y nos alegramos de hacerlo.

Nuestro primer intento desató una oleada de calamidades en IE6/Win, disparando fallos que afectaban al índice de posición z-index de nuestros elementos. Elementos completos desaparecían; los márgenes actuaban como niños que se han mantenido despiertos mucho más tarde de la hora de acostarse. Era un lío. Entonces aprendimos que un simple valor position:relative y un salto de línea bien colocado, <br />, podían arreglar todo. Mira el código en el paso 6 para investigar más.

Paso 6nuestro intento de aplicar la técnica a una maquetación completa con encabezado, columnas y pies

Limitaciones

Si has prestado atención, probablemente te das cuetna de que este ejemplo sólo funciona bien con colores de fondo sólidos. Con este método necesitamos abarcar los gráficos de la parte izquierda superior con los gráficos en la parte superior derecha. Si hiciéramos los gráficos de arriba a la derecha transparentes, el gráfico de debajo a la izquierda se mostraría. Lo mismo pasa con la parte de abajo. Y esto es ciertamente una limitación. Quizás en la parte II veremos cómo resolverlo con fondos en forma de gradiente.

Mientras, este artículo demuestra un método genérico, con compatibilidad hacia atrás y código sólido en mente, y sinceramente esperamos que inspire muchas ideas y secuelas — quizás alguna que eviten la necesidad de trabajar con fondos de color plano.

Agradecimientos

Brian Alvey por el diálogo, insistiendo en una degradación aceptable y ejemplos reales, y David Schontzler por ayudar a un chico danés a escribir textos técnicos en inglés.

Nota del editor

Mientras se preparaba este artículo, el diseñador Ryan Thrash propuso una solución casi idéntica al problema de crear cajas redondeadas con CSS basadas en un código semánticamente correcto. Thrash y Madsen propusieron su método con independencia; los dos autores reconocen la influencia de Douglas Bowman por un artículo anterior, Sliding Doors of CSS (10/2003) y Sliding Doors of CSS II (10/2003).

Independientemente, el diseñador Brian Alvey preparó antes un sistema diferente de crear bordes redondeados, que puede verse en Weblogs, Inc.

Este artículo tiene una segunda parte que te puede interesar.

El diseñador de comunicaciones danés Søren Madsen cambió de intereses hace unos años, de modo que ahora prepara sitios web para clientes, intenta reunir ideas para el suyo propio y escapa de las duras realidades de la vida tocando la batería.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]