Back to top

Affiliate Link: Interested In a Useful Tables For Amazon Products and More? Check Out:

Amalinks Pro

Add A Stacked Paper Look To Main Site Content

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

So while browsing around the web today I found a fun CSS trick that can make the main content of the site appear like a pile of stacked papers. There are a few options available so give them a try and see if one fits your site. I could see how this could work well for an art site or another paper-oriented blog.

Stacked Paper Effect At Bottom

/* Stacked Paper Effect At Bottom Of Content */
.site-main {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    0 1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 10px 0 -5px #eee,
    /* The second layer shadow */
    0 10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 20px 0 -10px #eee,
    /* The third layer shadow */
    0 20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 30px;
}

Stacked Paper Effect At Top

/* Stacked Paper Effect At Top Of Content */
.site-main {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    0 -1px 1px rgba(0,0,0,0.15),
    /* The second layer */
    0 -10px 0 -5px #eee,
    /* The second layer shadow */
    0 -10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 -20px 0 -10px #eee,
    /* The third layer shadow */
    0 -20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 30px;
}

Diagonal Stacked Paper Effect

/* Diagonal stacked paper effect */
.site-main {
  background-color: #fff;
  /* Need position to allow stacking of pseudo-elements */
  position: relative;
  /* Padding for demo purposes */
  padding: 30px;
}

.site-main,
.site-main::before,
.site-main::after {
  /* Add shadow to distinguish sheets from one another */
  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}

.site-main::before,
.site-main::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

/* Second sheet of paper */
.site-main::before {
  left: 7px;
  top: 5px;
  z-index: -1;
}

/* Third sheet of paper */
.site-main::after {
  left: 12px;
  top: 10px;
  z-index: -2;
}

Disorganized Paper Stack Effect

.site-main {
  background: #fff;
  padding: 30px;
  position: relative;
}

.site-main,
.site-main::before,
.site-main::after {
  /* Styles to distinguish sheets from one another */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.site-main::before,
.site-main::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.site-main::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.site-main::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content