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.

paper-effect

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

Demo: Paper Stack

Tutorial-Webdesign.com

Back to tutorial

CSS
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:

box-shadow: 1px 2px 3px 4px #555;

1px = Horizontal Offset

2px = Vertical Offset

3px = Blur Radius (optional)

4px = Spread Radius (optional)

555 = Color

And here is the complete css code from the demo we made

It can be seen that the values ​​are 1 to 10 on the horizontal and vertical sections, and the black and white colors are written on rgba(0,0,0,..) and rgba(255,255,255,..)

there using rgba so that the thickness of the color can be determined, or we can say the opacity of the color.

The width and length can be determined according to your needs.

Browser Support

This effect works in all recent browsers, but does not work in Opera Mini.

Results

Here are the results that have been made

Demo | Download Code
so much

So many tutorials this time, hopefully useful for all of you,

Greetings Indonesian web design.