Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 VIII

Múltiples columnas

Texto en varias columnas

Una de las novedades de CSS3 es poder distribuir contenido (texto, imágenes, etc.) de un elemento en varias columnas. Aunque el texto y demás elementos de la caja aparezcan distribuidos en columnas, no se crean nuevas cajas para las columnas. Por lo tanto todas las propiedades aplicadas a la caja, se aplican a todas las columnas.

Al crear varias columnas en una caja, todas tienen la misma anchura, de manera que el espacio se distribuye de manera uniforme entre las diferentes columnas. El texto intenta distribuirse de manera uniforme también en altura, a veces esto no es posible, (cuando se incluyen imágenes, por ejemplo), en este caso la altura será la de la columna más alta, dejando las demás en el final un espacio en blanco para completarla.

Propiedades para distribuir columnas

Para poder distribuir un elemento en columnas CSS3 tiene dos nuevas propiedades: column-width y column-count

Propiedad column-width

La propiedad column-width distribuye el contenido de un elemento en columnas de la anchura que se le indica en su valor. El valor es por tanto una medida. Sin embargo se intentará ajustar el número de columnas a la medida dada para que todas las columnas sean iguales, redondeando el número hacia arriba siempre que sea posible.

#capa1 {column-width: 200px;}

Supongamos que en este ejemplo el elemento contenedor tiene una anchura de 500px, se crearían dos columnas con una anchura algo máyor que la indicada, (250px) para ajustar las columnas al espacio disponible.

Propiedad column-count

La propiedad column-count distribuye el contenido del elemento en el número de columnas indicado. Su valor debe ser un número entero positivo distinto de 0.

#capa1 { column-count: 4;}

El ejemplo anterior distribuye el contenido del elemento en cuatro columnas. Las columnas ajustan su anchura de manera uniforme a la anchura del elemento.

Tanto esta propiedad como la anterior tambien admiten como valor la palabra clave "auto" que indica que la propiedad se queda igual que estaba.

La propiedad columns

Como una propiedad tipo "shorthand" que agrupa las dos anteriores está la propiedad columns, en la cual podemos poner como valor una medida, el número de columnas, o los dos.

#capa1 { columns: 200px 4; }

Cuando están los dos la medida tiene prioridad sobre el número.

Separación de columnas

Para poder ver bien un texto en columnas, debemos dejar algo de espacio entre ellas; a veces, además del espacio de separación hay también una línea entre ellas que las separa. CSS3 tiene varias propiedades para marcar todo esto.

Espacio entre columnas

La propiedad coumn-gap indica la distancia de separación entre columnas. Su valor es una medida que indica la distancia de separacion o la palabra clave normal. En este último caso el espacio depende del valor estándar del navegador, aunque suele ser de 1em.

#capa1 { column-gap: 4em; }

Línea de separación entre columnas

Además del espacio entre columnas podemos poner una línea de separación entre ellas. Las propiedades column-rules definen la línea de separacion. Estas propiedades son:

Estas tres propiedades pueden reunirse en una sóla propiedad de tipo "shorthand", column-rules.

column-rules: <‘column-rule-width’> || <‘column-rule-style’> || [ <‘column-rule-color’> | transparent ]

Como valores ponemos la medida, el estilo y el color. La palabra clave transparent es el valor predeterminado, y es la ausencia de línea.

Compatibilidad con navegadores.

Sólamente Opera en su última version (11.5) ha compatibilizado las propiedades anteriores en su forma estándar.

El navegador Firefox admite estas propiedades pero de forma experimiental, para su funcionamiento deben llevar el prefijo -moz- delante.

Safari y Chrome tambien admiten las propiedades de forma experimental, en este caso deben llevar delante el prefijo -webkit-

Internet Explorer no admite estas propiedades, esperemos que pueda adoptarlas en versiones futuras.

Veamos ahora cómo será un ejemplo de texto con columnas que funcione en Opera, Firefox, Safari y Chrome. Debemos por tanto reescribir las propiedades para cada navegador. El texto del siguiente ejemplo, escrito dentro de un <div id="capa1"> ... </div> lleva asociado el siguiente código CSS:


#capa1 { text-align: justify; padding: 10px; width: 600px; background-color: silver;
     column-count: 3; column-gap: 3em; column-rules: 2px solid olive;
     -moz-column-count: 3; -moz-column-gap: 2em; -moz-column-rule: 2px solid olive; 
     -webkit-column-count: 3; -webkit-column-gap: 3em; -webkit-column-rules: 2px solid olive;
     }

Y el texto lo veremos de la siguiente manera (debes usar Opera, Firefox, Safari o Chrome para verlo bien):


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit.

Saltos de columna

Podemos controlar en qué punto pasamos de una columna a otra, provocando así un salto de columna, aunque ésta no se haya completado del todo. Para ello se supone que dentro del elemento contenedor hay varios elementos para distribuir en columnas (párrafos, títulos, imágenes, etc.). El salto de columna se producirá siempre entre dos de estos elementos, para ello marcaremos un elemento y le diremos si queremos el salto antes o después de él:

Estas propiedades sólo funcionan en el navegador Opera. El resto de navegadores no han adoptado todavía estas propiedades.

Si quieres ver un ejemplo de un elemento con su código donde se aplican estas propiedades, lo tienes en el siguiente enlace:

Saltos de columna (sólo en Opera)


Expandir un elemento en todas las columnas.

Esto permite que un elemento se expanda a lo largo del resto de las columnas, de manera que queda fuera del flujo de las columnas. Por ejemplo, tenemos un texto compuesto por títulos y párrafos. Si expandimos cada título a lo largo de todas las columnas, tendremos que los títulos ocuparán todo el ancho del contenedor, y cada uno de los párrafos se distribuirá en columnas, debajo de su título.

La propiedad column-span permite hacer esto. Sus posibles valores son none y all El valor none es el valor por defecto y deja el elemento en la misma columna, no cambia el valor inicial. El valor all hace que el elemento deje de formar parte de la columna y ocupe todo el ancho del contenedor, de forma que el elemento siguiente vuelve a distribuirse en columnas.

column-span: all;

Esta propiedad funciona de forma estándar en el navegador Opera, y de forma experimental en Safari y Chrome (con el prefijo -webkit-). Para ver un ejemplo de un elemento y su código con esta propiedad, pulsa en el siguiente enlace.

Expandir elementos entre columnas






En la siguiente página veremos nuevas propiedades de CSS3 para los textos.

Texto en CSS3



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo