» Publicación:
30 septiembre 2011
/
Categoría:

Las nuevas propiedades para Columnas con CSS3

Cuando nos toca realizar armados de sitios webs (o páginas) con mucho contenido y no queremos hacer la lectura tan dificultosa y tampoco perder estética en un sitio, pensabamos de inmediato en columnas, al igual que lo hacen los periódicos.

Con esta idea en la cabeza, comenzaban las posibles soluciones:

– La primera era distribuir el contenido en tablas, pero las tablas no son tan buenas hoy en dia (de hecho diseñadores se “marean” tratando de entender su extenso funcionamiento).

– La segunda opción era crear los divs necesarios para distribuir la información, pero eso requiere que los divs se les aplique el CSS necesario para que se acomode como queremos. Es decir deberiamos crear 2 o 3 divs diferentes, lo cual es más trabajo, más demoroso y más peso en el archivo HTML como en el CSS.

Antes de CSS3 esas eran las dos alternativas. Lo bueno es que ya muchos navegadores aguantan esta nueva propiedad de CSS3, que son llamadas “Column-Count” y “Column-Width”. Todo es muy sencillo, tal como agregar unas pocas lineas de código en el CSS y listo. La sintaxis es fácil por ejemplo veamos lo siguiente:

Ver demo

-Column-count: 3; /* Cantidad de Columnas que deseamos */

Con esto ya estarias viendo tu información repartida en 3 columnas.

-Column-width: 260px; /* Columnas determinadas por los pixeles */

Con esto ya estarias viendo el contenido determinado por un ancho en pixeles en especifico, en este caso 260 pixeles. En este caso la cantidad de columnas que se creen estan determinadas por el espacio del DIV y del espacio que tu le otorges a las columnas.

Ahora, tenemos más opciones para personalizar todo esto. Como el espacio entre las columnas se crea con “column-gap: espacio (en px o em);”, y las barras laterales con “column:rule: numero_grosor tipo_linea color;”. ¿No esta claro? otro ejemplo:

-Column-gap: 25px; /* Espacio entre las columnas */

Este es el espacio en pixeles que se ve entre cada columna, es completamente personalizable, la idea es que tenga un margen amplio para no confundirse de columna al momento de leer el contenido.

-Column-rule: 2px solid #9c9c9c; /* Linea vertical divisoria entre columnas */

Esta propiedad es opcional, pero se ve bastante bien, crea una división bastante parecido a el “border” de css, pero entre medio de las dos columnas. Ordena aún más visualmente el texto.

Si con esto aún no te queda claro aqui explicare con una demo de esta propiedad, vamos primero con el CSS.

Ahora vamos con el HTML:

Ver demo

Importante:

Actualmente trabaja en los navegadores que trabajan con WebKit (Safari y Chrome) y Firefox desde la version 4 en adelante e Internet Explorer desde la versión 9 (en la version 8 no probé).

  • Facebook
  • Twitter
  • Delicious
  • Tumblr
  • Google Buzz
  • StumbleUpon
  • Digg
  • Technorati
  • Netvibes
  • Windows Live
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Por ahora esta entrada no contiene ningún comentario...
Se el primero en comentar está entrada en el formulario de abajo.
Escribe tú comentario
*
*
» Mensaje: