CSS3 Regions && num; 8211 & semi; Cómo funciona & lbrack; Diseño Web & rsqb;

November 22|233 Vistas|

Resumen: Una de las mejores ventajas de los medios impresos, como una revista o un periódico, en el sitio web es la flexibilidad total en la organización de las páginas y el diseño del párrafo. Por ejemplo, los medios de impresión han sido capaces de fluir co

Advertisement

CSS3 Regions && num; 8211 & semi;  Cómo funciona & lbrack; Diseño Web & rsqb;

Una de las mejores ventajas de los medios impresos, como una revista o un periódico, en el sitio web es la flexibilidad total en la organización de las páginas y el diseño del párrafo. Por ejemplo, los medios de impresión han sido capaces de fluir con gracia el contenido en más de una columna, e incluso las más complejas como se muestra en la siguiente captura de pantalla.

Crédito de la imagen: Atelier Martino & Jana

Sin embargo, debido a la forma en que se estructura el contenido en la Web, intentar imitar un diseño similar en el contenido Web es muy complicado.

Con el fin de hacer que el diseño web más flexible al igual que en los medios impresos, un nuevo módulo CSS3 se introdujo - CSS3 Regiones. En lugar de colocar el contenido dentro de múltiples elementos, este módulo permite que el contenido fluya en las áreas especificadas (regiones) en la página.

Veamos cómo funciona este módulo por ejemplo.

Activar función experimental

Este módulo está todavía en sus etapas experimentales, y actualmente sólo se admite en Google Chrome e Internet Explorer con prefijo. Si utilizas Google Chrome, debes activar primero la función experimental. Para ello, vaya a chrome: // banderas / y establezca el WebKit habilitar las características experimentales en Habilitado.

Ejemplo de uso básico

En este ejemplo, tendremos dos tipos de contenido: contenido principal y complementario. Vamos a colocar el contenido principal en la Región 1, 2 y 4, mientras que el complementario se mostrará en la Región 3, como se ilustra en la siguiente figura.

HTML

Comencemos con el marcado HTML.

El módulo CSS3 Regions no está restringido a la estructura del contenido, por lo que simplemente podemos agregar el complementario fuera del contenido principal, como por ejemplo, aunque, como mencionamos anteriormente, en realidad lo mostraremos en medio del contenido principal.

  </ H1> <h2> labore y dolore magna aliqua </ h2> <h1> <span class = > </ Title> <article class = "cf"> <p> </ p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporal incididunt ut labore y dolore magna aliqua.  </ P> </ p> <p> <img src = "img / stat.jpg" width = "500" height </ font> = "300"> </ p> <p> El dolor de la rodilla se encuentra en el interior de la pared,  </ P> </ p> </ p> </ p> </ p> <p> 

Entonces, necesitamos agregar el marcado de regiones donde debe fluir el contenido. No importa si agregamos el marcado por encima o por debajo del contenido real.

  <Div class = "regions cf"> <div id = "region-1" class = "region cf"> </ div> <div id = "region-2" Id = "region-3"> </ div> <div id = "region-4" class = "region cf"> </ div> </ div> 

CSS

En la hoja de estilo, especificamos el ancho y la altura de las regiones. La height es necesario especificar el punto de interrupción de contenido, de lo contrario el contenido no fluirá a las otras regiones.

  .demo-wrapper # region-1, .demo-wrapper # region-4 {anchura: 100%;  Altura: 250px;  } .demo-wrapper # region-4 {height: 400px;  } .demo-wrapper # region-2, .demo-wrapper # region-3 {width: 50%;  Altura: 700px;  Margen-fondo: 25px;  } 

Para añadir el contenido en las regiones, utilizamos el nuevo propiedades CSS flow-into y flow-from . Estas propiedades se utilizan para puentear el contenido y las regiones. Para fluir el contenido a través de las regiones, podemos escribir las reglas de estilo de esta manera.

  Artículo {-webkit-flow-into: article;  Flujo-en: artículo;  } .demo-wrapper a un lado {-webkit-flow-into: aside;  Flujo-en: aparte;  } # Región-1, # región-2, # región-4 {-webkit-flow-from: article;  Flujo-desde: artículo;  } # Region-3 {-webkit-flow-from: aside;  Flujo-desde: aparte;  } 

Con algunos estilos decorativos adicionales, obtendremos el siguiente resultado agradable en el navegador.

Puede dirigirse a la página de demostración para verla en acción.

  • Ver Demo
  • Descargar Fuente

Recursos adicionales

  • Documentación de regiones CSS3 - W3C
  • Ejemplos de regiones CSS - Adobe
  • Plegado de contenido con las regiones CSS3 - CSS-Tricks

Más

Etiqueta:

Artículos relacionados

Popular

Último