Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

4 Comments

× New

Sign In to comment

georgejosephej:

Hi good work.
Can you please post IE fxing code for this article.

Rishabh :

wow, heh. thanks for figuring out. will fix now!

Jonathan Sampson:

Excellent work, though you mistakenly repeated the -moz- prefix on the background image for IE and Opera, as well as the unprefixed line.

background-image: -webkit-linear-gradient, -webkit-linear-gradient, -webkit-linear-gradient, -webkit-repeating-linear-gradient;
background-image: -moz-linear-gradient, -moz-linear-gradient, -moz-linear-gradient, -moz-repeating-linear-gradient;
background-image: -ms-linear-gradient, -moz-linear-gradient, -moz-linear-gradient, -moz-repeating-linear-gradient;
background-image: -o-linear-gradient, -moz-linear-gradient, -moz-linear-gradient, -moz-repeating-linear-gradient;
background-image: linear-gradient, -moz-linear-gradient, -moz-linear-gradient -moz-repeating-linear-gradient;

Nice work though!

LukyVj:

Woaw I never heard about the ":first-line" selector !
I'm impressed.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+