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>
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;
<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
Comentarios
Publicar un comentario