如何修改此页面剥离效果，而不会弄乱？ [英] How do I modify this page peel effect without messing it up?

问题描述

我想尝试调整这里显示的页面剥离效果。我的小提琴是这里

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

m尝试进行2个修改：

I'm trying to make 2 modifications:

1. 将宽度增加到90％（有800px）
   
   
   
   • 如果我这样做，那么这会拧紧阴影效果，在阴影处显示一些空格。
   
   

• 我尝试过各种类别的组合：shadow-bottom shadow-top，shadow-right shadow-left等。

如何完成？

<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

推荐答案

我创建了一个演示，其中包含预期效果。

EDIT：通过修改原始的百分比宽度为可变宽度bug提供了解决方案，其中除了伪元素宽度之外的每个维度的固定值为40％。

catered for variable width bug by fixing the percentage-based width of the original, which gave fixed values for every dimension except pseudo element width, at 40%. 40% of 800px (the container's specified width) = 320px, which is what we'll secify here to resolve the clipped shadows.

另一个问题是，原始的作者，我们将在这里解析剪辑的阴影。以这样的方式编写代码，阴影只会应用到 .page-curl 元素：我分离了CSS规则，使 .page -curl 只管理元素的内部外观。

The other problem is that the original author wrote the code in such a way that shadows would only be applied to the .page-curl element: I separated out the CSS rules such that .page-curl only govern's the element's internal appearance.

修改的CSS意味着您可以使用阴影效果创建任意数量的元素，在像padding，border，background，width等属性中：

The revised CSS means you can create as many elements as you want with shadow effects, without bringing in properties like padding, border, background, width, etc:

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

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

Basically, this code says that if an element has a class containing the text shadow, we can give it these ::before and ::after elements. Next, the rules dictating specific directions have got the .page-curl class chucked out.

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

At this point we're still limited to 2 shadows per element (we can only have one ::before and one ::after element): the solution, then, is to create 2 nested divs:

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

因此，第一个div负责右侧的顶部和底部阴影，

So the 1st div takes care of the top and bottom shadows on the right, the 2ndtakes care of those on the left.

顺便提及，第二个具有所有 .page-curl 属性， $ c> .container 上的第一个课程照顾你的90％宽度的要求。

Incidentally, the 2nd has all the .page-curl properties, and the .container class on the 1st takes care of your 90% width requirement.

这篇关于如何修改此页面剥离效果，而不会弄乱？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！