Brain Food for Web Developers

Lined Paper

Lined Paper with CSS

Lined PaperContinuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper.

Basically we use a repeat CSS3 gradient to create the lines on the page. Read more about CSS gradients and stop colours from Dynamicdrive.

View the demo on codepen. Here’s the code:

.page {

/* Setup the basic presentation of the div */
font-family: 'Just Another Hand', cursive;
width: 700px;
position: relative;
margin: auto;
padding: 15px 0;
color: #212121;

/* Curl the corners to make it look more like paper */
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 100px;

-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;

border-radius-bottomleft: 20px 500px;
border-radius-bottomright: 500px 30px;
border-radius-topright: 5px 100px;

/* Set the background */
background: white;
left top, left bottom,
color-stop(2%, white)

#fff 38px,
#81cbbc 40px

#fff 38px,
#81cbbc 40px

-webkit-background-size: 100% 40px;

-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

p {
padding: 0 100px;
line-height: 40px;
margin-bottom: 40px;
font-size: 30px;

Original article on NetTuts.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.