domingo, 2 de mayo de 2010

Texto en varias columnas CSS3

Hace algún tiempo veíamos la forma de dividir un texto en dos columnas.

Cuando utilizamos unos estilos esporádicamente solemos añadirlos en la misma entrada de esa forma no recargamos la plantilla ni se hace interminable.
Cuando se trata de estilos que solemos usar de forma continúa es mucho mejor añadirlos en la plantilla. En este caso añadiríamos justo antes de ]]></b:skin> lo siguiente:

.texto-columnas {
-moz-column-count:2;
-moz-column-gap:15px;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
}

En la entrada donde vamos a añadir las columnas:
<p class="texto-columnas">Texto</p>

Un ejemplo...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also

the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Añadimos -moz- y -webkit- para que las propiedades se muestren en Firefox y Safari.
Con -moz-column-gap:15px es la distancia entre las dos columnas.

Podemos formar cualquier número de columnas simplemente aumentando el valor en -moz-column-count:2 y -webkit-column-count: 2;

.texto-columnas {
-moz-column-count:3;
-moz-column-gap:15px;
-webkit-column-count: 3;
-webkit-column-gap: 15px;
}

<p class="texto-columnas">Texto</p>

Otro ejemplo... 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text

Naturalmente el espacio juega un papel importante, no hay que abusar de ellas de lo contrario la legibilidad sería un gran probema.

El último ejemplo

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text

REFERENCIA:CSS Portal

No hay comentarios:

Publicar un comentario