Acabado: Adding A Stacked Paper Look

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;
}

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!