Figma文件中一个阴影,我花了大约四十分钟的时间尝试匹配,设计师给了我一个颜色,一个X和Y偏移,一个模糊,一个扩展,这是你需要的一切,我仍然无法让它看起来正确,浏览器中的阴影比模型更重,更平坦,我一直在上下推动模糊半径,就像这样可以修复它。
不会,因为模型有两个阴影堆叠在一起。一个紧密的暗色用于接触,一个宽柔的用于环境光。Figma 将它们显示为面板中的单独层。我已经崩溃了。一旦我将它们写成逗号分隔的对,比赛就立即进行了。
CSS属性就是这个攻略里的事情,没有一个复杂,都有一两个从语法上看不明显的行为,而且你能输给其中任何一个一个下午,这个攻略就是那些行为,写下来。
这里链接的每个生成器都在您的浏览器中运行,在拖动时更新实时预览,并将 CSS 交给您。我在 [toolz。dev] 上构建它们(/并不断使用它们,主要是因为阅读四值速记比查看矩形更难。
TL;博士: 用 盒子阴影 为深度, 文本阴影 为发光和轮廓, 边界半径 对于包括椭圆形在内的角, CSS 过滤器 对于模糊、亮度和颜色效果, 玻璃化 对于磨砂板, 新形态 对于柔软的凸起表面, 梯度 对于背景,以及 CSS 单位转换器 rem 中需要 px 时,它们都运行客户端并带有实时预览,值得携带的两个规则:真实的阴影是分层的,并且
backdrop-filter需要它背后的东西来模糊。
我需要哪台生成器?
| 你想要 | 财产 | 工具 |
|---|---|---|
| 一张从页面上移除的卡 | box-shadow |
盒子阴影 |
| 发光、勾勒或浮雕文本 | text-shadow |
文本阴影 |
| 圆形或药丸形的角 | border-radius |
边界半径 |
| 模糊、暗淡、不饱和或使元素着色 | filter |
CSS 过滤器 |
| 照片上有一块磨砂面板 | backdrop-filter |
玻璃化 |
| 一个看起来压在表面的软按钮 | 分层 box-shadow |
新形态 |
| 颜色过渡背景 | linear-gradient |
梯度 |
| 将 24px 变成 rem | 没有 | 单向转换器 |
本指南的其余部分是每个人的行为及其咬合位置。
盒子阴影如何运作?
速记是五个值和一个颜色:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
Offsets移动阴影。blur软化它的边缘, 向外扩散大约一半的模糊值在每个方向。spread增长或缩小阴影之前, 模糊涂抹, 负的扩散是阴影的诀窍, 坐在一个元素下而不是光环。
人们怀念的部分:阴影堆栈。 逗号分隔的列表向后渲染,顶部的第一个阴影:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
That pair是为什么设计师's的影子比你的好看,一个影子读作贴纸,两个读作有重量的物体,The 盒子阴影生成器 让您添加图层并单独拖动每个图层,这是调整它们的唯一明智方法。
inset 在边框内移动阴影,这就是获得看起来凹进的输入或新形态表面的内半部的方式。
在真实项目中让我感到困惑的一张表演说明:动画 box-shadow 强制重新粉刷每一帧。如果您想在悬停时举起一张卡片,请使用动画 transform 并交叉淡入淡出第二个元素,它承载着更大的阴影。 MDN 框阴影参考 完整记录语法。
除了阴影之外,文本阴影还有什么好处?
同样的想法,少一个值。 text-shadow 没有传播:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
它有趣的用途根本不是阴影。
轮廓。 4个硬影在零模煳,每对角线一个,假一笔绕文字。比重 -webkit-text-stroke 但它无处不在,并且在字形之外渲染而不是分裂差异:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
发光。 零偏移、大模糊、饱和颜色、重复两到三次以增强强度。
图像的易读性。 白色文本下单个柔和的暗影在背景是您无法控制的照片时为您购买对比度,它不能替代适当的稀松布,也不会保存失败的对比度,但它可以阻止下降器消失在明亮的补丁中。
在上面构建所有三个 文本阴影生成器。如果您正在追逐对比度要求而不是效果,请对照检查结果 世界海关总署 与 颜色对比检查器 而不是用眼球观察它。
为什么边框半径取八个值?
Yi大部分人用, 完整形式是两组四人, 用斜杠隔开:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
Slash前:每个角的水平半径,从左上顺时针方向,之后:垂直半径,给两者,每个角都变成椭圆而不是四分之一圆,这就是你在没有SVG的情况下得到有机斑点形状的方法。
两种行为值得了解。
百分比针对不同的轴解析。 水平半径为 % 是元素's宽度的百分比,其高度的垂直之一。所以 border-radius: 50% 在矩形上给出的是椭圆,而不是圆形矩形,这第一次给人们带来了惊喜。
当浏览器重叠时,它们的半径会缩小。 2个相邻半径加起来超过它们共用的一边,则所有半径都按比例缩小,直到它们贴合为止,你不能溢出形状,这就是为什么 border-radius: 9999px 可靠地生产药丸。
的 边界半径生成器 使用每个角落的滑块暴露所有八个值并发出最短的有效速记,这是值得拥有的,因为用手写斜线形式确实令人不快。
CSS过滤器能做什么,它们需要花多少钱?
filter 将图形操作应用于元素及其内部的所有内容:
filter: blur(4px) brightness(1.1) saturate(1.2);
Functions 从左到右组成,顺序改变结果,模煳再提亮与提亮再提亮不一样。
| 功能 | 做 | 注意 |
|---|---|---|
blur() |
高斯模糊 | 大半径下昂贵;模糊边缘向外 |
brightness() |
增加轻盈度 | 1 个以上的剪辑突出显示为白色 |
contrast() |
从中灰色推值 | 粉碎细节快速 |
grayscale() |
消除饱和度 | 比重复资产便宜 |
sepia() |
温暖的音调地图 | 结合 hue-rotate() 为其他色调 |
hue-rotate() |
将色调移动一个角度 | 不保留感知到的轻盈感 |
drop-shadow() |
阿尔法之后的阴影 | 不一样 box-shadow的,按照实际形状 |
最后一行是值得记住的一行。 box-shadow 阴影边框,因此徽标的透明 PNG 会获得矩形阴影。 filter: drop-shadow() 追踪 alpha 通道并跟踪徽标本身。
成本是真实的。过滤器将元素推到自己的合成层上,并且 blur() particular大面积贵,按键就好,整版叠加低端手机想两下。 MDN's滤波器参考 列出了每个函数及其插值行为。
尝试组合 CSS 滤波器生成器的,它并排显示预览和确切的声明。
如何构建有效的玻璃化面板?
磨砂玻璃是完成这项工作的一项属性:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter 过滤什么是 后面 素而不是元素本身,由此得出三样东西,几乎占到了每一个"为什么我的玻璃看起来像一个灰色的盒子"问题。
它背后需要一些东西。 在平面背景颜色上,模糊的背景是相同的平面颜色。效果仅存在于照片、梯度或重叠内容上。
背景必须是半透明的。 1个完全不透明的背景,把模煳的背景完全隐藏起来,10%到25%之间的白色是通常的范围。
饱和是它的卖点。 真正的玻璃浓缩物颜色。 saturate(180%) 除了模糊之外,磨砂玻璃和污迹之间的区别。
添加发际线边框,因为玻璃有边缘,并在发货前检查对比度:模糊照片上的文本会通过或失败,具体取决于照片,并且在下一张照片上完美读取英雄图像的面板可能无法读取。
的 玻璃化生成器 预览实际图像,这比本指南中的任何其他效果更重要。
新形态值得使用吗?
Neumorphism, 或软UI, 使元素看起来从背景挤压而不是漂浮在其上方两个阴影, 对角,一个比表面轻一个更暗:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
将它们交换为按下状态,或使用 inset 两者都具有雕刻外观。
该技术有一个硬约束: 元素及其背景必须是相同的颜色。效果完全是两个阴影,因此不同背景上的新变形按钮停止读取为挤压,并开始读取为破碎。
它还存在一个值得诚实对待的可达性问题。整个美学的构造对比度较低,而一个仅供奉软影的按钮可能会失败 WCAG's非文字对比度要求 为交互组件,如果使用它,给按钮一个真实的边框或一个不依赖于阴影的焦点样式。
的 新形态生成器 从您的表面颜色中得出两种阴影颜色,这是手工制作的繁琐部分。
我什么时候需要单位转换器?
比您想象的更频繁,因为设计工具会说 px,而好的 CSS 通常不会。
rem 是相对于根字体大小,因此当用户更改浏览器时,rem 中的布局会缩放's 默认文本大小。 em 是相对于的 元素's 字体大小,这使得它对于填充非常有用,当填充通过嵌套元素复合时,填充应该跟踪自己的文本和危险。
算术是微不足道的,在翻译规格时做四十次就是错误蔓延的地方,特别是如果根大小不是 16px。The CSS 单位转换器 获取可配置的根并同时显示每个单元。
对于梯度, 梯度生成器 涵盖线性、径向和圆锥形,并且有更长的写入 CSS 梯度指南。
将它们放在一起:一张卡片,开始结束
物业很少单独使用,这里有一张卡片,使用了其中四张,按照我建造的方式建造。
从形状和静止的阴影开始:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
再两影,皆光 一张休息卡勉强要举起,保存剧作悬停状态。
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
的 translateY do大部分感知的工作。movement读作升力比更大的阴影更令人信服,而且它很便宜,因为变换是复合的而不是重新喷漆的。
如果卡片位于照片而不是平面页面上,请将白色背景换成玻璃:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
注意什么改变了什么没有改变。半径和阴影没有受到影响。只有表面处理不同,这是有用的心理模型:形状和深度是一个决定,表面是另一个决定。
浏览器支持和后备功能怎么样?
其中大部分都是古老且安全的。 box-shadow、 text-shadow、 border-radius 並 filter 多年来一直受到各地的支持,您可以不假思索地写它们。
backdrop-filter 是值得处理的例外,现在支持很广泛,但是在缺失时,这里唯一的一个属性会产生一个真正破碎的结果:一个15%白色背景且没有模糊的面板是照片上的浅色涂片,保护它:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
Fallback是一个大部分不透明的面板,不是效果而是完美可用,增强版只适用于浏览器可以交付的地方。 MDN's @supports 参考 涵盖了语法,并且值得在任何时候触及属性具有视觉上损坏的失败模式,而不仅仅是更简单的失败模式。
如何在整个项目中保持效果一致?
真正的代码库上的失败模式不是一个坏影子,它是十四种略有不同的影子,因为每个需要卡的人都写了自己的。
1次将它们定义为自定义属性, 并使用名称:
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
3个影子步骤通常就足够了,如果你发现自己加了第四个,那往往是因为一个组件需要不同的 海拔 而不是不同的阴影,答案是重复使用现有步骤。
这也使得暗模式变得易于处理。在白色上工作的阴影在黑暗表面上接近不可见,其中深度通常来自较浅的边框或微妙的光线。重新定义媒体查询内部的令牌,每个组件都遵循:
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
Generate每个值一次以上面的工具,粘贴到token块中,停止思考,这就是有生成器的全部意义:不是写你手写不到的CSS,而是停止把注意力花在只需要决定一次的值上。
这些影响会导致可访问性问题
本指南中的每个属性都操纵对比度,对比度是无障碍要求主要涉及的事情。四个特定的陷阱。
交互式组件需要可见的边界。 WCAG 2.2 需要 3:1 的对比度 对于识别它的控件的部件。唯一边缘是软阴影的按钮可能会失败,这是新形态的结构问题,也是边界或实心焦点环在那里不可选的原因。
玻璃板继承了它们的背景'的对比度问题。 Frosted面板上的文字,根据后面的照片,是否清晰,照片经常变化。测试你最差的图像,而不是你的英雄。提高面板's背景不透明通常比使文本更大胆更好的修复。
过滤器静默地改变对比度。 brightness() 並 contrast() zhi用于容器,也适用于其内部的文字。A filter: brightness(1.15) 在卡片上使其弹出可以悄悄地将您的身体文本推入 4.5:1 阈值下。事后检查 颜色对比检查器的,而不是以前。
不要让阴影成为唯一的状态指示器。 如果悬停、聚焦和按下仅因阴影深度而异,键盘用户和任何视力低下的人都会失去区别。将阴影变化与变换、轮廓或颜色偏移配对。
这些都不会使效果无法使用。它使它们成为验证而不是假设的东西,在打开对比度检查器的情况下,每个组件大约需要一分钟。
这些工具会将我的作品发送到任何地方吗?
No。这里的每个生成器都完全在浏览器中运行。没有上传步骤,也没有服务器往返,这就是为什么当你拖动滑块时他们会立即响应。这也是目录其余部分离线工作的原因,涵盖在 数据隐私指南。
常见的错误
- 一个影子而不是两个。 手写阴影和设计阴影之间最明显的区别。
- 动画
box-shadow上悬停。 重新粉刷每一帧。动画。transform相反,交叉淡入淡出。 backdrop-filter纯色以上。 没有什么可以模糊的,所以什么也不会发生。- 玻璃面板上的不透明背景。 隐藏您刚才写的效果。
- 不匹配背景上的新形态。 幻觉取决于它们是相同的。
border-radius: 50%期待一个圆形矩形。 在非平方元素上,您会得到一个椭圆。- 运输其中任何一个,无需对比检查。 影子和玻璃都会降低对比度,并且都很容易在好的显示器上进行过度调谐。
