CODEWITHSUNDEEP
htmlcss
Salman Sheikh
Salman Sheikh

Reputation: 91

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

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 to find a way to repeat it, so that it can fill the entire page.

Here is my CSS code:

.horizontalLines {
 border-bottom: 2px solid #CCCCCC;
 padding-top: 25px;
 width: 100%;
}

This code only allows me to make only one line, how can i make multiple lines?

Upvotes: 5

Views: 8786

Answers (4)

Webduck
Webduck

Reputation: 21

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.

Upvotes: 2

insertusernamehere
insertusernamehere

Reputation: 23590

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.

Upvotes: 3

m1k1o
m1k1o

Reputation: 2364

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/

Upvotes: 0

geekchic
geekchic

Reputation: 2431

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).

Upvotes: 16

Related Questions