CSS3 nos permite crear varias columnas de texto al estilo de los diarios o periódicos impresos. Esto lo podemos hacer mediante las propiedades multi-columnas que veremos en este tutorial.
PROPIEDADES CSS MULTI-COLUMNAS
Básicamente, las propiedades para crear columnas múltiples en CSS3 son:Propiedad Sintaxis Descripción column-count column-count: número | auto Especifica el número de columnas column-gap column-gap: tamaño | normal Especifica el tamaño ( px, em, etc…) del espacio entre columnas. column-rule column-rule: column-rule-width column-rule-style column-rule-color Propiedad de atajo que establece las propiedades del separador entre columnas. column-rule-color column-rule-color: color Establece el color del separador entre columnas. column-rule-style column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; Establece el estilo del separador entre columnas. column-rule-width column-rule-width: medium | thin | thick | anchura; Especifica la anchura del separador entre columnas. column-span column-span: 1 | all; Establece si un elemento puede extenderse a lo largo de varias columnas. column-width column-width: anchura | auto; Sugiere la anchura optima de las columnas. columns columns: column-width column-count Propiedad de atajo que establece las propiedades column-width y column-count column-fill balance|auto|initial|inherit; Especifica cómo rellenar las columnas.
PROPIEDAD COLUMN-COUNT
La propiedad column-count permite especificar el número de columnas que un elemento debe tener. En el siguiente ejemplo vamos a dividir este contenido en 3 columnas de texto.
<div class="newspaper">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>El código CSS:
.newspaper {
-webkit-column-count : 3;
-moz-column-count : 3;
column-count: 3;
}See the Pen PROPIEDAD COLUMN-COUNT by simplicitytree (@simplicitytree) on CodePen.
PROPIEDAD COLUMN-WIDTH
La propiedad column-width sirve para especificar una anchura óptima sugerida para las columnas. En el siguiente ejemplo se establece que la anchura óptima sugerida para las columnas es igual a 100px:
<div class="newspaper">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>Y la regla CSS:
.newspaper {
-webkit-column-count : 100px;
-moz-column-count : 100px;
column-width: 100px;
}Si se utiliza esta propiedad sin especificar el número de columnas, se generará un numero variable de columnas dependiendo de la anchura del elemento padre.
See the Pen PROPIEDAD COLUMN-WIDTH by simplicitytree (@simplicitytree) on CodePen.
PROPIEDAD COLUMN-GAP
La propiedad column-gap sirve para especificar el tamaño del espacio entre columnas. En el siguiente ejemplo se establece un tamaño del espacio entre columnas igual a 90px.
<div class="newspaper">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>La regla CSS:
.newspaper {
-webkit-column-count : 3;
-moz-column-count : 3;
column-count : 3;
-moz-column-gap : 90px;
-webkit-column-gap : 90px;
column-gap : 90px;
}See the Pen PROPIEDAD COLUMN-GAP by simplicitytree (@simplicitytree) on CodePen.
Si no se especifica el valor de column-gap el navegador establece por defecto el valor normal.
PROPIEDAD COLUMN-RULE
La propiedad column-rule sirveparaseparar las columnas por medio de una línea vertical. Se trata de una propiedad de atajo que especifica las características del borde entre columnas. Si queremos, podemos desglosar utilizando la propiedad column-rule-color para definir el color, column-rule-style para especificar el estilo de línea y column-rule-width para la anchura del borde.
<div class="newspaper">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>La regla CSS:
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px solid #ccc;
-moz-column-rule: 4px solid #ccc;
column-rule: 4px solid #ccc;
}See the Pen PROPIEDAD COLUMN-RULE by simplicitytree (@simplicitytree) on CodePen.
PROPIEDAD COLUMN-SPAN
La propiedad column-span especifica cuántas columnas debe abarcar un texto. Los dos valores qe asume esta propiedad son 1 (El elemento abarca una sóla columna) y all (el texto se expande en múltiples columnas)En el siguiente ejemplo vermos como el encabezado se extiende sobre todas las columnas utilizando column-span :all.
<div class="newspaper">
<h2>Lorem Ipsum Sit Amet</h2>
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et accumsan et iusto dignissim qui blandit praesent luptatum zzril delenit augue duis te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>La regla CSS:
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 1px solid lightblue;
-moz-column-rule: 1px solid lightblue;
column-rule: 1px solid lightblue;
}
h2 {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
}See the Pen PROPIEDAD COLUMN-SPAN by simplicitytree (@simplicitytree) on CodePen.
PROPIEDAD COLUMN-FILL
Esta propiedad especifica cómo se deben rellenar las columnas. Los dos valores principales son balance y auto.
<h2>column-fill: auto:</h2>
<div class="newspaper1">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate velit esse molestie consequat...
</div>
<h2>column-fill: balance (default):</h2>
<div class="newspaper2">
Lorem ipsum sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate velit esse molestie consequat...
</div>El código CSS:
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
height: 100px;
}
.newspaper1 {
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
}
.newspaper2 {
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
}See the Pen PROPIEDAD COLUMN-FILL by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
