Psychotik

solucionando marrones desde 2003

Edición de textos: columnas con CSS3

Pertenece a  Destacados, Tips  el 29 Octubre
Columnas en css3

La mayoría de navegadores actuales ya soportan la propiedad columns: para que nuestros textos puedan aparecer con un formato más editorial, pudiendo transformar párrafos o textos de corrido (entre otros elementos), en texto columnado, consiguiendo un formato más de periódico o revista, según para que proyectos nos puede aportar un toque distinto a nuestros contenidos.

Sus propiedades son:

column-count
Número de columnas.
column-gap
Espacio entre columnas, en px o em.
column-width
Ancho óptimo de las columnas, no se suele utilizar por qué por defecto la propiedad column: ya ajusta los anchos proporcionalmente. Acepta auto o initial que no crea ninguna columna, deja el texto de corrido, o px si queremos ajustar los anchos al gusto.
column-rule
Sirve para darle estilo a la linea que separa las columnas, por defecto invisible, utiliza las mismas propiedades que border.
column-span
Permite que los contenidos se repartan en las columnas, sus valores son 1 o initial como valores por defecto ocupando el ancho de la primera columna y all para que ocupe el ancho de las columnas, se suele utilizar a modo de titular o entradilla y actualmente NO funciona en Firefox.
column-fill:
Como se “llenan” los contenidos en cada columna, acepta balance o initial para ajustar el contenido proporcional a todas las columnas y auto, donde cada columna, dependiendo del contenido, puede tener un ancho diferente.

Un ejemplo

Código HTML:
‹div class="columns"›
   ‹h1 class="titcolumns"›Un titular que ocupa todo el ancho de las columnas‹/h1›
   ‹p>Lorem ipsum dolor sit amet... no lo pongo entero para no provocar tendinitis de tanto scroll...‹/p›
‹/div›

Código CSS:
/* Vamos a generar un texto dividido en 4 columnas, con una pequeña separación y lineas de separación visibles, acordaros de añadir los prefijos -webkit- y -moz- */
.columns{
   column-count:4;
   column-gap:20px;
   column-rule:1px dashed #c0c0c0;
}
/* Le decimos que la imagen que hemos metido se nos adapte al contenido */
.columns img{
   float:left;
   width:100%;
   height:auto;
   margin-bottom:5px;
}
/* Creamos los estilos para el titular con "column-span" para que ocupe el 100% del ancho */
.titcolumns{
   display:block;
   color:#CE7E00;
   font-weight:bold;
   font-size:1.1em;
   margin-bottom:8px;
   padding-bottom:3px;
   border-bottom:1px dashed #c0c0c0;
   column-span:all;
}
/* Recordad que se pueden abreviar las propiedades "column-count" y "column-width" utilizando solos "columns" */
columns: 4 200px;

Resultado:

Un titular que ocupa todo el ancho de las columnas (menos en Firefox que no funciona)

img-generica Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent quam lacus, tempus euismod, dignissim a, vulputate et, urna. Integer mollis. Fusce leo. In et metus. Cras fringilla, quam in fringilla tincidunt, libero tellus aliquam tortor, eget euismod nisl mi quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ut nisi. Nunc neque metus, ultrices vel, malesuada vitae, lacinia vitae, erat. Phasellus metus pede, molestie ut, dignissim eu, semper eget, purus. Pellentesque vitae dui congue ligula eleifend interdum. Vestibulum vestibulum libero vitae lacus. Pellentesque vitae tortor consequat pede tincidunt blandit. Curabitur mi. Sed a arcu a neque faucibus lobortis. Nullam eu diam eget neque mollis vestibulum. Curabitur iaculis ultricies elit. Integer congue volutpat mauris. Donec aliquet, augue et porttitor lacinia, tortor sapien vulputate augue, vitae pellentesque risus urna in est. Fusce vel ante non urna fringilla porttitor.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pellentesque, mi eu mattis auctor, lorem velit ultricies urna, id fermentum urna nibh ac risus. Nam sed erat. Pellentesque id ante sit amet nulla feugiat dignissim. Praesent eget odio sed dolor dictum sodales. Phasellus dui pede, volutpat a, scelerisque et, consequat et, purus. Nulla tincidunt vehicula magna. Mauris sem. Ut pede.

Más adelante ya veremos que columns: también se puede utilizar a nivel estructural.


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »