HTMLCSSJS
Editor

Cheat Sheet

Generators

Blog

Links
HTML CSS JS
Gradient Box Shadow Text Shadow Color Font Table Column Border Border Radius Transform Background
CSS Column Generator

Split your text in columns for a better readablility with the column-count CSS property.
Set up your preferences while you're watching the live preview with the demo text. Using the sliders specify the amount of columns and the gap between them.
The color picker will let you style the separator between the sections.
With -webkit and -moz support.

Count:
8
Gap:
7
Rule:


06A47B

0.5

-webkit-column-count: 8;
-moz-column-count: 8;
column-count: 8;
-webkit-column-gap: 7px;
-moz-column-gap: 7px;
column-gap: 7px;
-webkit-column-rule: 1px solid rgba(6,164,123,0.5);
-moz-column-rule: 1px solid rgba(6,164,123,0.5);
column-rule: 1px solid rgba(6,164,123,0.5);
Use This
Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.

Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.

Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.

Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.

Ea duo atqui incorrupte, sed rebum regione suscipit ex, mea ex dicant percipit referrentur. Dicat luptatum constituam vix ut. His vide platonem omittantur id, vel quis vocent an. Ad pro inani zril omnesque. Mollis forensibus sea an, vim habeo adipisci contentiones ad, tale autem graecis ne sit.

Ex quod meis per, ea paulo eirmod intellegam usu, eam te propriae fabellas. Nobis graecis has at, an eum audire impetus. Ius epicuri verterem ex, qui cu solet feugiat consetetur. Placerat apeirian et sea, nec wisi viderer definiebas ex, at eum oratio honestatis.Eum illum nulla graeci at, mea quis munere indoctum at. In sea partiendo hendrerit. Quaestio partiendo an eam, rebum vitae accumsan ius id. Duo at causae option.

HTML

1
<div id="demoparagraph">
2
<p><strong>You can edit this section to test the interactive editor.</strong></p><p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
3
<p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
4
<p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
5
<p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
6
</div>
CSS

1
#demoparagraph {
2
-webkit-column-count: 8;
3
-moz-column-count: 8;
4
column-count: 8;
5
-webkit-column-gap: 7px;
6
-moz-column-gap: 7px;
7
column-gap: 7px;
8
-webkit-column-rule: 1px solid rgba(6,164,123,0.5);
9
-moz-column-rule: 1px solid rgba(6,164,123,0.5);
10
column-rule: 1px solid rgba(6,164,123,0.5);
11
}
Apply CSS
WYSIWYG

div
Sitemap  |  Terms & Conditions, Privacy Policy  |  footnote  |  We use cookies to improve the user experience.
©2017 html-css-js.com  |  html css js
➤