角料设计中的纸叠(css3)

Question

我正在使用Angular Material Design,我正在尝试创建下面的codepen链接中给出的纸叠效果:

使用CSS3的纸叠

它工作正常,但是当我添加Angular Material Design CSS时,它会中断(没有更多的纸叠UI)请你帮我解决这个问题,下面是添加了Material Design CSS的链接.

相同的纸叠代码+材料设计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

问题似乎是角度材料CSS包含background: #fffHTML主体.这与一起选择了z-index: -1用在.letter:before, .letter:after你的CSS信件下方显示该纸堆是什么原因造成的,因为它身下呈现为不显示你的纸堆.

解决方案1: 如果你background: none !important;在自己的CSS中包含body元素,你可以再次看到纸叠(注意使用!important,因为angular-material CSS是在你自己之后加载的).

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>

方案2: 您可以调整z-index的.letter(这也将调整的z指数.letter:before和.letter:after),使对身体的背景上一切显示.即便是z-index1也会做到这一点.

.letter {
  z-index: 1;
} 

不幸的是,在这种情况下.letter:before,.letter:after它将被渲染,.letter因此它看起来好像你的堆栈的顶部纸张有点弯曲.您可以在此问题中参考规范的相关部分找到有关为什么会发生这种情况的说明.如果你选择这个解决方案,你可以随时通过对各种元素的旋转和位置的操作来使堆栈显示出你想要的方式

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

Answer 2

克里斯蒂娜是在正确的轨道上,但是before和after非常挑剔CSS3的行为.

不幸的是,设定

.letter {
z-index:1
}

将导致before和after继承,并且当它们在你的主div 之后呈现时,它们将在上面分层.甚至设定

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

不会解决这个问题.

同样,设置

body {
 background: none !important;
}

不会继承.

不完美的解决方案

1)使身体透明:

body {
 background: transparent !important;
}

CodePen

这样做的缺点是你没有背景颜色.

为div和p children设置z-index

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

CodePen

这样做的缺点是使after元件位于顶部,看起来主要纸张略微交叉.