CSS3 Lined Paper
To keep your text always inside the lines, make sure you set line-height
with a certain value. Here I set it by 30px
. Then here is what I did with the gradients:
repeating-linear-gradient(top, #E9E7ED 30px, #E9E7ED 30px, #B0BECF 31px, #E9E7ED 31px, #E9E7ED 60px);
I set the gradient color-stop
by 30 pixels, equal to the line-height
, so that the distance between paper lines and the text height will be the same to make it neat. 31px
is for the 1px
paper line.
Taufik Nurrohman