Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
14
9

Multicolumnas con CSS3

En los últimos tiempos no se han introducido demasiadas novedades en el uso del texto con CSS, pero una de las cosas nuevas que nos permite hacer CSS3 es dividir el texto de un contenedor en varias columnas de forma fácil y automática.
Podéis ver un ejemplo más real en un trabajo para clase que creé y usé esta función: "Grandes Artistas Españoles".

Ejemplo de un artículo con varias columnas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis, lorem at dapibus laoreet, orci augue congue est, a auctor risus lectus a ante. Aliquam eu gravida ipsum. Vivamus volutpat nunc non nulla eleifend aliquam. Phasellus ac felis nisi, ut varius sapien. Quisque feugiat, dolor eget feugiat dictum, ligula nibh sagittis erat, ac lobortis augue mi eu enim. Donec rhoncus ornare ante fermentum semper. In hac habitasse platea dictumst. Suspendisse ut risus sit amet nisi bibendum rhoncus vel ac justo. Sed euismod vehicula facilisis. Pellentesque aliquet luctus nibh eu feugiat. Integer porta erat ac lorem semper placerat. Nam mauris elit, condimentum sit amet eleifend a, faucibus id leo. Ut ornare lacus at massa facilisis a dapibus enim convallis. Sed quis magna nulla.

Nullam ultrices rhoncus tellus in dictum. Suspendisse accumsan eleifend leo nec interdum. In aliquet tristique dolor, sit amet dapibus libero bibendum quis. Nulla et massa ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus mattis dictum diam convallis dictum. Aliquam dignissim hendrerit mattis. Nulla facilisi. Curabitur venenatis sollicitudin vulputate. Pellentesque vitae orci sit amet felis luctus adipiscing. Duis iaculis leo ac elit tempor quis interdum augue sollicitudin. Nunc id tortor lectus, sed molestie magna.

Podemos añadirle varios parámetros, para establecer el número de columnas, la separación entre ellas y un elemento que estará entre ambas para decorar.
Nota: este elemento necesita los prefijos -webkit- y -moz-.
Esto se consigue con los siguientes parámetros:

  • Column-count: es el número de columnas.
  • Column-gap: establecemos el espacio entre las columnas.
  • Column-rule: es la decoración que podemos poner entre las columnas (usa los parámetros de un borde: ancho, color y estilo).

Como usarlo

Para implementarlo debemos de añadirlo en un contenedor de texto, da igual la etiqueta, ya sea <p> o <div> por ejemplo.
Y el código del ejemplo del principio es el siguiente:

  1. column-count: 2;
  2. column-gap: 40px;
  3. column-rule: 1px solid #FFF;

Posicionar imágenes

Con esta función de CSS3 también podemos añadir imágenes, que se adaptarán al ancho de pantalla o que podremos flotar a ambos lados.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis, lorem at dapibus laoreet, orci augue congue est, a auctor risus lectus a ante. Aliquam eu gravida ipsum. Vivamus volutpat nunc non nulla eleifend aliquam. Phasellus ac felis nisi, ut varius sapien. Quisque feugiat, dolor eget feugiat dictum, ligula nibh sagittis erat, ac lobortis augue mi eu enim. Donec rhoncus ornare ante fermentum semper. In hac habitasse platea dictumst. Suspendisse ut risus sit amet nisi bibendum rhoncus vel ac justo. Sed euismod vehicula facilisis. Pellentesque aliquet luctus nibh eu feugiat. Integer porta erat ac lorem semper placerat. Nam mauris elit, condimentum sit amet eleifend a, faucibus id leo. Ut ornare lacus at massa facilisis a dapibus enim convallis. Sed quis magna nulla.

Nullam ultrices rhoncus tellus in dictum. Suspendisse accumsan eleifend leo nec interdum. In aliquet tristique dolor, sit amet dapibus libero bibendum quis. Nulla et massa ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus mattis dictum diam convallis dictum. Aliquam dignissim hendrerit mattis. Nulla facilisi. Curabitur venenatis sollicitudin vulputate. Pellentesque vitae orci sit amet felis luctus adipiscing. Duis iaculis leo ac elit tempor quis interdum augue sollicitudin. Nunc id tortor lectus, sed molestie magna.

Como darle un uso correcto

Ejemplo de un artículo con varias columnas.

Si tenemos un sitio donde exponemos mucha información y está estructurada por fragmentos independientes (es decir, un par de textos largos o uno solo sin estar demasiado mezclados, no como por ejemplo textos de Wikipedia) podemos añadir esta función para hacer una lectura más rápida y fácil, ya que no deberemos de leer en un espacio tan grande y puede hacer más llevadera la lectura.

Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: