viernes, 23 de noviembre de 2012

Ejemplo practico( crear columnas en css3)





Simple de aplicar las divisiones de columnas en  css3. 



<html>
<head>
<style type="text/css">
div{
line-height:1.5em;

-moz-column-count:2;
-webkit-column-count:2;
column-count:2;


}

</style>


</head>
<body>
<div>
Lorem Ipsum is simply dummy
 text of the printing and typesetting
 industry. Lorem Ipsum has been the industry's
 standard dummy text ever since the 1500s, when
 an unknown printer took a galley of type and scrambled
 it to make a type specimen book. It has survived not
 only five centuries, but also the leap into electronic
 typesetting, remaining essentially unchanged. It was
 popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including
 versions of Lorem Ipsum.</div>


</body>


</html>


o 3 columnas


 3 columnas


<html>
<head>
<style type="text/css">
div{
line-height:1.5em;
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;

}
</style>


</head>
<body>
<div>
Lorem Ipsum is simply dummy
 text of the printing and typesetting
 industry. Lorem Ipsum has been the industry's
 standard dummy text ever since the 1500s, when
 an unknown printer took a galley of type and scrambled
 it to make a type specimen book. It has survived not
 only five centuries, but also the leap into electronic
 typesetting, remaining essentially unchanged. It was
 popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including
 versions of Lorem Ipsum.</div>


</body>


</html>






con un largo de
(line-height:1.5em;).



Mismo resultado que el anterior pero con width:20em;



<html>
<head>
<style type="text/css">
div{
line-height:1.5em;
-moz-column-width:20em;
-webkit-column-width:20em;
column-width:20em;

}

</style>


</head>
<body>
<div>
Lorem Ipsum is simply dummy
 text of the printing and typesetting
 industry. Lorem Ipsum has been the industry's
 standard dummy text ever since the 1500s, when
 an unknown printer took a galley of type and scrambled
 it to make a type specimen book. It has survived not
 only five centuries, but also the leap into electronic
 typesetting, remaining essentially unchanged. It was
 popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including
 versions of Lorem Ipsum.</div>


</body>


</html>




Las columnas con bordes divisores 

 Tipos de bordes que se pueden usar para dividir las columnas .
none-- ninguno                                                                           
hidden--oculto
dotted--punteado
dashed--discontinuo
solid--solido
double--doble
groove--ranura
ridge--cresta
inset--recuadro
outset--principio


Utilizando el estilo punteado (dotted) para el próximo ejemplo.



<html>
<head>
<style type="text/css">
div{
line-height:1.5em;

-moz-column-gap:2em;
-moz-column-count:2;
-moz-column-rule-style:dotted;

-webkit-column-gap:2em;
-webkit-column-count:2;
-webkit-column-rule-style:dotted;


column-gap:2em;
column-count:2;
column-rule-style:dotted;
}

</style>


</head>
<body>
<div>
Lorem Ipsum is simply dummy
 text of the printing and typesetting
 industry. Lorem Ipsum has been the industry's
 standard dummy text ever since the 1500s, when
 an unknown printer took a galley of type and scrambled
 it to make a type specimen book. It has survived not
 only five centuries, but also the leap into electronic
 typesetting, remaining essentially unchanged. It was
 popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including
 versions of Lorem Ipsum.</div>


</body>


</html>




Con COLOR  rojo. Utilizando

column-rule-color:#ff6699;

Quedando de esta manera .



<html>
<head>
<style type="text/css">
div{
line-height:1.5em;

-moz-column-gap:2em;
-moz-column-count:2;
-moz-column-rule-style:dotted;
-moz-column-rule-color:#ff6699;



-webkit-column-gap:2em;
-webkit-column-count:2;
-webkit-column-rule-style:dotted;
-webkit-column-rule-color:#ff6699;



column-gap:2em;
column-count:2;
column-rule-style:dotted;
column-rule-color:#ff6699;

}

</style>


</head>
<body>
<div>
Lorem Ipsum is simply dummy
 text of the printing and typesetting
 industry. Lorem Ipsum has been the industry's
 standard dummy text ever since the 1500s, when
 an unknown printer took a galley of type and scrambled
 it to make a type specimen book. It has survived not
 only five centuries, but also the leap into electronic
 typesetting, remaining essentially unchanged. It was
 popularised in the 1960s with the release of Letraset
 sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including
 versions of Lorem Ipsum.</div>


</body>


</html>









También