Columnas de texto con CSS3
Hoy vamos a ver una forma sencilla de formatear nuestro texto en columnas con CSS3. Es una forma muy vistosa y da un aspecto de revista o periódico. Es ideal si tenemos una publicación de este tipo.
Esta función CSS es soportada por todos los navegadores, excepto Internet Explorer en versiones anteriores a la 10. Navegadores soportados: Firefox 2 +, Chrome 4 +, Safari 3.1 + y Opera 11.1.
- Primero vamos a crear un trozo de texto, por ejemplo con esta letra de Soda Stereo y que se dividirá en dos columnas. Y en este primer ejemplo usaremos la propiedad:
column-count - En el segundo ejemplo usaremos la propiedad:
column-widthcon la cual en vez de número de columnas, especificamos el ancho de cada columna. Vamos a hacerlo con un ancho de 150px. - En el tercer ejemplo veremos la propiedad:
column-gapque nos sirve para indicar el espacio entre las columnas. - Y por último, en el cuarto ejemplo podemos usar la propiedad:
column-rulepara obtener una línea de división entre las columnas. Tal como usamos la propiedadborder
Recuerda hacer click en el botón HTML y CSS para ver el código.
Como podemos ver, es bastante sencillo obtener columnas de texto en los navegadores modernos. Si tenemos problemas con internet explorer podemos usar en nuestros proyectos algo como modernizr para que sea totalmente compatible. Si tienes más ideas para columnas de texto con CSS, compártelo en los comentarios.
