Crear columnas de texto sólo con CSS3 – Money ~ Cosas Para Blogueros

Anteriormente sólo era posible integrar columnas de texto mediante párrafos que tuviesen la propiedad float y un ancho definido. Ahora es posible crear estas columnas de forma sencilla sólo con CSS3, es compatible con todos los navegadores,exceptuando Internet Explorer.

Este es un efecto especialmente utilizado en blogs de literatura, noticias o similares.
Puedes ver los siguientes demos para comprobar su funcionalidad:

Ejemplo 2 columnas:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Ejemplo 3 columnas:

El Tutorial:

Explicaré 2 formas de conseguir este efecto, y ambas las trataré de explicar lo más sencillo posible. Una consiste en aplicar el efecto en todas las entradas y la otra forma en aplicarlo sólo cuando se requiera.

Método 1: Aplicarlo de forma manual en las entradas (Recomendado):

Este método consiste en aplicar el efecto mediante CSS3 y HTML. Para ello es necesario ir a "Diseño | Edición HTML" y buscar la siguiente zona:

/b:skin

Sobre ésta debemos pegar el siguiente código:

.multicolumnas-2 /*Para 2 columnas*/{
padding:10px;
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
border:1px dotted #c0c0c0;
}

.multicolumnas-3/*Para 3 columnas*/
{
padding:10px;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
border:1px dotted #c0c0c0;
}

.multicolumnas-4 /*Para 4 columnas*/
{
padding:10px;
-moz-column-count:4;
-webkit-column-count:4;
column-count:4;
border:1px dotted #c0c0c0;
}

Guarda la plantilla y listo.

Ahora cada vez que quieras incluir este efecto deberás hacerlo mediante el siguiente código:

div class="multicolumnas-X"
Inserta tu texto acá
/div

En donde X indica el número de columnas que crearás.

Importante:

Si deseas añadir una configuración de más columnas hazlo mediante el siguiente código:

.multicolumnas-X /*Para X columnas*/
{
padding:10px;
-moz-column-count:X;
-webkit-column-count:X;
column-count:X;
border:1px dotted #c0c0c0;
}

Método 2: Aplicar el efecto en las entradas de manera automática (No recomendado):

No recomiendo este método ya que es posible que tengas que modificar las imágenes y el orden de éstas, o el contenido que insertes, ya sea vídeos, flash, u otro contenido se verá mal. Si eres de los que sólo escribe texto este método puede funcionar mejor.

En "Diseño | Edición HTML" deberás buscar la siguiente zona: