Archivo de la etiqueta: snippets

Flexible Box

A veces al maquetar, necesito hacer cajas que sean flexibles tanto en alto como en ancho, y que tengan bordes redondeados y/o sombreados.

Flexible Box

Lo interesante es conseguirlo utilizando el menor número de etiquetas XHTML posible, un poquito de codigo CSS y solo una imagen para el fondo/bordes, así que hace unos días me preparé un “code snippet” para reutilizar en mis proyectos.

Existen un par de trucos para conseguir lo que quiero:

  1. Una imagen de lo que sería una caja, a un tamaño lo suficientemente grande como para que nunca se quede pequeña en ancho y alto. Recomiendo que sea un PNG, porque por muy grandes que sean sus dimensiones, el tamaño del archivo apenas aumenta.
  2. Utilizar semanticamente las etiquetas XHTML, para no tener DIVs vacios y cosas así.

Aquí teneis el código para su descarga: flexible-box.zip

Solo lo he testeado en Internet Explorer 6 y en Firefox 2.x, así que no puedo asegurar que se vea del todo bien en otros navegadores. Pero en todo caso, para lograrlo sería cuestión de añadirle algunos “hacks”. Cuando tenga un rato lo comprobaré para darle mayor compatibilidad.

Anuncios