Bordes y esquinas a medida, parte II

por Søren Madsen

{Parte II del artículo Crear bordes y esquinas a medida}

La Parte I enseña cómo aplicar bordes y esquinas a medida a una compaginación hecha con CSS. La técnica funciona correctamente, siempre que el diseño utilice fondos de color plano. Pero ¿qué pasa si quieres un fondo con una trama o un gradiente? En esta segunda parte extenderemos la técnica para que puedas hacer precisamente éso.

[la imagen muestra una caja con esquinas redondeadas en un fondo con gradiente de color.]

Un problema de diseño

Hemos recibido otra petición de nuestro hipotético diseñador gráfico de la parte I. Animado por los resultados de nuestra colaboración anterior, nos adjunta un boceto de lo que quiere que incorporemos. (lo que se ve a la izquierda. Cuatro bordes redondeados contra un fondo degradado de color.)

“¿Es fácil cambiarlo, no?” pregunta.

“Facilísimo,” es nuestra respuesta inicial.

Empezaremos por recortar el nuevo boceto, y después ya entraremos en los aspectos técnicos.

Mira el paso 2.1 — el boceto recortado.

Por qué no funciona

Los estilos para nuestro intento anterior con bordes y esquina a medida eran así:

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

Esta técnica funciona colocando imágenes de fondo en los elementos que siguen uno a otro en una estructura de documento. Estos elementos están codificados en el mismo nivel de apilamiento, en el orden en que aparecen en la página.

El primer elemento que aparece se coloca “debajo” de cualquier elemento que sigue, a menos que se especifique un valor z-index que indique al navegador que se debe mostrar de otro modo.

en nuestro ejemplo, el fondo grande arriba y a la izquierda, top left se coloca dentro del primer elemento que aparece en la caja, lo que significa que nuestro <h2> y todos los elementos sucesivos con imágenes de fondo, aparecerán sobre él, y por tanto ocultarán los bordes y esquinas a la derecha y abajo de la imagen de fondo de arriba a la izquierda, top left.

Así que si queremos utilizar bordes y esquinas que requieren transparencia, como una caja con bordes redondeados que flota libremente en un gradiente de fondo, la técnica no es adecuada. Veamos lo que pasa.

Ver el paso 2.2 — nuevos gráficos aplicados al viejo CSS

Cómo hacer que funcione

El arreglo es fácil. Utilizaremos posicionamiento relativo para mover las cajas que contienen las imágenes de fondo.

[la imagen muestra una caja blanca en un fondo graduado.]

En esta ilustración, hemos remarcado el div.Article en negro sólido, y el div.Article h2 en rojo sólido para mostrar la técnica empleada. Hemos movido el bloque div.Article h2 que contiene nuestra imagen de fondo de arriba a la derecha, top right 14px a la derecha, asignándole un valor right:-14px y posicionándolo de forma relativa a su elemento parental. (Esos 14px son el ancho de la imagen de fondo de arriba a la derecha, top right.)

Simplemente aplicamos el mismo principio a todos los demás elementos que queremos desplazar, utilizando el ancho o alto de la imagen que queremos reposicionar para determinar cuánto hay que mover cada elemento.

div.Article h2 {
  background: 
  url(images/custom_corners_topright.gif)
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  position:relative;
  right:-14px;
  padding-left:0; 
/* Compensation for the 
repositioned box */
  }

div.ArticleBody {
  background:
  url(images/custom_corners_right.gif)
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  position:relative;
  right:-14px;
  padding-left:0;

  }

div.ArticleFooter {
  background:
  url(images/custom_corners_bottomleft.gif)
  bottom left no-repeat;
  position:relative;
  top:12px;
  }
	
div.ArticleFooter p {
  background:
  url(images/custom_corners_bottomright.gif)
  bottom right no-repeat;
  padding:15px;
  display:block;
  margin:-2em 0 0 0;
  position:relative;
  right:-14px;
  padding-left:0;
  }

Ver el paso 2.3 — Ya nos acercamos

Deberemos compensar los elementos resposicionados en nuestros cálculos finales para la maquetación, pero esto es lo único que queda por hacer.

El gran final

Ahora aplicaremos nuestra técnica a una compaginación más compleja. Esta vez en tres columnas con un encabezado de Owen Briggs. Hemos incluído tres hojas de estilo alternativas para los navegadores que aceptan cambio de hoja de estilo, como ( Mozilla Fire~~bird~~fox), para demostrar el drástico impacto en el diseño que pueden tener unos bordes y esquinas a medida en tu próximo proyecto.

También hemos añadido un nuevo div a la columna larga del centro y le hemos dado el nombre de clase ArticleLongContent. Empleamos este div para envolver nuestro ArticleBody si los contenidos del artículo son demasiado largos para que nuestra imagen de fondo para la parte superior izquierda, top left los pueda cubrir.

La clase contiene el estilo siguiente:

div.ArticleLongContent {
   background: url
	(../images/custom_corners_leftborder.gif)
   top left repeat-y;
  }

Ver el paso 2.4 — La técnica aplicada a una compaginación de 3 columnas y encabezado

Agradecimientos

Gracias a Inge Jørgensen y Stephen Paul por los ejemplos gráficos alternativos, Brian Alvey por dejarme abusar de su cuenta de Browsercam , y a todos los que han sugerido ideas interesantes en la discusión de la primera parte de este artículo.

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