Create a Paper Stack Effect With CSS3

Creating a Paper Stack Effect with CSS3 has many uses, it’s not wrong to learn because this technique is quite used in the web design world, for example a few months ago I once got a project to create a website for a short article writing contest, and asked for the layout. Like paper, however, designers have to make sense to make it as similar to paper as possible, there are many ways, but this simple one is their choice because it is considered simpler and easier to read.

At that time I also made the project with the trick of Limiting Text Input With Jquery so that articles could only be written as much as 500 characters, from there many things can be learned and can be written in several tricks. One of them is the display of the paper effect with this css3.

HTML Structure
OK, let’s get started with the necessary HTML structure, create an HTML file and name it paper-effect.html.


Create the html structure as usual, and in the body we simply create a div with the paper class.

To beautify us using CSS, here what we need to learn is CSS Box Shadow because to create the stack effect it actually uses several shadow effects with different distances, here we make the demo shadow farther and farther, so that it forms like paper piled up.

The format for writing box shadow css is as follows: