CSS框阴影阴影
Zac*_*ier 7 css shadow css3 box-shadow
为了实践和乐趣,我想在一个元素中用纯CSS重新创建以下徽标
如果你注意到,每个"条形"都有一个小的阴影灰色区域,这给它一种深度感.如果可能的话,我想在纯CSS中创建它们.对我来说最棘手的事情是它看起来像是在它们的顶部后面,所以它必须在单独的条形水平上才能做到这一点,而不是在整个事物上应用蒙版.
到目前为止,我已经能够使用伪元素和一些框阴影创建条形,并使用渐变和B给出了颜色background-clip: text.
通常我会使用一个旋转的元素或掩盖申请阴影,但因为我创造了采用箱阴影吧,我不知道我应该怎样,或者即使我能,并将其应用到个人的影子(从技术上来说,他们"所有的阴影,但我的意思是将它应用于一个酒吧,而不覆盖其他人
我的代码
<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;
}
现在,我不认为这是可能的,但我总是对SO用户的聪明才智感到惊讶.
TL,DR如何在不添加更多元素的情况下创建这些对角阴影？如果需要的话,我会采用其他方式而不是我正在使用的方法
编辑:这是最终的结果
好吧，我不能让这个问题悬而未决......
我用你的方法没能解决。制作倾斜的阴影是可行的，使其夹在圆形边框下，而不是（至少我还没有找到方法）。
替代方案：使用大量背景：
.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;
}
大多数背景用于重现您已有的设计部分。要获得形状，您需要一个矩形背景，左侧有一个圆形背景。
对于阴影，使用了两种技术。
最简单的情况是当您将所有阴影包含在一个矩形区域中时。然后你可以使用与矩形区域相同的线性渐变来获得它，只是给它一个较暗的阴影。
更难的是那些与圆形部分重叠的部分。这里我需要使用另一个单独的背景图像作为阴影。
结果
我只在 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:
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;
}
评论背景 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);
并不完美，但您可以通过径向渐变的另一个步骤在圆圈中获得一些阴影：
radial-gradient(circle at top right, #fccda1 42px, #AC8D70 44px, transparent 45px)
限制是这种情况下的阴影必须与边界同心。另一种方法是设置另一个背景，可能是椭圆形的。