1

I am trying to adapt the page peel effect shown here. My fiddle is here

I'm trying to make 2 modifications:

  1. Increase the width to 90% (they have 800px)
    • If I do this, then this screws up the dropshadow effect, showing some whitespace where the shadows should be
  2. Put the page peel on all 4 corners.
    • I've tried all sorts of combinations of the classes: "shadow-bottom shadow-top", "shadow-right shadow-left", among others.

How do I accomplish both?

<div class="page-curl shadow-bottom">
    <h2>Bottom shadow, both sides</h2>
    <p>Freegan fixie banh mi, pickled art party trust fund iphone blog etsy occupy cardigan fap ethnic. Sartorial sriracha vinyl lo-fi cardigan. Tofu fingerstache vegan, shoreditch marfa pour-over occupy 8-bit american apparel four loko fixie lomo vice. Freegan irony chambray jean shorts PBR selvage. PBR messenger bag VHS, umami sustainable godard portland single-origin coffee. Wolf whatever butcher messenger bag yr american apparel fap. Tattooed master cleanse cred, narwhal gluten-free sriracha organic next level put a bird on it.</p>
</div>
....full code on my jsfiddle link
4

2 回答 2

2

我在这里创建了一个具有预期效果的演示。

编辑：通过修复基于百分比的原始宽度来解决可变宽度错误，该宽度为除伪元素宽度之外的每个维度提供了固定值，为 40%。800px 的 40%（容器的指定宽度）= 320px，这是我们将在此处指定以解决剪裁阴影的内容。

另一个问题是原作者编写代码时只对.page-curl元素应用阴影：我分离出 CSS 规则，.page-curl只控制元素的内部外观。

修改后的 CSS 意味着您可以使用阴影效果创建任意数量的元素，而无需引入诸如填充、边框、背景、宽度等属性：

[class*=shadow] {
    position: relative;
}

[class*=shadow]:before, 
[class*=shadow]:after {
    background: none;
    bottom: 12px;
    -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.5);
    content: "";
    height: 10px;
    left: 12px;
    position: absolute;
    width: 320px;
    z-index: -1;
    -moz-transform: skew(-4deg) rotate(-4deg);
    -webkit-transform: skew(-4deg) rotate(-4deg);
    transform: skew(-4deg) rotate(-4deg);
}

[class*=shadow]:after {
    -moz-transform: skew(4deg) rotate(4deg);
    -webkit-transform: skew(4deg) rotate(4deg);
    transform: skew(4deg) rotate(4deg);
    left: auto;
    right: 12px;
}

基本上，这段代码说如果一个元素有一个包含 text 的类shadow，我们可以给它这些::before和::after元素。接下来，规定具体方向的规则已经让.page-curl班级被淘汰了。

在这一点上，我们仍然限制每个元素有 2 个阴影（我们只能有一个::before和一个::after元素）：解决方案是创建 2 个嵌套 div：

<div class="container shadow-top-bottom shadow-right">
    <div class="page-curl shadow-top-bottom shadow-left">
    </div>
</div>

所以第一个 div 负责处理右侧的顶部和底部阴影，第二个负责处理左侧的阴影。

顺便说一句，第 2 个具有所有.page-curl属性，.container第 1 个类负责您 90% 的宽度要求。

于 2013-03-07T19:46:14.790 回答
0

果皮阴影不会那么高，但看起来仍然很棒！对以下两项进行以下小的更改，它将为您解决此问题：

这是它的 jsFiddle，这 是它在页面上的样子

.shadow-top-bottom.shadow-left:after {
display: block;
bottom: auto;
top: 20px; /* change from top: 15px; to top: 20px;*/
right: auto;
left: 12px;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);}

.shadow-top-bottom.shadow-right:before {
display: block;
bottom: auto;
top: 20px; /* change from top: 15px; to top: 20px;*/
right: 12px;
left: auto;
-moz-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);
box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.5);}
于 2013-03-08T09:54:43.860 回答