Tipo periodico

En HTML siempre ha sido "algo" complicado hacer un párrafo en plan periódico, o vamos, en columnas. Los trucos más antiguos son usar TABLAS, cosa que con la llegada de CSS cambió gracias a los DIV y su gran control al lado de lo que eran las tablas y el formato de celdas.

CSS cada día evoluciona más y más y ahora ya dispone de herramientas para poder realizar este ripo de cosas.

El código CSS

Con este pequeño código en CSS se podría realizar este tipo de efecto. Solo lo tienen que poner en una clase y listo!

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2";

-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;

-webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
-moz-column-gap: 2rem; /* Firefox */
column-gap: 2rem;

-webkit-column-rule: 5px solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
-moz-column-rule: 5px solid rgb(75, 180, 149) ; /* Firefox */
column-rule: 5px solid rgb(75, 180, 149) ;

-webkit-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
-moz-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Firefox */
column-rule: 0.5rem solid rgb(75, 180, 149) ;

margin: 20px;
margin: 2rem;";

Creo que sobra decir que en colum-count deben de poner el número de columnas que deseas que se vean.

Vamos un poco más allá

Ahora mi "truquito" para CSHARP. Con esta función podrías incluir dentro de una etiqueta < p > < /p >, por ejemplo, este trozo de código en CSS con el número de clolumnas que necesites.

 /// 

 /// Crear un efecto de columnas en el texto de un parrafo
 /// 

 /// Numero de columnas
 /// 
 public static string numeroColumnas(int Cols)
 {
 -webkit-column-count: 2; /* Chrome, Safari, Opera */
 -moz-column-count: 2; /* Firefox */
 column-count: 2";
 
 -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
 -moz-column-gap: 20px; /* Firefox */
 column-gap: 20px;

 -webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
 -moz-column-gap: 2rem; /* Firefox */
 column-gap: 2rem;
 
 -webkit-column-rule: 5px solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
 -moz-column-rule: 5px solid rgb(75, 180, 149) ; /* Firefox */
 column-rule: 5px solid rgb(75, 180, 149) ;

 -webkit-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
 -moz-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Firefox */
 column-rule: 0.5rem solid rgb(75, 180, 149) ;

 margin: 20px;
 margin: 2rem;";

 return retorno;
 }

COMO HACERLO

AH!!! pero hay otro "secretito" y es, ¿cómo puedo hacer para añadir este código CSHARP a mi etiqueta de estilo del párrafo < p > < /p >.

La respuesta es muy simple, según por dónde se mire. Sólo tenemos que agregar, inmediatemente después del nombre de la etiquete p las propiedades ID y RUNAT.

 < p runat="server" id="parrafo" > < /p >

Y desde el codebehind llamar a este elemento:

parrafo.Attributes.CssStyle.Value = numeroColumnas(2)

Conclusiones

Como siempre espero que este código les ayude a todos, y agradecer a todas las personas, que como yo ahroa, intentan hacer que otros aprendan y, al mismo tiempo, irles solucionando sus "problemillas" a la hora de programar y diseñar, y sobre todo a Ronaldo Caldas, el auténtico autor del código CSS que he publicado, yo solo he añadido la utilidad para CSHARP

#HTML #CSHARP #css #trucos