ADVERTISEMENT

Paper Effect Background Using CSS

Telegram Group Join Now

ADVERTISEMENT

Paper Effect Background Using CSS

Hello coders! Don’t you want that their assignments to get submitted without writing any single line on paper. Or, I would like to make clear the fact that writing on paper always delivers excellent joy.

ADVERTISEMENT

ADVERTISEMENT

So most of the tech alcoholic people expecting the feeling of writing on paper without writing on paper, isn’t it weird but yeah learners developers like you are available to help them to grab the unexpected feelings.

So, welcome to our today’s blog with Code With Random. In this blog, we are going to learn how to create Paper Effect Background Using CSS  as per the preview image. Although Here by our complete project we will have an assessment ruled paper with some default text. You can skip this project and can write your own.

ADVERTISEMENT

Without any wasting time, let’s get it into css paper effect.

ADVERTISEMENT

Preview of the Project
Paper Effect Background Using CSS
Paper Effect Background Using CSS

 

Paper Effect Background Using CSS
Project Name Paper Effect Background
Code By Ankit Kumar 
Project Download CodePen Link Given Below
Language Used HTML and CSS
External Link / Dependencies Yes
Responsive No
Paper Effect Background project Information

 

HTML SECTION

In this section here we have a div with class paper with a div with class name lines. Within lines we have div class text in this we will have some default text Then we have 3 vacant div with class hole, hole-middle then hole-lower.

ADVERTISEMENT

Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.
 

HTML Code of Paper Effect Background

Copy all the HTML code of paper effect background project, and paste it in you HTML file called index.html

<div class="paper">
<div class="lines">
<div class="text" contenteditable spellcheck="false">
You can edit this text! <br /><br />
Cupcake ipsum dolor sit amet liquorice fruitcake. Candy canes jelly beans sweet roll cupcake lollipop. Powder carrot cake toffee brownie. Marshmallow sweet roll donut. Chocolate cake apple pie candy canes tiramisu dragée wafer. Croissant cookie lemon drops tiramisu jelly-o donut. Sweet gummi bears ice cream.</div>
</div>
<div class="holes hole-top"></div>
<div class="holes hole-middle"></div>
<div class="holes hole-bottom"></div>
</div>

 

CSS SECTION

In the CSS section, we will design our paper, lines, and holes class div. In the paper part, we will design to turn into a rectangle shape with a relatable margin. By selector paper::before we will add a red left side border. Byline class div we will rule the paper with the fixed margin between lines.
At last, we have holes by designing them we will put them into respective deference of gap.

ADVERTISEMENT

The Below code will analyze you more.

ADVERTISEMENT

CSS Code of Paper Effect Background

Copy all the CSS code of paper effect background project, and paste it in you CSS file called style.css

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
body {
  margin: 0;
  padding: 0;
  background: lightblue;
}
.paper {
  position: absolute;
  height: 550px;
  width: 450px;
  background: rgba(255,255,255,0.9);
  margin: -275px -225px;
  left: 50%;
  top: 50%;
  box-shadow: 0px 0px 5px 0px #888;
}
.paper::before {
  content: '';
  position: absolute;
  left: 45px;
  height: 100%;
  width: 2px;
  background: rgba(255,0,0,0.4);
}
.lines {
  margin-top: 40px;
  height: calc(100% - 40px);
  width: 100%;
  background-image: repeating-linear-gradient(white 0px, white 24px, steelblue 25px);
}
.text {
  position: absolute;
  top: 65px;
  left: 55px;
  bottom: 10px;
  right: 10px;
  line-height: 25px;
  font-family: 'Indie Flower';
  overflow: hidden;
  outline: none;
}
.holes {
  position: absolute;
  left: 10px;
  height: 25px;
  width: 25px;
  background: lightgoldenrodyellow;
  border-radius: 50%;
  box-shadow: inset 0px 0px 2px 0px #888;
}
.hole-top {
  top: 10%;
}
.hole-middle {
  top: 50%;
}
.hole-bottom {
  bottom: 10%;
}

 

50+ Html,Css &Javascript Projects With Source Code

Live preview of Paper Effect Background using CSS.

If You Want see the Live Preview Of Paper Effect Background. Have Look Below.

ADVERTISEMENT

By This Blog… We Have Learned How to create Paper Effect Background using CSS. Now I’m Looking For Your Reviews. So, How you like this CSS Paper effect Background?

ADVERTISEMENT

If You Want A More Crisp Blog Like this Then Please Check Our Blogs Sites CodewithRandom. Keep Tuned With Us Because Every Day You Will Learn Something New Here.

ADVERTISEMENT

I Hope That I’m Able To Make You Understand This Topic And You Have Learned Something New From This Blog. If You Faced Any Difficulty Feel Free To Drop A Comment Down Your Problems And If You Liked It, Please Show Your Love In The Comment Section. This Fills Blogger Hearts With Enthusiasm For Writing More And New Blogs.

ADVERTISEMENT

Thank You For Visiting!

ADVERTISEMENT

You Can Follow Me On Instagram

Written By @Ankit Kumar

How To Create Paper Effect Background Using CSS

we are going to learn how to create Paper Effect Background Using CSS  as per the preview image. Although Here by our complete project we will have an assessment ruled paper with some default text.

In this section here we have a div with class paper with a div with class name lines. Within lines we have div class text in this we will have some default text Then we have 3 vacant div with class hole, hole-middle then hole-lower.

CSS Paper Effect

We Are Going To Learn How To Create Paper Effect Background Using CSS  As Per The Preview Image. Although Here By Our Complete Project We Will Have An Assessment Ruled Paper With Some Default Text.

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT