Lined Paper with CSS

Lined Paper with CSS

Let's make some lined paper with CSS. The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

And here's the CSS:

.paper {
    font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
    width: 300px;
    margin: 0 auto 10px;
    padding: 6px 5px 4px 42px;
    position: relative;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
 
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
 
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
}

In order to get all the text to line up properly on the lines, you need to specifically declare margins and line heights for all text elements. Given we used a background size of 20px above (i.e. it's 20px between the lines), we need to use a line height (or an equivalent line height + margin) of 20px.

.paper h1,
.paper h2 {
    font-size: 16px;
    line-height: 16px;
    margin: 0 0 4px;
}
.paper h3,
.paper h4,
.paper h5 {
    font-size: 14px;
    line-height: 16px;
    margin: 0 0 4px;
}
.paper h4,
.paper h5 {
    font-weight: normal;
}
.paper p {margin: 0 0 20px;}
.paper p:last-child {margin: 0;}
.paper ul {margin: 0 0 20px;}

Browser support

It works perfectly in Webkit and Opera, and almost perfectly in Firefox (the ruled margins on the left are 1 pixel too short at one end). Theoretically it should work in IE10, but I haven't tested it.

Enjoy the article? Tweet it!

Discussion - 6 comments

tsangk avatar

Anonymoustsangk 11 Mar 2012 02:27

Ohhh… really nice :)

Edit

Arotaritei Vlad avatar

AnonymousArotaritei Vlad 11 Mar 2012 14:34

Finally a new blog post :D Very nice… as always ;-)

Edit

tsangk avatar

Anonymoustsangk 24 Mar 2012 06:05

Yup, works in IE 10:
bmccreative-ie10.PNG

Edit

Anonymous avatar

Dallas PetersAnonymousAnonymous 05 Feb 2013 23:51

Sick. Thanks dude!

Edit

Anonymous avatar

David BAnonymousAnonymous 11 Nov 2013 23:41

Very cool

Edit

Anonymous avatar

KaanAnonymousAnonymous 21 Feb 2014 06:03

Awesome stuff mate! Thanks a lot!

Edit

Add a new comment

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.