Búsqueda personalizada
 
 
 
 
Múltiples columnas y línea separadora (column-rule)
   

Podemos configurar una lnea separadora entre las columnas cuando utilizamos mltiples columnas. La sintaxis es la siguiente:

Elemento { 
     column-rule: grosor estilo color; 
}

Con el siguiente ejemplo veamos los distintos valores de esta propiedad. Definimos una lnea de un pxel, con trazo slido de color rojo:

#recuadro1{
  -moz-column-rule: 1px solid #f00;
  -webkit-column-rule: 1px solid #f00;
  column-rule: 1px solid #f00;
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
  border-radius: 20px;  
  background-color:#ddd;
  width:600px;
  padding:10px;
}

Otro ejemplo utilizando lnea punteada:

#recuadro2{
  -moz-column-rule: 3px dotted #f00;
  -webkit-column-rule: 3px dotted #f00;
  column-rule: 3px dotted #f00;
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
  border-radius: 20px;  
  background-color:#ddd;
  width:600px;
  padding:10px;
  margin-top:10px;
}
 

Hay tres propiedades que permiten asignar en forma independiente el grosor, estilo y color del separador:

Elemento { 
     column-rule-width: grosor;
     column-rule-style: estilo;
     column-rule-color: color;
}

Por ejemplo si queremos definir un separador con lnea discontinua de 2 pxeles de color azul:

#recuadro3{
  -moz-column-rule-width: 2px;  
  -webkit-column-rule-width: 2px;  
  column-rule-width: 2px;  
  -moz-column-rule-style: dashed;  
  -webkit-column-rule-style: dashed;  
  column-rule-style: dashed;  
  -moz-column-rule-color: #00f;
  -webkit-column-rule-color: #00f;
   column-rule-color: #00f;  

  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
  border-radius: 20px;  
  background-color:#ddd;
  width:600px;
  padding:10px;
  margin-top:10px;
}
 

Si queremos una línea doble debemos indicar en el estilo el valor double:

#recuadro4{
 -moz-column-rule: 5px double  #aaa;
  -webkit-column-rule: 5px double  #aaa;
  column-rule: 5px double  #aaa;
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
  border-radius: 20px;  
  background-color:#ddd;
  width:600px;
  padding:10px;
  margin-top:10px;
}
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion