Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo CSS3

Nuevas tendencias en el estilo y diseño de páginas con CSS3.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 60

Visitas el mes pasado: 98

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de CSS 3 : desarrollo web
Desarrollo Web
CSS avanzado: Libros Web.
Javier Eguíluz Pérez
Lista de nuevas propiedades CSS3
www.css3.info
Documentación CSS
mozilla: centro de documentación.
CSS Backgrounds and Borders Module Level 3
W3C Candidate Recommendation 15 February 2011
CSS Text Level 3
W3C Working Draft 1 September 2011
CSS Multi-column Layout Module
W3C Candidate Recommendation 12 April 2011
Flexible Box Layout Module
W3C Working Draft, 23 July 2009
CSS Reference
W3Schools Home
Filtros en Internet Explorer
Visual Filters and Transitions Reference. Microsoft.com
Usando CSS para poner guiones
Roberto Baca: /dd>

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




CSS3 (VIII)

Múltiples columnas

imagen css3

Texto en varias columnas

Una de las novedades de CSS3 es poder distribuir contenido (texto, imágenes, etc.) de un elemento en varias columnas. Aunque el texto y demás elementos de la caja aparezcan distribuidos en columnas, no se crean nuevas cajas para las columnas. Por lo tanto todas las propiedades aplicadas a la caja, se aplican a todas las columnas.

Al crear varias columnas en una caja, todas tienen la misma anchura, de manera que el espacio se distribuye de manera uniforme entre las diferentes columnas. El texto intenta distribuirse de manera uniforme también en altura, a veces esto no es posible, (cuando se incluyen imágenes, por ejemplo), en este caso la altura será la de la columna más alta, dejando las demás en el final un espacio en blanco para completarla.


Propiedades para distribuir columnas

Para poder distribuir un elemento en columnas CSS3 tiene dos nuevas propiedades: column-width y column-count


Propiedad column-width

La propiedad column-width distribuye el contenido de un elemento en columnas de la anchura que se le indica en su valor. El valor es por tanto una medida. Sin embargo se intentará ajustar el número de columnas a la medida dada para que todas las columnas sean iguales, redondeando el número hacia arriba siempre que sea posible.

#capa1 {column-width: 200px;}

Supongamos que en este ejemplo el elemento contenedor tiene una anchura de 500px, se crearían dos columnas con una anchura algo máyor que la indicada, (250px) para ajustar las columnas al espacio disponible.


Propiedad column-count

La propiedad column-count distribuye el contenido del elemento en el número de columnas indicado. Su valor debe ser un número entero positivo distinto de 0.

#capa1 { column-count: 4;}

El ejemplo anterior distribuye el contenido del elemento en cuatro columnas. Las columnas ajustan su anchura de manera uniforme a la anchura del elemento.

Tanto esta propiedad como la anterior tambien admiten como valor la palabra clave "auto" que indica que la propiedad se queda igual que estaba.


La propiedad columns

Como una propiedad tipo "shorthand" que agrupa las dos anteriores está la propiedad columns, en la cual podemos poner como valor una medida, el número de columnas, o los dos.

#capa1 { columns: 200px 4; }

Cuando están los dos la medida tiene prioridad sobre el número.


Separación de columnas

Para poder ver bien un texto en columnas, debemos dejar algo de espacio entre ellas; a veces, además del espacio de separación hay también una línea entre ellas que las separa. CSS3 tiene varias propiedades para marcar todo esto.


Espacio entre columnas

La propiedad column-gap indica la distancia de separación entre columnas. Su valor es una medida que indica la distancia de separacion o la palabra clave normal. En este último caso el espacio depende del valor estándar del navegador, aunque suele ser de 1em.

#capa1 { column-gap: 4em; }


Línea de separación entre columnas

Además del espacio entre columnas podemos poner una línea de separación entre ellas. Las propiedades column-rule definen la línea de separacion. Estas propiedades son:

Estas tres propiedades pueden reunirse en una sóla propiedad de tipo "shorthand", column-rule.

column-rule: <‘column-rule-width’> || <‘column-rule-style’> || [ <‘column-rule-color’> | transparent ]

Como valores ponemos la medida, el estilo y el color. La palabra clave transparent es el valor predeterminado, y es la ausencia de línea.


Compatibilidad con navegadores.

Opera a partir de la versión 11.5 ha compatibilizado las propiedades anteriores en su forma estándar.

El navegador Firefox admite estas propiedades pero de forma experimiental, para su funcionamiento deben llevar el prefijo -moz- delante.

Safari y Chrome tambien admiten las propiedades de forma experimental, en este caso deben llevar delante el prefijo -webkit-

Internet Explorer ha adoptado estas propiedades en su forma estándar a partir de su versión 10, aunque no admite no admite la propiedad column-width;

Veamos ahora cómo será un ejemplo de texto con columnas que funcione en los navegadores anteriores. Debemos por tanto reescribir las propiedades para los navegadores que lo admiten sólo de forma experimental. El texto del siguiente ejemplo, escrito dentro de un <div id="capa1"> ... </div> lleva asociado el siguiente código CSS:


#capa1 { text-align: justify; padding: 10px; width: 600px; background-color: silver;
     column-count: 3; column-gap: 3em; column-rule: 2px solid olive;
     -moz-column-count: 3; -moz-column-gap: 2em; -moz-column-rule: 2px solid olive; 
     -webkit-column-count: 3; -webkit-column-gap: 3em; -webkit-column-rule: 2px solid olive;
     }

Y el texto lo veremos de la siguiente manera:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit.

Saltos de columna

Podemos controlar en qué punto pasamos de una columna a otra, provocando así un salto de columna, aunque ésta no se haya completado del todo. Para ello se supone que dentro del elemento contenedor hay varios elementos para distribuir en columnas (párrafos, títulos, imágenes, etc.). El salto de columna se producirá siempre entre dos de estos elementos, para ello marcaremos un elemento y le diremos si queremos el salto antes o después de él:

Estas propiedades sólo funcionan en Opera y en Internet Explorer 10. El resto de navegadores no han adoptado todavía estas propiedades.

Si quieres ver un ejemplo de un elemento con su código donde se aplican estas propiedades, lo tienes en el siguiente enlace:

Saltos de columna (sólo en Opera y IE10)



Expandir un elemento en todas las columnas.

Esto permite que un elemento se expanda a lo largo del resto de las columnas, de manera que queda fuera del flujo de las columnas. Por ejemplo, tenemos un texto compuesto por títulos y párrafos. Si expandimos cada título a lo largo de todas las columnas, tendremos que los títulos ocuparán todo el ancho del contenedor, y cada uno de los párrafos se distribuirá en columnas, debajo de su título.

La propiedad column-span permite hacer esto. Sus posibles valores son none y all El valor none es el valor por defecto y deja el elemento en la misma columna, no cambia el valor inicial. El valor all hace que el elemento deje de formar parte de la columna y ocupe todo el ancho del contenedor, de forma que el elemento siguiente vuelve a distribuirse en columnas.

column-span: all;

Esta propiedad funciona de forma estándar en el navegador Opera y en Internet Explorer 10; y de forma experimental en Safari y Chrome (con el prefijo -webkit-). Firefox no ha adoptado esta propiedad. Para ver un ejemplo de un elemento y su código con esta propiedad, pulsa en el siguiente enlace.

Expandir elementos entre columnas






En la siguiente página veremos nuevas propiedades de CSS3 para los textos.

Texto en CSS3



Manual de CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com