Blog personal de Helmer Galvis

Columnas de texto con CSS3

Artículo publicado el lunes, enero 14, 2013. Guardado en la categoría: Diseño web, Tutoriales

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-width con 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-gap que nos sirve para indicar el espacio entre las columnas.
  • Y por último, en el cuarto ejemplo podemos usar la propiedad: column-rule para obtener una línea de división entre las columnas. Tal como usamos la propiedad border

Recuerda hacer click en el botón HTML y CSS para ver el código.

Check out this Pen!

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.