CSS透明长阴影 [英] CSS Transparent Long Shadows
问题描述
所以我的任务是创建长阴影,但在带纹理的背景。在线的其他教程都是如何做的一个坚实的背景,看起来非常可怕的纹理或图像的背景。
So I was tasked with creating long shadows but on a textured background. The other tutorials online are all how to do it with a solid background which looks pretty terrible on textures or images for backgrounds.
我很接近它,试图几个不同的技术,但我来到两个可能性,每个有问题,所以如果任何人可以帮助我调试或者将非常感谢。这些都不是跨浏览器,我只是想弄明白最小如果它是可行的,请忽略缺少前缀等。
I got pretty close with it, trying a few different techniques but I came down to two possibilities, each with problems, so if anyone can help me debug either it would be greatly appreciated. These are not cross browser, I am just trying to figure out bare minimum if it is doable so please ignore lack of prefixes etc.
类型1:纯CSS
在CSS中使用Skew选项我可以在左边和底部添加一个渐变的两个块。然后倾斜每个45度,我接近所需的效果,但有一条线之间的阴影不完全满足,我不能得到走开,没有重叠:
http://jsfiddle.net/mfeola/4bfrkagu/
.block:before, .block:after{
content:"";position:absolute; display:block;
}
.block:before{top:0; left:100%; height:100%; width:0; padding-right:100%;
transform-origin: 0% 0%;
transform: skew(0deg, 45deg);
background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
}
.block:after{top:100%; left:0; width:100%; height:0; padding-top:100%;
transform-origin: 0% 0%;
transform: skew(45deg, 0deg);
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
}
类型2:Javascript
旋转数学计算出来,能够旋转梯度框,使一个完美的阴影。问题是如果盒子的大小改变,阴影的角度改变,这不工作,我想要做的。我希望它普遍工作。当我计算出数学时,我在这个文章中包含了一个textarea:
http://jsfiddle.net / mfeola / tpdhLqs1 /
Type 2: Javascript With rotational math figured out, I was able to rotate a gradient box to make a perfect shadow. The problem is if the size of the box changes, the angle of the shadow changes and that doesn't work for what I am trying to do. I would like it to work universally. I included a textarea on this one when I was figuring out the math: http://jsfiddle.net/mfeola/tpdhLqs1/
推荐答案
您可以尝试添加边框渐变以填补空白。
You could try adding a border gradient to fill the gap.
尝试使用此链接: https:// css -tricks.com/examples/GradientBorder/
无法获得正确的颜色,但我认为您应该能够使用一些边框渐变格式如下:
Couldn't get the exact colors right, but I think you should be able to do this using some border gradient formatting as follows:
.top-to-bottom {
border-right: 0 !important;
border-left: 0 !important;
border-top: 0 !important;
border: 1px solid;
-webkit-border-image:
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,1))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
-moz-border-image:
-moz-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
-o-border-image:
-o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
border-image:
linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0, 0, 0, 1)) 1 100%;
}
在这里搞乱了: http://jsfiddle.net/4bfrkagu/13/ 但无法得到着色权 - 我想我可以把它留给你。
Was messing around with it a bit here: http://jsfiddle.net/4bfrkagu/13/ but couldn't get the coloring right - figured I could leave that to you.
这篇关于CSS透明长阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!