Los fondos y gradientes de CSS3 en múltiples navegadores

CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms.Multiple Backgrounds and CSS Gradients – Snook.ca

Jonatan Snook comparte sus hallazgos sobre como hacer funcionar los fondos múltiples y gradientes de CSS3 en múltiples navegadores. Si quieres empezar a experimentar este post es fundamental.

Sitios para generar fondos

Here are the solutions for our background woes! Take a look at these Web sites that offer you the ability to quickly make your own. Or you can use one of the seamless repeating images available on the other sites, all polished and ready for your web needs.10 Quick & Dirty Tricks for Easy Custom Web Backgrounds | Graphic Design | Tutorial Blog

Una colección de 10 sitios si te hace falta un fondo atractivo y no tienes mucho tiempo o no eres muy bueno haciéndolos por tu cuenta.

Como ponerle marcos decorativos a las capas

Uno de los retos que surgen cuando se hacen páginas web por medio de capas y css es como poner un marco decorativo o esquinas redondeadas. El reto es mayor cuando se está haciendo un diseño flexible o líquido y el tamaño de la ventana deba ser variable, ajustándose al tamaño de la letra o al de la ventana del visitante.

La manera de hacer eso es mediante el uso creativo de las posiciones absolutas de diferentes capas y sus fondos. Por ejemplo, teniendo el siguiente código:

      <div class="cajabonita">
        <div class="sup-izq"></div>
        <div class="sup-der"></div>

        <div class="caja-externa">
          <div class="caja-interna">
          <p>Por fin, aquí va el contenido de nuestra caja. El ancho de la caja debe variar con el ancho de la ventana del navegador.</p>
          </div>
        </div>

        <div class="inf"></div>
        <div class="inf-izq"></div>
        <div class="inf-der"></div>
      </div>

Hemos creado varias capas dentro de nuestra caja para poder colocar los diferentes segmentos de nuestro marco. Para colocar todo como se debe ponemos el css:

    .cajabonita {
      width: 50%;
      margin: 0 auto;
      color: #000;
      background: url('sup.gif') top repeat-x #fff;
      position: relative;
      border: 0 none #fff;
    }
    .sup-izq {
      width: 80px;
      height: 80px;
      background: url('sup-izq.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; left: 0;
    }
    .sup-der {
      width: 80px;
      height: 80px;
      background: url('sup-der.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; right: 0;
    }
    .caja-externa {
      width: 100%;
      padding: 80px 0;
      background: url('izq.gif') left repeat-y transparent;
    }
    .caja-interna {
      margin-left: 80px;
      padding-right: 80px;
      background: url('der.gif') right repeat-y transparent;

    }
    .inf {
      width: 100%;
      height: 80px;
      background: url('inf.gif') bottom repeat-x #fff;
      position: absolute;
      bottom: 0;
    }
    .inf-izq {
      width: 80px;
      height: 80px;
      background: url('inf-izq.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; left: 0;
    }
    .inf-der {
      width: 80px;
      height: 80px;
      background: url('inf-der.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; right: 0;
    }

Como ves primero posicionamos nuestra caja principal de manera relativa para después poder posicionar las esquinas de manera absoluta dentro de esta caja. Como tenemos un fondo para el lado izquierdo y otro para el lado derecho necesitamos poner dos cajas, una encima de otra. Las imágenes de las esquinas deben tener el mismo alto que las imágenes de los bordes superior e inferior y el mismo ancho que las imágenes de la izquierda y derecha. Mira el ejemplo terminado.

Este código funciona en Firefox, Safari, Opera e IE7. El único que tiene un problema menor es IE6 que pone los fondos inferiores un pixel arriba de donde debería. Esto tal vez se pueda arreglar mediante comentarios condicionales o con una elección de colores que haga que no se note.

Ten en cuenta que esta puede no ser la mejor forma de lograr este efecto ya que estamos añadiendo varias capas sin contenido y sin ningún significado particular dentro de la página. Una mejor solución podría ser añadir las capas adicionales mediante javascript para que nuestro código html quede más legible.

CSS3 incluye varias nuevas propiedades para bordes y fondos múltiples que pueden hacer que esta técnica quede inútil, pero mientras tanto te puede ayudar en algo.

Actualización

En Foros del Web Mikmoro me señala un par de técnicas más. La primera usa solo una imagen y la segunda requiere de cuatro. El primer caso ingeniosamente acomoda las capas de las esquinas y usa las propiedades para posicionar el fondo (bottom left, top left, etc.) según se requiera para cada esquina. En el segundo ejemplo cada esquina tiene su fondo.

Obviamente es mejor usar el menor número de imágenes, clases y capas en el código, reducirlos lo más posible para facilitar su manejo y mantenimiento. El único inconveniente con las técnicas de Mikel es que, aunque puedes hacer las capas flexibles o líquidas, el tamaño máximo que pueden tener es algo más que el del alto y ancho de las imágenes de fondo. Más allá se rompe el efecto del borde.

Esto no necesariamente es importante y si haces las imágenes de buen tamaño (un borde de colores comunes en gif no debe pesar demasiado) el efecto funcionará para cualquier capa de dimensiones prácticas. Esto será lo preferible en la mayoría de los casos.

Por otro lado, si necesitas que el efecto rodée enormes áreas sin tener que preocuparte por el alto o ancho que puedan llegar a tomar o por hacer imágenes grandes, entonces la técnica de aquí será mejor.