BlogsDope image BlogsDope

Getting Notebook Paper Effect with CSS

May 13, 2019 CSS 481

You must have come across text written on lined-paper effect in some websites. Lined-paper is a popular background effect that we will be creating in this post using CSS. An example of such an effect is shown below.

See the Pen Notebook Effect Using CSS by Aakhya Singh (@aakhya) on CodePen.

You can use an image of ruled paper instead of creating these lines using CSS, but that would not be a good option because using more images will take more space in server and will increase the loading time of your webpage. So, it's always better not to use images if you can do the same task by coding.

The Structure

The HTML consists of a div with id paper which will make our notebook paper. Inside it, there is another div with id pattern which will contain all the lines in the paper. Inside this div, there is another div with id content which contains the text to be written on the paper.

HTML

<div id="paper">
  <div id="pattern">
    <div id="content">
      Dear Diary ... Clifton Hill. 
    </div>
  </div>
</div>

The Styling

We will be styling mainly four components - paper, red colored vertical line on left, blue colored horizontal lines and text. So let's get started.

Step 1

Give width, height, background color and box shadow to the paper. Box shadow will give it an elevated look.

To make the paper horizontally center aligned, its left and right margin are set to auto.

CSS

#paper {
  width: 600px;
  height: 700px;
  margin: 20px auto;
  background-color: white;
  box-shadow: 0px 0px 5px 0px #888;
}

Step 2

The right vertical line on left is given by applying the ::before selector to the div with id paper. Its width is set to 2 px and height is set to 100% the height of its parent. It is given color using the background-color property.

CSS

#paper::before {
  content: '';
  width: 2px;
  height: 100%;
  background-color: rgba(255,0,0,0.6);
}

It is positioned relative to the paper by giving position: relative to #paper and position: absolute to #paper::before and then specifying top and left positions.

CSS

#paper {
  position: relative;
}
#paper::before {
  position: absolute;
  top: 0;
  left: 40px;
}

Step 3

Horizontal lines are created using repeating-linear-gradient function. The div with id pattern is given repeating-linear-gradient(white 0px, white 24px, teal 25px) which creates a repeating pattern of 25 px height (having white color for 24 px height and blue color for 1 px height).

The height of the div with id pattern is set to 100% the height of its parent (paper). The div with id paper is given top and bottom padding so that there is some empty space above and below the lines in the paper.

CSS

#paper {
  padding-top: 40px;
  padding-bottom: 40px;
}
#pattern {
  height: 100%;
  background-image: repeating-linear-gradient(white 0px, white 24px, teal 25px);
}

Step 4

Style the content and set the line-height value equal to the height between two horizontal lines.

CSS

#content {
  padding-top: 6px;
  padding-left: 56px;
  padding-right: 16px;
  line-height: 25px;
  font-family: 'Dancing Script', cursive;
  font-size: 19px;
  letter-spacing: 1px;
  word-spacing: 5px;
}

Summing Up

Here's the entire code.

  • HTML
  • CSS
<div id="paper">
  <div id="pattern">
    <div id="content">
      Dear Diary ... Clifton Hill. 
    </div>
  </div>
</div>
						
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
body {
  background-color: rgba(0,0,0,0.1);
}

/* styling paper */
#paper {
  width: 600px;
  height: 700px;
  position: relative;
  margin: 20px auto;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: white;
  box-shadow: 0px 0px 5px 0px #888;
}

/* styling red vertical line */
#paper::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 40px;
  background-color: rgba(255,0,0,0.6);
}

/* styling blue horizontal lines */
#pattern {
  height: 100%;
  background-image: repeating-linear-gradient(white 0px, white 24px, teal 25px);
}

/* styling text content */
#content {
  padding-top: 6px;
  padding-left: 56px;
  padding-right: 16px;
  line-height: 25px;
  font-family: 'Dancing Script', cursive;
  font-size: 19px;
  letter-spacing: 1px;
  word-spacing: 5px;
}
						

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).