paper stack (css3) in angular material design

Question

I'm using Angular Material Design, and I'm trying to create the paper stack effect as given in the below codepen link:

Paper Stack using CSS3

It works fine, but the moment I add Angular Material Design CSS, it breaks (there is no more paper stack UI) could you please help me fix this, the below is the link with added Material Design CSS.

Same Paper Stack code + Material Design CSS

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<div class="letter">
  <p>Dear Friends,</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui, rhoncus viverra quam. Nulla tempus, augue ut consectetur facilisis, arcu elit pellentesque arcu, sed rutrum orci turpis pulvinar augue. Donec eget arcu mauris. Vestibulum tristique consequat lacus eget laoreet. Integer sed nisl sed nibh pulvinar ornare quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p>

</div>

<!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>

Answer 1

Christina is on the right track, but before and after are very finicky css3 behaviors.

unfortunately, setting

.letter {
z-index:1
}

will cause before and after to inherit and as they are rendered after your main div, they will be layered above. Even setting

.letter:before, .letter:after {
 z-index: -1 !important;
}

will not fix that problem.

Similarly, setting

body {
 background: none !important;
}

will not be inherited.

Imperfect Solutions

1) make the body transparent:

body {
 background: transparent !important;
}

CodePen

This has the disadvantage that you are stuck with no background color.

Setting z-index for div and p children

.letter {
    z-index: 1;
}
.letter div {
  z-index: 2;
}
.letter p {
  z-index: 3;
}

CodePen

This has the disadvantage of making the after element be at top and look like your main paper is slightly crossed.

Answer 2

The problem seems to be that the angular-material CSS includes background: #fff for the HTML body. This, in conjuction with the z-index: -1 used in .letter:before, .letter:after in your CSS to display the paper stack under the letter is what causes your paper stack to not be displayed since it is rendered under the body.

Solution 1: If you include background: none !important; in your own CSS for the body element you can see the paper stack again (note the use of !important since the angular-material CSS is loaded after your own).

body {
  background: none !important;
  font: 14px sans-serif;
  padding: 20px;
}

body {
  background: none !important;
  font: 14px sans-serif;
  padding: 20px;
}
.letter {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 26px auto 0;
  max-width: 550px;
  minheight: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
}
.letter:before, .letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-2.5deg);
}
.letter:after {
  background: #f6f6f6;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  right: -3px;
  top: 1px;
  transform: rotate(1.4deg);
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<div class="letter">
  <p>Dear Friends,</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui, rhoncus viverra quam. Nulla tempus, augue ut consectetur facilisis, arcu elit pellentesque arcu, sed rutrum orci turpis pulvinar augue. Donec eget arcu mauris. Vestibulum tristique consequat lacus eget laoreet. Integer sed nisl sed nibh pulvinar ornare quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p>
 
</div>

<!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>

Solution 2: You can adjust the z-index of .letter (which will also adjust the z-index of .letter:before and .letter:after) to make everything display on top of the body background. Even a z-index of 1 will do the trick.

.letter {
  z-index: 1;
} 

Unfortunately in this case .letter:before and .letter:after will be rendered over the .letter so it will appear as if the top paper of your stack is a little crooked. You can find an explanation on why this happens with a reference to the relevant part of the spec in this question. If you choose this solution however you can always make the stack appear the way you want it with a bit of manipulation of the rotations and positions of the various elements

.letter {
  z-index: 1;
  transform: rotate(1.4deg);
}
.letter p {
  transform: rotate(-1.4deg);
}
.letter:before {
  transform: rotate(-3.9deg);
}
.letter:after {
  transform: rotate(-1.4deg);
}

body {
  background: #888;
  font: 14px sans-serif;
  padding: 20px;
}
.letter {
  background: #f6f6f6;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 26px auto 0;
  max-width: 550px;
  minheight: 300px;
  padding: 24px;
  position: relative;
  width: 80%;
  z-index: 1;
  transform: rotate(1.4deg);
}
.letter p {
  transform: rotate(-1.4deg);
}
.letter:before,
.letter:after {
  content: "";
  height: 98%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.letter:before {
  background: #fafafa;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  left: -5px;
  top: 4px;
  transform: rotate(-3.9deg);
}
.letter:after {
  background: #fafafa;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  right: 3px;
  top: 1px;
  transform: rotate(-1.4deg);
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<div class="letter">
  <p>Dear Friends,</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque quis rhoncus sapien facilisis. Mauris quis massa dui, rhoncus viverra quam. Nulla tempus, augue ut consectetur facilisis,
    arcu elit pellentesque arcu, sed rutrum orci turpis pulvinar augue. Donec eget arcu mauris. Vestibulum tristique consequat lacus eget laoreet. Integer sed nisl sed nibh pulvinar ornare quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo
    quam vulputate. In eu metus turpis.</p>

</div>

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>