[SOLVED] How can I create vertically repeating horizontal dashed lines in css

How can I create vertically repeating horizontal dashed lines in css

I created vertically repeating horizontal lines (solid) using following css

.solid-lines {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 30px;
}

JS Bin

Now I need same background but dashed lines instead of solid lines. Is it possible using css only.

Solution

One of the ways this can be obtained is by stacking gradients. You will have one gradient representing the colored-horizontal lines, then adding in white vertical lines as a second gradient. (It can be white, or what ever color your background is).

.solid-lines {
  padding-left:5px;
  background-image:linear-gradient(to right, #fff 5px, transparent 1px), linear-gradient(#ccc 1px, transparent 1px);
  background-size: 20px 30px;
}

The added padding is for the offset of the first line. The background size (20px) represents the space in-between each white vertical line, and '5px' is the size of that line. Tweak these numbers to get the dashed look you want.

http://jsbin.com/weyozutawiva/1/

body {
  background: #fff;
  color: #444;
  font-family: sans-serif;
  font-size: 14px;
}
.solid-lines {
  width: 500px;
  margin: 50px auto;
  padding-top: 6px;
  line-height: 30px;
  padding-left:5px;
  
  background-image:linear-gradient(to right, #fff 5px, transparent 1px),  linear-gradient(#ccc 2px, transparent 1px);
  background-size: 20px 30px;
}

<div class="solid-lines">Laborum fugiat legam tempor varias ad tamen mandaremus si exercitation, quo
  ipsum exercitation, sint tempor excepteur. Tamen ea offendit in varias, amet
  fabulas o laborum, cillum senserit occaecat, ipsum ut laborum nam malis. Commodo
  ne aliquip nam offendit dolore iis consequat coniunctione. Quorum ab laboris si
  mandaremus noster nescius expetendis si incididunt tamen ubi commodo
  distinguantur sed an legam ad lorem. Sed quis expetendis relinqueret. Nisi
  mentitum exquisitaque. De quid quo sint e iudicem multos summis est fugiat,
  dolore ea commodo te aliqua et offendit multos officia mandaremus, non quem
  legam ne singulis, te aliqua doctrina nostrud, est aliqua illustriora ea labore
  aut quo quid consequat.</div>