使用box-shadow和transform进行不正确的堆栈 [英] Incorrect stack with box-shadow and transform
问题描述
我已经创建了一个形状,表示一个具有向底部变大的阴影的页面。
body {background:#dddddd; } div {background:white; margin:40px auto; height:300px; width:300px;位置:相对; padding:10px;} div:before,div:after {height:96%; z指数:-10; position:absolute; content:; left:8px; top:2%;宽度:30%; max-width:300px;背景:透明; box-shadow:-10px 0px 10px rgba(0,0,0,0.5); transform:rotate(1.5deg);} div:after {transform:rotate(-1.5deg);} right:8px; left:auto; box-shadow:10px 0px 10px rgba(0,0,0,0.5);}
< div>< / div>
我需要这个旋转,但当我尝试添加 transform:rotate(10deg)
, box-shadow $ c $
body {background:#dddddd;} div {background:white; margin:40px auto; height:300px; width:300px;位置:相对; padding:10px; transform:rotate(10deg);} div:before,div:after {height:96%; z指数:-10; position:absolute; content:; left:8px; top:2%;宽度:30%; max-width:300px;背景:透明; box-shadow:-10px 0px 10px rgba(0,0,0,0.5); transform:rotate(1.5deg);} div:after {transform:rotate(-1.5deg);} right:8px; left:auto; box-shadow:10px 0px 10px rgba(0,0,0,0.5);}
< div>< / div>
我发现这个问题:哪些CSS属性会创建堆叠上下文? / a>但似乎没有为我的要求提出的解决方案。
有没有什么好的解决方案,在我的情况下工作。我不介意他们是 SVG
,过滤器
,画布
如果IE支持不是强制性的,仍然推荐vals的回答。
方法1:透视变换
这几乎类似于你使用的,除了它使用一个伪元素旋转透视生成阴影。因为只使用了一个伪元素,所以另一个伪元素可以用来在阴影之上添加一个白色前景。
body {background: dddddd;} div {position:relative; height:300px; width:300px; padding:10px; margin:40px auto; transform:rotate(10deg);} div:before,div:after {position:absolute; content:''; top:0px;} div:before {height:100%; width:100%; left:0px; background:white;} div:after {height:98%;宽度:97%;左:1.5%; transform-origin:bottom; transform:perspective(125px)rotateX(1deg); box-shadow:10px 0px 10px rgba(0,0,0,.5),-10px 0px 10px rgba(0,0,0,.5); z-index:-1;}
< div& < / div>
方法2:线性渐变
我们可以使用线性渐变
其效果类似于盒阴影所产生的效果。但是你可以看到在输出,它不完全匹配一个阴影,因为模糊的区域是不一样的。
这里,我们使用以下内容:
- 另一个小角度线性渐变图像(
到左上角
到右上角
)在方块右侧产生阴影。 - 一个大的线性梯度图像为白色面积(几乎是纯色)。此处使用渐变而不是纯色,因为渐变图片的大小可以控制。
body {background:#dddddd;} div {margin:40px auto; height:300px; width:300px; transform:rotate(10deg); backface-visibility:hidden;背景:线性梯度(至右,透明0.1%,白色0.1%),线性梯度(至左上,rgba(0,0,0,0)0%,rgba(0,0,0,3) 5%,透明50%),线性梯度(右上,rgba(0,0,0,0)0%,rgba(0,0,0,3)5%,透明50% background-size:280px 100%,10px 97%,10px 97%; background-position:10px 0px,left top,right top;背景重复:无重复; background-origin:border-box;}
< script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< div>< / div>
渐变的底部仍然没有得到在 box-shadow
输出。
body {background :#dddddd;} div {margin:40px auto; height:300px; width:300px; transform:rotate(10deg); backface-visibility:hidden;背景:线性梯度(至右,透明0.1%,白色0.1%),线性梯度(至左上,rgba(0,0,0,0)0%,rgba(0,0,0,3) 5%,透明50%),线性梯度(右上,rgba(0,0,0,0)0%,rgba(0,0,0,3,0),透明50%梯度(至左下,rgba(0,0,0,0),rgba(0,0,0,3)5%,透明60%),线性梯度(右下,rgba(0,0, 0,0),rgba(0,0,0,3)5%,透明70%); background-size:280px 100%,10px 97%,10px 97%,10px 2.5%,10px 2.5%; background-position:10px 0px,left top,right top,left 99.25%,right 99.25%;背景重复:无重复; background-origin:border-box;}
< script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< div>< / div>
I have created a shape which represents a page with a shadow that gets bigger towards the bottom.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I need this to be rotated but when i try to add transform: rotate(10deg)
, the box-shadow
illusion gets ruined and goes on top of the parent layer.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: rotate(10deg);
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}
<div></div>
I have found this question: Which CSS properties create a stacking context? but there doesn't seem to be a proposed solution for my requirement.
Would there be any good solutions which would work in my case. I do not mind if they are SVG
, filter
, canvas
or any thing else as long as it is supported reasonably well.
Note: This answer does not describe how to fix the stacking context problem that is seen in your approach. This just provides a couple of alternate approaches that could be used to achieve a similar effect. Advantage of these approaches is that they should work in IE10+ and does not require any extra elements.
I would still recommend vals' answer if IE support is not mandatory.
Method 1: Perspective Transform
This is almost similar to the one that you had used except that it uses a single pseudo-element rotated with perspective to produce the shadows. Since only one pseudo-element is utilized, the other pseudo can be used to add a white foreground above the shadows.
body {
background: #dddddd;
}
div {
position: relative;
height: 300px;
width: 300px;
padding: 10px;
margin: 40px auto;
transform: rotate(10deg);
}
div:before,
div:after {
position: absolute;
content: '';
top: 0px;
}
div:before {
height: 100%;
width: 100%;
left: 0px;
background: white;
}
div:after {
height: 98%;
width: 97%;
left: 1.5%;
transform-origin: bottom;
transform: perspective(125px) rotateX(1deg);
box-shadow: 10px 0px 10px rgba(0, 0, 0, .5), -10px 0px 10px rgba(0, 0, 0, .5);
z-index: -1;
}
<div></div>
Method 2: Linear Gradients
We can use linear-gradient
background images and position them appropriately to produce an effect similar to the one produced by the box-shadows. But as you can see in the output, it doesn't quite match up to a shadow because the blurred areas are not the same.
Here, we make use of the following:
- One small angled linear gradient image (
to top left
) to produce the shadow on the left side of the box. - Another small angled linear gradient image (
to top right
) to produce the shadow on the right side of the box. - A large linear-gradient image for the white colored area (which is almost a solid color). A gradient is used here instead of a solid color because the size of a gradient image can be controlled.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%);
background-size: 280px 100%, 10px 97%, 10px 97%;
background-position: 10px 0px, left top, right top;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
The bottom of the gradient still doesn't get the blur that is seen in the box-shadow
output. If needed, this can be achieved to some extent by adding even more gradients like in the below snippet.
body {
background: #dddddd;
}
div {
margin: 40px auto;
height: 300px;
width: 300px;
transform: rotate(10deg);
backface-visibility: hidden;
background: linear-gradient(to right, transparent 0.1%, white 0.1%), linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 5%, transparent 50%), linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 60%), linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 5%, transparent 70%);
background-size: 280px 100%, 10px 97%, 10px 97%, 10px 2.5%, 10px 2.5%;
background-position: 10px 0px, left top, right top, left 99.25%, right 99.25%;
background-repeat: no-repeat;
background-origin: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>
这篇关于使用box-shadow和transform进行不正确的堆栈的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!