Las fotos
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.
El sábado pasado fui a Ottawa por un día nada más. Llegué antes del amanecer así que me tocó ver los edificios iluminados por el sol que apenas salía. Luego fui a un par de museos y regresé a Toronto a la media noche.
Fotos
Hace mucho que no voy a Ottawa, y eso que vivo más o menos cerca. En autobús se hace uno alrededor de seis horas, en avión se hace menos pero prefiero gastarme ese dinero en comidas y chunches. Ya cuando sea viejo y decrépito entonces viajaré en avión.
Desafortunadamente nada más voy de entrada por salida porque llego el sábado por la mañana y regreso a Toronto esa misma noche. Me hubiera gustado ir más tiempo y poder quedarme en Montreal un par de días con mi prima, pero nada más para esto me alcanzaron las vacaciones.
En fin, en diciembre tengo más y a lo mejor entonces sí voy a Montreal. Mientras tanto, lo más importante de todo viaje son los preparativos, y lo más importante de los preparativos es la tecnología que lleves. En mi bolsa-portafolios metí lo siguiente:
- Una cámara Nikon D40 con tres lentes: el de 18-55mm para tomas amplias, uno de 50mm que se abre hasta f1.8 para tomar fotos en los museos, y el de 70-300mm para acercamientos.
- Una videocámara Sanyo de las chiquitas que guardan el video en una tarjeta SD, y un par de baterías de refresco (no duran nada).
- Una chirriscomputadora Asus Eee 701, ya vi donde están los Starbucks y hotspots de Ottawa, je je.
- El celulófono para mandar uno que otro twitt, foto o post desde la calle.
- Revistas, libro y mapa. También tarjetas de memoria con algunas películas, los episodios de Heroes y House que no he visto y un par sin nada por si hace falta.
Mi maleta de viaje.
Lo que me impresiona de todo esto es que tanta tecnología, entretenimiento y posibilidades quepan en una maleta tan pequeña y nada más unos 4 o 5 kg de peso, lo bastante ligera como para andar por las calles y museos sin fatigarme demasiado, y la capacidad que le dan a uno de comunicarse, documentar el viaje y aprovechar mejor el viaje.
¿Alguien más quiere compartir sus implementos tecnológicos para viajar?
Andy Rutledge escribe uno de mis blogs favoritos sobre diseño web, es una lástima que no lo haga más seguido pero es porque debe estar ocupado y con muy buena razón.
En su más reciente entrada retoma un artículo previamente aparecido en A List Apart donde habla sobre la importancia del contraste en el diseño para resaltar y jerarquizar los mensajes. Es una lectura muy recomendable.
El buenazo de Paul Boag nos remite una técnica muy interesante usada por Ed Merrit, uno de sus diseñadores en Headscape, para hacer pies de página fijos sin javascript, que se queden hasta abajo de la ventana si el contenido es corto, pero que se muestren abajo del contenido si éste es largo.
Usando las propiedades position: fixed; bottom: 0; puedes lograr que el pie de página se quede anclado a la parte inferior de la ventana, pero no se moverá con el contenido si éste es más alto que la ventana. Generalmente el problema se resuelve usando javascript: lees la altura del contenido, lo comparas contra la altura de la ventana y aplicas el posicionamiento que corresponda.
Sin embargo no siempre es conveniente usar javascript ya que puede estar deshabilitado, es una lata asegurarse que funcione en todos los navegadores y siempre es más recomendable resolver un problema de presentación usando css puro.
La técnica mostrada es puro css y dice como sigue:
html
<div id="contenedor">
<div id="contenido"></div>
<div id="pie"></div>
</div> O sea, creamos una capa que rodée al contenido y al pie.
css
*, body {margin: 0; padding: 0;}
#contenedor {display: block; position: absolute; min-height: 100%;}
#contenido {display: block; margin-bottom: 3em;}
#pie {position: absolute; display: block; bottom: 0; height: 3em } Si tienes experiencia usando css seguro que habrás pensado “¡ajá! esto no va a funcionar en IE6″ y tienes razón.
Para que funcione hay que poner:
body, #contenedor {height: 100%;}de preferencia en una hoja de estilos separada llamada mediante comentarios condicionales.
Y ahí lo tienen, eso es todo. Hay algunas consideraciones que se cubren en la página original, pero los invito a experimentar con esta técnica.