Como encriptar los parámetros en una url con GeneXus
junio 17, 2010
CSS3 Botones
junio 20, 2010

CSS3 Diseño Multi column

Empece a estudiar CSS3, asi que voy a ir escribiendo un poco del tema.

El selector para poder hacer multi-columnas es uno de los que mas me llamó la atención, mas que nada porque hace un par de días estaba precisando hacer exactamente esto, si hubiera sabido de esto, la solución hubiera sido mucho mas sencilla.

Ej. el texto a continuación esta todo dentro de un solo div que usa el siguiente codigo css:

div.columnas {
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-width: 150px;
-moz-column-rule: 1px solid #00000;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-width: 150px;
-webkit-column-rule: 1px solid #00000;
}

Definimos lo siguiente:

  • column-count: la cantidad de columnas
  • column-gap: la distancia entre columnas
  • column-width: el ancho de la columna
  • column-rule: linea de division entre columnas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dui felis. Quisque ornare tellus et tortor pellentesque vulputate. Ut mollis accumsan neque, quis vestibulum erat varius at. Aliquam cursus consectetur viverra. Pellentesque dolor augue, pulvinar sit amet molestie non, egestas mollis risus. Aenean eu nisi odio, eget accumsan libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dui felis. Quisque ornare tellus et tortor pellentesque vulputate. Ut mollis accumsan neque, quis vestibulum erat varius at. Aliquam cursus consectetur viverra. Pellentesque dolor augue, pulvinar sit amet molestie non, egestas mollis risus. Aenean eu nisi odio, eget accumsan libero.

Comments are closed.