Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Crear con CSS3 Múltiples Columnas


Columnas con CSS3


Hoy quiero demostraros las múltiples tareas que puedes hacer con CSS3 (Cascading Style Sheets), una de sus propiedades que nos ofrece concebir este lenguaje de hojas de estilos, es inventar múltiples columnas en CSS3. Y a ello me remito, a escribir este pequeño tutorial para introduciros en el mundo CSS3 y en las múltiples columnas que puedes diseñar y engendrar, para aquel que lo desconozca, vamos a ello, hay tres demostraciones con su código, para copiar y pegar. Las tres demos que verás a continuación las he diseñado yo, con un poco de imaginación, puedes logar resultados fantásticos, estos son algunos de los ejemplos que he creado. Espero que os gusten, y que cambiéis los estilos, al gusto.


4 columnas



Lorem Ipsum

Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus.



Los estilos CSS de las Cuatro columnas


.cuatrocolumnas{
width: 630px;
height: 500px;
margin: 0 auto;
font-size: 17px;
font-family: Georgia,sans-serif;
padding: 10px;
background-color: #d78965;
border: 2px solid #000;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-rule: 1px dotted black;
-moz-column-count: 4;
-moz-column-gap: 10px; 
-moz-column-rule: 1px dotted black;
column-count: 4;
column-gap: 10px;
column-rule: 1px dotted black;
}


HTML de las Cuatro columnas


<div class="cuatrocolumnas"><p><h1>Título</h1>Texto_del_párrafo.</p></div>

3 columnas




Lorem Ipsum

Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer.


CSS de las tres columnas


.trescolumnas{
width:600px;
height: 400px;
margin: 0 auto;
font-size: 17px;
font-family: Georgia,sans-serif;
padding: 10px;
background:url(http://4.bp.blogspot.com/-dp_zaCgth1E/UogW_MiFMgI/AAAAAAAARJ8/GmhvqSoV2eE/s1600/nblw.png) repeat right center!important;
border: 2px double #000;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: 1px solid black;
-moz-column-count: 3;
-moz-column-gap: 10px; 
-moz-column-rule: 1px solid black;
column-count: 3;
column-gap: 10px;
column-rule: 1px solid black;
}


HTML de las tres columnas


<div class="trescolumnas"><p><h1>Título</h1>Texto_del_párrafo.</p></div>

Dos columnas





Lorem Ipsum

Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt! Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor.


CSS de las dos columnas

.doscolumnas{
width:570px;
height: 367px;
margin: 0 auto;
font-size: 17px;
font-family: Georgia,sans-serif;
padding: 10px;
background:url(http://2.bp.blogspot.com/-T4L2Q0SpCSA/Uok69PZX8QI/AAAAAAAARLQ/hg2EOA7uGZQ/s1600/Pattern-GraphPaper_shop_preview.png)repeat right center !important;
border: 2px solid #000;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
-webkit-column-rule: 1px solid black;
-moz-column-count: 2;
-moz-column-gap: 10px; 
-moz-column-rule: 1px solid black;
column-count: 2;
column-gap: 10px;
column-rule: 1px solid black;
}


HTML de las dos columnas

<div class="doscolumnas"><p><h1>Título</h1>Texto_del_párrafo.</p></div>


Aizum Blog, jueves, noviembre 14, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9