CSS3 Notebook Paper

Notebook Lined Paper in Pure CSS by Adam Snodgrass. The entire content is editable. This is achieved by using the new HTML5 attribute - contenteditable.

The lines have been done with CSS3 gradients. You will notice that there are 4 gradients used. The first one is for the lighter red line on the right hand side. The second is for the first red line on the left hand side. The third is for the top white space and the fourth is for the blue lines. Each gradient except the third one is repeated to get the desired effect. The red lines have been positioned with proper background-position values. The top left hole has been done with box-shadow.

If you notice, the heading is a part of the <p> and still has a different font-size. This is because it is styled with the :first-line pseudo class.

Finally, the basic trick to get your sentences aligned properly on each line is to set a fixed and appropriate font-size and line-height.

Subscribe to updates

Related:

Coding Preferences

HTML

CSS

Javascript

More

5 Comments

Hello! awesome bit of code. I like how you combined the blue lines with the red and white top block. question, though... the red lines are a bit funky. if the browser window is too wide, they (both) disappear. I was able to figure out how to get them to return, though... changing the bottom padding. 43% for my full screen width.

For the life of me, I can't see the relation between the red lines existence and the bottom padding of the p element.