Diseño de múltiples columnas (similar a una revista) con CSS3 / Diseño web

En general, la gente perderá la pista cuando lea contenido extremadamente largo. Es por eso que, en los medios impresos como revistas y periódicos, el contenido se divide en varias columnas para facilitar su lectura..

Crear una columna en la Web es una historia totalmente diferente. Es bastante dificil De hecho, no hace mucho tiempo es posible que deba dividir el contenido manualmente en algunos divs y flote hacia la derecha o hacia la izquierda, luego especifique el ancho, el relleno, el margen, los bordes, etc..

Pero, ahora las cosas están mucho más simplificadas con el Módulo Multi Columna CSS3. Como su nombre lo indica claramente, este módulo nos permite dividir el contenido en el diseño de columnas que vemos en los periódicos o revistas..

Soporte del navegador

Actualmente se admiten varias columnas en todos los navegadores (Firefox 2+, Chrome 4+, Safari 3.1+ y Opera 11.1), excepto, como se predijo, Internet Explorer, pero la próxima versión, IE10, parece haber comenzado a brindar soporte para este módulo..

Para el resto de los navegadores, para que funcione, Firefox todavía necesita el -moz- prefijo, mientras que Chrome y Safari necesitan el -webkit- prefijo. Opera no requiere ningún prefijo, así que solo podemos usar las propiedades oficiales.

Crear columna múltiple

Antes de crear las columnas, hemos preparado algunos párrafos de texto para la demostración, envueltos dentro de HTML5

etiqueta, como sigue;

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse no nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consecuat augue. //y así

… Y especifique el ancho para 600px de la hoja de estilo, eso es todo.

Ahora, vamos a empezar a crear las columnas..

En el siguiente ejemplo, dividiremos el contenido en Dos columnas con el recuento de columnas propiedad. Esta propiedad le indicará al navegador que represente el contenido en columnas por el número especificado y permitirá que el navegador decida el ancho adecuado para cada columna.

 artículo -webkit-column-count: 2; -mez-columna-cuenta: 2; recuento de columnas: 2;

Además de estar definido por el conteo, las columnas se pueden crear especificando el ancho usando el ancho de columna y dejando el navegador para decidir cuántas columnas se deben generar en su lugar.

En este ejemplo, especificamos el ancho de columna para 150px, lo que dio lugar a que el contenido se dividiera en tres columnas..

 artículo -moz-column-width: 150px; -webkit-column-width: 150px; ancho de columna: 150 px

Como se indica en la especificación. el ancho real de la columna puede ser más ancho o más estrecho que el ancho de columna especificado, dependiendo del espacio disponible. Además, si el valor de ancho no se especifica explícitamente, el “auto” se tomará como predeterminado, lo que también podría significar “sin columna”.

Brecha de columna

Brecha de columna Definir los espacios que separan cada columna. El valor de la brecha se puede indicar en em o px, pero como se indica en la especificación el valor no puede ser negativo. En el siguiente ejemplo especificamos la brecha para 30px, Así los espacios entre las columnas se ven un poco más amplios..

 artículo -webkit-column-gap: 30px; -moz-column-gap: 30px; espacio entre columnas: 30px;

Regla de columna

Si desea agregar bordes entre las columnas, puede usar el regla de columna propiedad, que funciona muy similar a la frontera propiedad. Entonces, digamos, si queremos poner un borde punteado entre la columna, podemos escribir;

 articulo -moz-column-rule: #pc punteado 1px; -webkit-column-rule: 1px punteado #ccc; columna-regla: 1px punteado #ccc;

Columna span

Esta propiedad funciona bastante similar a la colspan en mesa etiqueta. La implementación común de esta propiedad es abarcar el título del contenido en todas las columnas. Aquí hay un ejemplo.

 artículo h1 -webkit-column-span: all; columna-lapso: todos;

En el ejemplo anterior definimos la h1 para abarcar todas las columnas, y si se especifica el intervalo de columnas, 1 será tomado como el predeterminado. Desafortunadamente, esta propiedad, en el momento de escribir este artículo, solo funciona en Opera y Chrome..

Ultimas palabras

Eso es todo por ahora, hemos superado todas las cosas esenciales para crear múltiples columnas con CSS3, y como mencionamos al principio, este módulo funciona muy bien en los navegadores modernos, pero aún no funciona en Internet Explorer..

En última instancia, esperamos que ahora tenga un buen conocimiento de cómo crear columnas con CSS3 y, si tiene tiempo para experimentos, siéntase libre de compartir sus métodos y resultados en el cuadro de comentarios a continuación. Gracias por leer este post y divertirse..

Manifestación
Descargar fuente