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/