How to draw multiple horizontal lines (Notebook Paper effect) using css?

Question

I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable

Answer 1

You can do it with box shadows:

.lines{
    width:500px;
    height:400px;
    background: red;
    box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}

http://jsfiddle.net/7DkKc/

Or simply with images:

.lines{
    background: transparent url(url) 0 0 repeat-x;
}

Or with gradients.

http://www.colorzilla.com/gradient-editor/

Answer 2

Using your way you have to insert multiple of these elements. You can't simply repeat them.

Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.

body {
    background: transparent url(path/filename) repeat 0 0;
}

Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.

Answer 3

Here you go.

.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");

}

Just Encode an image in base64 and it works fine.

You can try encoding HERE.

Answer 4

As an alternate solution, there's a beautiful lined paper effect written using CSS available here.

background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).