CSS阴影阴影 [英] CSS box-shadow shadows
问题描述
对于实践和乐趣，我正在寻求在一个元素中在纯CSS中重新创建以下标志
如果你注意到，每个bar都有一个小的阴影灰色区域，它的深度感。我想在纯CSS，如果可能的话。对我来说，棘手的事情是，它看起来像他们在他们的顶部的酒吧，所以它必须在一个单独的酒吧水平，以便这样做，而不是应用一个面具到整个事情。
到目前为止，我已经能够使用伪元素和一些框阴影来创建条形，并且使用渐变和背景给予B颜色-clip：text 。
通常我会使用旋转的元素或蒙版来应用阴影，但是由于我使用box-shadows创建了条形图，我不知道我会怎么样，即使我可以，将它们应用到一个单独的阴影（从技术上讲，他们都是一个阴影，但我的意思是应用到一个酒吧，而不覆盖其他人）
好吧，我不能让这个问题打开...
我无法使用你的方法解决它。制作倾斜的阴影是可行的，使它被剪辑在圆形边框下，而不是（至少我没有找到方式）。
替代方法：使用大量背景：
.B：before {
content：'';
position：absolute;
left：-237px;
height：135px;
width：258px;
background-image：linear-gradient（0deg，＃898481，＃898481），
径向渐变（右下角的圆，＃898481 22px，透明22px） 0deg，＃898481，＃898481），
径向梯度（右下角的圆，＃898481 22px，透明22px），
线性梯度（196deg，rgba（0,0,0,0,0.9） -21px，transparent 27px），
径向渐变（右上角的圆形，#ccbcac 44px，透明30px），
线性梯度（0deg，＃ccbcac，＃ccbcac） -gradient（0deg，＃898481，＃898481），
径向渐变（右上角的圆圈，＃898481 22px，透明22px），
线性渐变（187deg，＃B46550 2px，＃f38669 24px ），
径向渐变（右上角的圆圈，＃f38669 22px，透明22px），
线性渐变（196deg，rgba（60,60,60,0.97）-21px，透明27px）
径向渐变（圆形右上角，#ccbcac 44px，透明30px），
线性渐变（0deg，＃ccbcac，＃ccbcac），
线性渐变（190deg，＃AC6D3B -11px，＃f4a668 28px），
径向渐变（右上角的圆圈，＃f4a668 22px，透明22px），
线性渐变（0deg，＃ffbf7f，＃ffbf7f）径向梯度（右上角的圆，＃ffbf7f 22px，透明22px），
径向梯度（右上角的圆，＃fccda1 44px，透明30px），
线性梯度（0deg，＃FCCDA1 ，＃fccda1）;
background-position：
185px 110px，163px 110px，163px 88px，144px 88px，106px 88px，
41px 88px，137px 88px，
142px 66px，120px 66px，
142px 44px，120px 44px，
64px 44px，42px 44px，
78px 44px，97px 22px，76px 22px，65px 0px，43px -1px，0px 0px，44px 0px;
background-size：198px 22px，22px 22px，198px 22px，22px 22px，76px 22px，96px 44px，200px 44px，198px 22px，22px 22px，198px 22px，22px 22px，96px 44px，44px 44px，200px 44px， 198px 22px，22px 22px，198px 22px，22px 22px，44px 44px，200px 44px;
background-repeat：no-repeat;
}
大多数背景用于重现您已经设计的部分有。
要获得形状，您需要一个矩形背景，左边有一个圆形。
对于阴影，有2种技巧。
很容易的一个是当所有的阴影包含在一个矩形区域。然后你可以使用相同的线性渐变，使矩形区域，只是给它一个更暗的阴影。
越复杂的部分越复杂。这里我需要为影子使用另一个单独的背景图片。
result
我只能在Chrome中验证结果。
此技巧可以在字母中使用：
更新了字母的CSS
.B {
position：absolute;
top：200px;
left：300px;
margin-top：-150px;
line-height：236px;
font-size：225pt;
font-weight：bold;
font-family：'Carrois Gothic SC'，sans-serif;
background-image：
线性梯度（187deg，＃FFBF7F，＃FFBF7F），
线性梯度（187deg，＃cc8650，＃F4A668） 195deg，＃B46550，＃F38669），
linear-gradient（187deg，＃8A7668 25px，＃AF9F88 35px），
linear-gradient（187deg，＃af9678，＃cfb698），
linear -gradient（187deg，＃dcc2a1，＃ecd2b1）;
background-position：
0px 0px，0px 9％，0px 20％，0px 30％，0px 60％，0px 100％;
background-size：200px 9％，200px 11％，200px 10％，200px 30％，200px 30％，200px 30％，200px 40％;
background-repeat：no-repeat;
color：transparent;
-webkit-background-clip：text;
}
已评论的背景CSS
background-image：linear-gradient（0deg，＃898481，＃898481），/ *最后一个大栏中的第二个小栏* /
径向渐变right，＃898481 22px，transparent 22px），
线性渐变（0deg，＃898481，＃898481），/ *最后一个大栏中的第一个小栏* /
径向渐变，＃898481 22px，transparent 22px），
linear-gradient（196deg，rgba（0，0，0，0.97）-21px，transparent 27px），/ * shadow * /
径向渐变在右上角，#ccbcac 44px，transparent 30px），/ * last big bar * /
线性渐变（0deg，＃ccbcac，＃ccbcac），
线性渐变（0deg，＃898481， 898481），/ *第二个大栏中的第二个小栏* /
径向渐变（右上角的圆圈，＃898481 22px，透明22px），
线性渐变（187deg，＃B46550 2px， f38669 24px），/ *第二大栏中的第一个小栏（阴影）* /
径向梯度（右上角的圆，＃f38669 22px，透明22px），
线性梯度（196deg，rgba （60,60,60,0.97）-21px，透明27px），/ *第二大条上的阴影* /
径向渐变（右上角的圆，#ccbcac 44px，透明30px），/ *第二大bar * /
线性渐变（0deg，＃ccbcac，＃ccbcac），
线性渐变（190deg，＃AC6D3B -11px，＃f4a668 28px） * /
径向渐变（右上角的圆，＃f4a668 22px，透明22px），
线性渐变（0deg，＃ffbf7f，＃ffbf7f），/ *顶部的第一个小栏* /
径向渐变（右上角的圆，＃ffbf7f 22px，透明22px），
径向渐变（右上角的圆，＃fccda1 44px，透明30像素），/ *顶部的大栏* /
线性梯度（0deg，＃FCCDA1，＃fccda1）;
不完美，但您可以在圆形中获得一些阴影， / p>
径向渐变（右上角的圆形，＃fccda1 42px，＃AC8D70 44px，transparent 45px）
限制是这种情况下的阴影必须与边框同心。另一种方法是设置另一个背景，可以是椭圆形。
For practice and fun, I am seeking to recreate the following logo in pure CSS in one element
If you notice, each "bar" has a small, shadowed grey area, which gives it a sense of depth. I'd like to create these in pure CSS, if possible. The tricky thing to me is that it looks like they go behind bars on top of them, so it'd have to be on an individual bar level in order to do that as opposed to applying a mask to the whole thing.
Thus far, I have been able to create the bars using a pseudo-element and some box shadows and have given the B the colors using a gradient and background-clip: text.
Normally I'd use a rotated element or mask to apply the shadows, but since I created the bars using box-shadows, I do not know how I would, or even if I can, apply them to an individual shadow (technically speaking they're all one shadow, but I mean apply it to one bar without covering others)
My code
<div class='B'>B</div>
body {
background:#FFF8E6;
}
.B {
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
line-height:236px;
font-size:225pt;
font-weight:bold;
font-family:'Carrois Gothic SC', sans-serif;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(9%, #FFBF7F), color-stop(9%, #F4A668), color-stop(19.6%, #F4A668), color-stop(19.9%, #F38669), color-stop(28.7%, #F38669), color-stop(29%, #AF9F88), color-stop(49%, #AF9F88), color-stop(49%, #cfb698), color-stop(70%, #cfb698), color-stop(70%, #ecd2b1));
color:transparent;
-webkit-background-clip: text;
}
.B:after {
content:'';
z-index:-1;
position:absolute;
left:-387px;
height:45px;
width:150px;
border-radius: 0px 0px 0px 50px;
box-shadow: 180px -12px 0 -9pt #FFBF7F, 220px -12px 0 -9pt #FFBF7F, 276px -12px 0 -9pt #FFBF7F, 215px 11px 0 -8pt #F4A668, 220px 11px 0 -8pt #F4A668, 275px 11px 0 -8pt #F4A668, 255px 33px 0 -8pt #F38669, 275px 33px 0 -8pt #F38669, 255px 56px 0 -9pt #898481, 276px 56px 0 -9pt #898481,
/* I DON'T KNOW HOW TO FLIP THESE WITHOUT ADDING AN ELEMENT */
275px 78px 0 -8pt #A4978E, 300px 101px 0 -8pt #B8A28A,
/************************************************************/
250px 90px 0 0px #CABBA8, 190px 45px 0 0px #CCBCAC, 150px 0 0 0px #FCCDA1;
}
Now, I don't think this is possible, but I'm always surprised by the ingenuity that SO users have.
TL,DR How can I create these diagonal shadows without adding more elements? I'd be open to alternate ways than the method I'm using if needed
EDIT: Here is the final result
Well, I couldn't leave that question open ...
I haven't been able to solve it using your approach. Making the inclined shadows was doable, making it clipped under the circular borders, not (at least I haven't find the way).
Alternative: using a huge amount of backgrounds:
.B:before {
content:'';
position:absolute;
left: -237px;
height:135px;
width: 258px;
background-image: linear-gradient(0deg,#898481,#898481),
radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
linear-gradient(0deg,#898481,#898481),
radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px),
radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
linear-gradient(0deg,#ccbcac,#ccbcac),
linear-gradient(0deg,#898481,#898481),
radial-gradient(circle at top right, #898481 22px, transparent 22px),
linear-gradient(187deg,#B46550 2px,#f38669 24px),
radial-gradient(circle at top right, #f38669 22px, transparent 22px),
linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px),
radial-gradient(circle at top right, #ccbcac 44px, transparent 30px),
linear-gradient(0deg,#ccbcac,#ccbcac),
linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px),
radial-gradient(circle at top right, #f4a668 22px, transparent 22px),
linear-gradient(0deg,#ffbf7f,#ffbf7f),
radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
radial-gradient(circle at top right, #fccda1 44px, transparent 30px),
linear-gradient(0deg,#FCCDA1,#fccda1);
background-position:
185px 110px, 163px 110px, 163px 88px, 144px 88px, 106px 88px,
41px 88px, 137px 88px,
142px 66px, 120px 66px,
142px 44px, 120px 44px,
64px 44px,42px 44px,
78px 44px, 97px 22px, 76px 22px, 65px 0px, 43px -1px, 0px 0px, 44px 0px;
background-size: 198px 22px, 22px 22px,198px 22px, 22px 22px, 76px 22px, 96px 44px, 200px 44px,198px 22px, 22px 22px,198px 22px, 22px 22px, 96px 44px, 44px 44px, 200px 44px, 198px 22px, 22px 22px, 198px 22px, 22px 22px, 44px 44px, 200px 44px;
background-repeat: no-repeat;
}
Most of the backgrounds are used to reproduce the part of the design that you already had. To get the shape, you need a rectangular background with a circular one at the left.
For the shadows, there are 2 techniques used.
The easy one is when you have all the shadow contained in a rectangular region. Then you can get it using the same linear gradient that is making the rectangular region,just giving it a darker shade.
The more difficult are those that overlap the circle part. Here I needed to use another separate background image for the shadow.
result
I have only validated the result in Chrome.
Of course this technique can be used in the letter:
updated CSS for the letter
.B {
position:absolute;
top: 200px;
left: 300px;
margin-top:-150px;
line-height:236px;
font-size:225pt;
font-weight:bold;
font-family:'Carrois Gothic SC', sans-serif;
background-image:
linear-gradient(187deg,#FFBF7F,#FFBF7F),
linear-gradient(187deg,#cc8650,#F4A668),
linear-gradient(195deg,#B46550,#F38669),
linear-gradient(187deg,#8A7668 25px,#AF9F88 35px),
linear-gradient(187deg,#af9678,#cfb698),
linear-gradient(187deg,#dcc2a1,#ecd2b1);
background-position:
0px 0px, 0px 9%, 0px 20%, 0px 30%, 0px 60%, 0px 100%;
background-size: 200px 9%, 200px 11%, 200px 10%, 200px 30%, 200px 30%, 200px 30%, 200px 40%;
background-repeat: no-repeat;
color: transparent;
-webkit-background-clip: text;
}
commented backgrounds CSS
background-image: linear-gradient(0deg,#898481,#898481), /* second small bar in last big bar */
radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
linear-gradient(0deg,#898481,#898481), /* first small bar in last big bar */
radial-gradient(circle at bottom right, #898481 22px, transparent 22px),
linear-gradient(196deg,rgba(0, 0, 0, 0.97) -21px,transparent 27px), /* shadow */
radial-gradient(circle at top right, #ccbcac 44px, transparent 30px), /* last big bar */
linear-gradient(0deg,#ccbcac,#ccbcac),
linear-gradient(0deg,#898481,#898481), /* second small bar in second big bar */
radial-gradient(circle at top right, #898481 22px, transparent 22px),
linear-gradient(187deg,#B46550 2px,#f38669 24px), /* first small bar in 2nd big bar (shadowed) */
radial-gradient(circle at top right, #f38669 22px, transparent 22px),
linear-gradient(196deg,rgba(60, 60, 60, 0.97) -21px,transparent 27px), /* shadow on second big bar */
radial-gradient(circle at top right, #ccbcac 44px, transparent 30px), /* second big bar */
linear-gradient(0deg,#ccbcac,#ccbcac),
linear-gradient(190deg,#AC6D3B -11px,#f4a668 28px), /* second small bar on top (shadowed) */
radial-gradient(circle at top right, #f4a668 22px, transparent 22px),
linear-gradient(0deg,#ffbf7f,#ffbf7f), /* first small bar on top */
radial-gradient(circle at top right, #ffbf7f 22px, transparent 22px),
radial-gradient(circle at top right, #fccda1 44px, transparent 30px), /* big bar on top */
linear-gradient(0deg,#FCCDA1,#fccda1);
Not perfect, but you can get some shadow in the circles with another step in the radial gradient:
radial-gradient(circle at top right, #fccda1 42px, #AC8D70 44px, transparent 45px)
The limit is that the shadow in that case must be concentric to the border. The alternative would be to set another background, may be an elliptical one.
这篇关于CSS阴影阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
