我正在尝试在CSS中重新创建Alexander Plyuto's modern skeumorphic style:
换句话说,我可以在顶部和左侧有一个彩色阴影,而在底部和右侧有不同颜色的阴影吗?
我看过MDN for box-shadow
,我可以看到box-shadow
支持多个值,但与其他CSS一样,多个值实际上是全尺寸阴影,而不是像其他CSS一样从右上到左下在彼此之上:
多个框阴影的z顺序与多个文本阴影相同(第一个指定的阴影在顶部)。
是否可以在CSS中创建此效果?
请注意,'no'是可以接受的答案,但是不能创建其他HTML(即,不使用CSS)。 HTML中的按钮通常用box-shadow
正如我在重新打开注释之前的评论中所建议的那样,我的建议是使用伪元素来实现双重阴影效果。您可能只用一个就可以实现这一目标,但是这是我为了说明这一点而做出的快速和肮脏的实例:
<button>A button</button>
body {
background: #424242;
}
.button {
box-sizing: border-box;
display: flex; /* Just to center vertically */
align-items: center;
justify-content: center;
width: 160px;
height: 55px;
border-radius: 1em;
text-align: center;
font-family: sans-serif;
font-weight: 600;
color: #2b2a2e;
text-decoration: none;
background: linear-gradient(48deg, #c4ccd1, #e1e5e8);
position: relative;
z-index: initial;
}
.button::before, .button::after {
content: "";
display: block;
position: absolute;
width: 160px;
height: 35px;
background: transparent;
border-radius: 1em;
z-index: -1;
opacity: 0.65;
}
.button::before {
top: -1px;
left: -1px;
background-color: #fff;
box-shadow: 0 0 10px 5px #fff;
}
.button::after {
bottom: -1px;
right: -1px;
background-color: #b6c7e7;
box-shadow: 0 0 10px 5px #b6c7e7;
}
发布为社区Wiki,所以我不了解因果报酬-尽管有多个用户与我联系并提供了答案,但添加它们似乎很公平。如果/当这些人再次出现时,我将删除这些人并将其授予可接受的答案。
简而言之:CSS本身没有提供直接在不同侧面设置不同阴影颜色的方法。有两种方法可以实现相似的外观,但是可能无法复制演示-参见下文:
- 使用两个阴影(如前所述),但要安排偏移,以便一个覆盖顶部和左侧,另一个覆盖底部和右侧。正如评论员所指出的,梯度可能会重叠。可能不是可以复制演示,因为演示的传播范围很广,但是没有重叠,这在CSS中无法实现,因为阴影堆叠在顶部彼此的。
<a href="#" class="button">Request</a>
body { background: lightgrey; } button { border: none; background-color: #efefef; color: black; font-size: 24px; text-transform: uppercase; padding: 20px; margin: 50px; position: relative; border-radius: 10px; box-shadow: -2px -2px 8px 4px white, 2px 2px 8px 4px #222; }
- 使用具有渐变背景并且本身模糊的伪元素。也可能无法在此处复制演示,因为渐变开始处的暗度较高意味着模糊的阴影不均匀:
<button>This is a button</button>
body { background: lightgrey; } button { border: none; background-color: white; color: black; font-size: 24px; text-transform: uppercase; padding: 20px; margin: 50px; position: relative; border-radius: 5px; } button::after { content: ''; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: blue; background: linear-gradient(350deg, rgba(10,10,10,0.8) 0%, rgba(255,255,255,0.8) 100%); filter: blur(10px); }