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

    padding: 30px;
}

Stacked Paper Effect At Top

    padding: 30px;
}

Diagonal Stacked Paper Effect

.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 {
  
  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!