Texto en columnas con CSS3

En este tutorial les voy a enseñar a trabajar con columnas de texto en CSS3(algo así como las de un periódico) , que les podrá ahorrar varios problemas y dolores de cabeza que podrían tener a futuro. Es bastante simple, y no necesitan saber mucho para poder trabajar con esta función. Ahora, sin más preámbulos, vamos con el tutorial.

Antes que nada, les voy a dejar un par de ejemplos de sitios web donde usan o deberían usar las funciones que les voy a mostrar, para que se vayan armando una idea de cómo se usa, cuándo se usa y para qué sirve.

Ejemplos de columnas en CSS3

Este ejemplo es de un sitio web cualquiera, donde en su portada tienen una sección de noticias. Entonces para ahorrar espacio tienen 2 columnas con noticias. Es importante notar que no sólo sirve para texto, si no también para elementos (como <div>, <span>, <li>, etc).


En este ejemplo se muestra claramente el uso de varias columnas con el texto genérico Lorem Ipsum. Este es un ejemplo claro de cómo quedaría una web con un sistema de multicolumnas vía CSS3.

Cómo hacer columnas de texto en CSS3

Luego de que hayan visto cómo se usa el sistema de columnas en disitintas webs y las distintas formas en las que pueden trabajar esta función, ahora vamos al código en bruto.

Primero que nada, estamos en CSS3, y nuestros navegadores todavía no aceptan varias propiedades de este lenguaje, así que para que las reconozca, tenemos que agregar los prefijos -moz- (en caso de Firefox) y -webkit- (en caso de Google Chrome y todos los navegadores que usen webkit). Por un tema de responsabilidad al diseño, debes poner los dos prefijos por respeto al usuario, ya que no todos usan Google Chorme, o no todos usan Firefox.

Luego de haber aclarado el tema de poner los prefijos de compatibilidad, ahora vamos a ver las propiedades que se usan para el uso de columnas en CSS3.

Las propiedades para generar columnas de texto son:

Código :

column-count: número de columnas ;
column-gap: espacio entre columnas ;
column-rule: decoración de las columnas ;

En donde:

• column-count: es la cantidad de columnas que vas a usar.
  
• column-gap: es la cantidad de espacio que dejas entre las columnas.
  
• column-rule: es la decoración que vas a usar para las columnas (se usa la misma semántica que para la decoración de un border {} ).
  

Un ejemplo de uso sería:

Código :

#columna {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #fff ;
}

¡Recuerden poner los prefijos!

El resultado del ejemplo anterior sería el siguiente:


Y claro, el HTML (no se si es necesario ponerlo, pero si a alguno le sirve se lo dejo):

Código :

<div id ="columna">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed orci enim, at vulputate nulla. Quisque vehicula tincidunt eros sed rutrum. Aenean molestie feugiat dolor, ut aliquet tortor mollis sit amet. Morbi volutpat, odio sit amet scelerisque venenatis, eros turpis tristique nisi, sed feugiat massa ligula sed magna. Praesent sed sem odio. In vitae mi risus, a cursus justo. Quisque in lectus massa, eget porttitor velit. Sed feugiat libero at mi rutrum feugiat. Nulla felis justo, accumsan ut accumsan nec, consequat nec est.

      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Praesent quis nisi leo, vel accumsan turpis. Pellentesque a orci a purus tincidunt scelerisque. Ut mattis leo quis mauris lobortis lobortis. Mauris dolor purus, placerat et cursus ut, molestie ac diam. In eleifend porttitor libero eget fringilla. Cras velit metus, feugiat sit amet tempus eu, venenatis in lacus. Nunc vitae nunc sem. Sed non leo nunc. Nam metus velit, posuere nec tristique vel, viverra in lacus. Aliquam erat volutpat. </p>

   </div>

Recuerden que ahí falta toda la estructura base del HTML, ese solo sería el div y pueden poner imágenes vía <img src =""/> y quedan auto posicionadas, no les debería dar problemas.

Bueno comunidad, eso ha sido todo lo que les traigo por hoy, es un tutorial simple, pero espero seguir aportando a la comunidad, a medida que pueda. Si les interesa lo que escribo, me pueden seguir en Twitter, que siempre trato de aportar cosas respecto al mundo web, informática, tecnología y todos esos temas que a muchos nos apasiona: @semasad. También en Taringa si tienes cuenta: @Shai.

Eso sería todo, y gracias por llegar hasta abajo.

Cualquier duda o consulta me la pueden preguntar de cualquier modo que se les ocurra (mensaje, comentario, redes sociales, etc) siempre estoy abierto a responder todo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.