Neumorphism 是指一个按钮或卡片似乎被压出页面本身的外观,就像是由软塑料模制的形状,没有边框,没有与背景不同的填充颜色,只是一侧的苍白高光和另一侧的柔和阴影,它在设计模型中拍摄得很漂亮,在真实的界面中很容易在两个方面出错:效果消失,或者控制变得难以看到。
2个问题都归结为关于颜色和阴影的少量算术,本指南解释了软UI效果是如何从两个构建起来的 box-shadow 层(layers),浅色和深色色调是如何从一种表面颜色中衍生出来的,平坦的、凹的、凸的和压制的形状会发生什么变化,以及如何在wcag对比度规则下保持新形态界面可用 CSS 变态生成器 通过实时预览生成下面的所有代码。
TL;博士: 新形态元素具有与页面相同的背景颜色和两个框阴影:较暗的向下和向右偏移,较浅的向上和向左偏移。使用两者的插入关键字使元素看起来像是按压的。 CSS 新形态生成器从您的表面颜色导出两种阴影颜色,带有滑块,用于距离(2 至 50 px)、模糊(0 至 100 px)、强度(2 至 40%)和半径(0 至 80 px),加上平坦、凹入、凸出和按压形状。默认光表面给出
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff。那些阴影与表面相比仅达到约1.5:1的对比度,远低于3:1 WCAG要求控制边界,因此交互元素需要可见的边界或焦点状态,它是客户端的,免费的,没有注册。
UI设计中的变态是什么？
义(Neumorphism),也叫软UI,是一种视觉风格,其中界面元素出现从背景中挤出或压入,使用成对的明暗阴影而不是边框或对比填充,这个名字融合了"新"和"骨质同构",模仿物理材料的旧风格,新形态模仿一种材料,单一的连续表面,并依赖于左上角的想象光源。
2020年左右,这种风格在设计展示网站上流行起来,它非常适合装饰面板,在好的屏幕上查看的仪表板和一次性的英雄图形,它不太适合密集的形式,户外使用的任何东西,以及用户必须快速找到任何控件,原因在无障碍部分中涵盖。
CSS中新形态效应是如何工作的?
效果需要三件事:元素上与页面匹配的背景颜色、边框半径以及两个相反方向投射的阴影。 CSS box-shadow property接受一个逗号分隔的阴影列表,每个阴影都有一个x偏移,一个y偏移,一个模糊半径和一个颜色,如上所述 MDN's 盒子-影子参考 并指定于 CSS 背景和边界级别 3。
这是生成器的输出's默认灯预设:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
从左到右读取阴影列表。第一个阴影偏移 12 像素向右和 12 向下,模糊超过 24 像素,在比表面更深的灰色中:即远离光线一侧的阴影。第二个偏移 12 像素向左和 12 向上,在比表面更浅的颜色中:面向光线一侧的高光。因为元素'自己的背景是一样的 #e0e0e0 为页,没有可见的边,形只作为两影相交的边界而存在。
为什么我的变态效应没有出现？
素's背景和后面什么都不匹配是最常见的原因,如果页面是白色的,卡片是 #e0e0e0,你看到的是带阴影的灰卡,不是软挤压,将父's背景设置为与元素相同的颜色,生成器's预览面板会自动执行此操作,这就是为什么粘贴到白色页面时看起来对了,错了。
2个原因就是看不到的高光色,在很轻的表面上"光"影子可能已经是纯白色了,在纯白色的页面上,一个白色的影子是看不见的,这也是为什么几乎从不做新形态的原因 #ffffff。
浅色和深色阴影颜色是如何计算的?
Generator将表面颜色的每个红、绿、蓝通道移位相同的量:强度百分比为255,浅色阴影加上该量,深色阴影减去,每个通道被夹在0到255范围内并取圆。
这是默认光预设曲面的计算 #e0e0e0 (224, 224, 224)在15%的强度下:
- 轮班金额:255 的 15% = 38.25。
- 深色:224 - 38.25 = 185.75,四舍五入为 186,即六角形
ba. 结果:#bababa。 - 浅色:224 + 38.25 = 262.25,夹紧至 255,六角形
ff. 结果:#ffffff。
3步显示了一个值得知道的极限。上 #e0e0e0 (255 - 224)/255 = 12.2%强度通过后高光会打出纯白色,任何高于该强度会使阴影变暗而不使高光变亮,因此效果会变得不平衡,在光表面上,将强度保持在那个夹点附近,或者选择稍微暗一点的表面,这样高光就有空间。
相同的规则给出了其他预设:
| 预设 | 表面 | 距离/模糊 | 强度 | 深色阴影 | 浅色 |
|---|---|---|---|---|---|
| 光 | #e0e0e0 |
12/24 磅 | 15% | #bababa |
#ffffff |
| 卡 | #f0f0f3 |
10/20 磅 | 12%锛屽悓姣斿? | #d1d1d4 |
#ffffff |
| 暗 | #2d2f34 |
12/24 磅 | 12%锛屽悓姣斿? | #0e1015 |
#4c4e53 |
| 按下 | #e0e0e0 |
12/24 磅 | 15% | #bababa |
#ffffff |
| 凸 | #e0e0e0 |
12/24 磅 | 15% | #bababa |
#ffffff |
在黑暗预设上,从 (45、47、52) 的每个通道中减去 30.6,得到 (14、16、21),或者 #0e1015并且将其相加得到(76、78、83),或者 #4c4e53。因为跨通道的移位相等,表面的轻微蓝色色调带入两种色调,因此深色新晶卡不会变成平坦的中性灰色。
4种形状有什么变化?
Shape控制元素's背景填充以及阴影是否位于其外部或内部,距离,模糊和半径对于所有四个都表现相同。
| 形状 | 背景 | 阴影 | 看起来像 |
|---|---|---|---|
| 平坦的 | 固体表面颜色 | 外在的 | A高原抬高 |
| 凸 | linear-gradient(145deg, light, dark) |
外在的 | 一个凸起的圆顶,从左上角点亮 |
| 凹 | linear-gradient(145deg, dark, light) |
外在的 | 一个向内弯曲的凸起盘子 |
| 按下 | 固体表面颜色 | 两者 inset |
一个空洞被推入页面 |
按下预设产生:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
与 inset、阴影画在元素内部's的填充框,所以暗色沿左上内缘和右下高光出现,那反转了灯光提示,读作凹陷,是自然"活跃"或"on"状态,用于静止状态平坦的切换。
Convex预设使用全明暗色调作为渐变停止, linear-gradient(145deg, #ffffff, #bababa)15%强度时,这是一个相当强的曲线,对于更微妙的圆顶,降低强度;这会使梯度和阴影一起软化,因为两者都来自相同的两种颜色。
距离、模糊和半径如何相互作用?
滑块是独立的,但外观取决于它们的比例。
- 距离 (2 到 50 px) 设置每个阴影在两个轴上的偏移距离。它控制视在高度:更大的距离使元素漂浮在页面上方更高。
- 模糊 (0到100 px)设置阴影边缘有多柔软,围绕两倍距离的模糊,就像在每个预设中一样,给出了特有的枕形外观,模糊等于或低于距离会产生看起来更像切口的硬边阴影。
- 半径 (0到80 px)圆角,软UI几乎都是用大方的圆角;阴影柔和的方角看起来像是渲染错误。
- 强度 (2至40%)设定了色调离表面颜色移动的距离。
实际的起始比是模糊 = 2 x 距离,半径 = 2 x 距离,您表面的夹点附近的强度。对于 40 像素图标按钮等小元素,将距离缩放到 4 至 6 像素; 40 像素按钮上的 12 像素偏移使阴影比控制更大。
新形态是否可以访问?
Not默认。neumorphic控件's边缘由与表面相差仅百分之几的亮度的阴影定义,并且这不符合交互组件可见边界的WCAG要求。
WCAG 2.2 成功标准 1.4。11,非文本对比的,需要识别用户界面组件所需的视觉信息,以及它的状态,以至少3:1的对比度与相邻的颜色对比度使用定义在的相对亮度公式 WCAG 2.2。为默认预设工作它:
| 对 | 相对亮度 | 对比 | 遇见3:1? |
|---|---|---|---|
深色阴影 #bababa vs 表面 #e0e0e0 |
0.491 vs 0.745 | 1.47:1左右的時間 | 否 |
浅色 #ffffff vs 表面 #e0e0e0 |
1.000 vs 0.745 | 大约1.32:1 | 否 |
边境 #7f7f7f vs 表面 #e0e0e0 |
0.212 vs 0.745 | 大约3.03:1 | 只是 |
边境 #767676 vs 表面 #e0e0e0 |
0.181 vs 0.745 | 大约3.44:1 | 是的,有余量 |
文本 #333333 vs 表面 #e0e0e0 |
0.033 vs 0.745 | 9.6:1左右的情形 | 是(文本也通过4.5:1) |
And那些影子人物就是最好的案例,模煳把影子颜色散开,所以大部分可见影子都比浅 #bababa。在光表面上提高强度没有多大帮助,因为亮点已经夹在白色。
为了检查你自己的颜色, 颜色对比度检查器 计算任意对的比率,并且 颜色对比度检查指南 详细解释公式。
如何保持外观并通过对比度规则
式(style),你不必抛弃,对于用户必须感知到的任何事情,你都得停止依赖它。
- 使用软 UI 作为容器,而不是用于控制。 卡片、面板和装饰井可以是纯粹的纽莫弗式。标准 1.4。11 是关于交互式组件和有意义的图形,因此内容标识自己的容器比边缘是唯一标志的按钮的风险要小得多。
- 为每个交互元素提供真正的提示。 3:1或更好的颜色的1或2像素边框,对比图标,或文本标签。
- 使焦点变得明显。 添加a
:focus-visible轮廓采用高对比度颜色。柔和的阴影不是焦点指标。 - 不要仅用深度发出信号状态。 如果按下表示 "on",还请更改图标、标签或颜色。
- 尊重用户设置。 的 prefers-对比度媒体查询 当用户要求更多对比度时,您可以添加边框或删除效果。
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
如何生成新形态CSS,一步一步
- 打开 新形态生成器 并选择预设作为起点:光、卡、暗、按压或凸。
- 使用颜色选择器设置表面颜色以匹配元素所在的背景。
- 调整距离并模糊高度和柔软度,然后调整强度以形成对比,观看现场预览。
- 选择形状:扁平、凹入、凸出或压制。
- 设置半径以适应元素大小。
- CSS 复制,把三个声明粘贴到你的规则里,记得给家长同样的背景颜色。
您如何支持明暗主题?
为每个主题生成一组值, 并与自定义属性交换。上面的光明和黑暗预设给出一个工作对:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
暗新形态有光面问题的镜子:影子夹向黑色,高光承载效果,每个主题分别检查对比度。
新形态、玻璃形态和平面阴影比较
软UI是显示深度的几种方式之一,并且每种方式都有不同的成本。
| 风格 | 核心CSS | 深度提示 | 对比风险 | 好 |
|---|---|---|---|---|
| 新形态 | 两个对立 box-shadow 层,匹配背景 |
从页面中挤出 | 高 | 装饰面板、展示仪表板 |
| 玻璃化 | backdrop-filter: blur() 和半透明的填充物 |
内容上的磨砂层 | 中,取决于背后的内容 | 叠加,卡片叠加图像 |
| 材料风格的立面 | 向下一两个 box-shadow 层 |
卡片漂浮在页面上方 | 低 | 一般接口 |
| 平坦,有边框 | border 并填充颜色 |
没有 | 最低 | 表格、密集的数据、可访问性优先的工作 |
的 玻璃化生成器 构建磨砂玻璃风格,以及 盒子阴影生成器指南 覆盖单层和分层高程阴影。对于发光或压花的文本而不是盒子, 文本阴影生成器 type 上应用一个类似的想法,它们都列在了 CSS 工具集线器。
生成器是私有的吗?
是的。预览和 CSS 是在您的浏览器中使用 JavaScript 生成的,上传或存储的任何内容都不会,并且页面加载后会保持离线工作。复制 CSS 计入每日使用限制,如果达到该限制,则会出现消息。
