新形態是指按鈕或卡片似乎從頁面本身被壓出的外觀,就像由軟塑膠模製而成的形狀一樣。沒有邊框,沒有與背景不同的填充顏色,只有一側的蒼白高光和另一側的柔和陰影。它在設計模型中拍攝精美。在真實的介面中,很容易從兩個方面出錯:效果消失,或控制變得難以看到。
這兩個問題都歸結為關於顏色和陰影的少量算術。本指南解釋了軟 UI 效果是如何從兩個效果建構的 box-shadow 層數、淺色和深色色調如何從一種表面顏色中衍生出來,平面、凹面、凸面和壓制形狀會發生什麼變化,以及如何在 WCAG 對比規則下保持新形態介面可用。這 CSS 神經性生成器 透過即時預覽產生以下所有程式碼。
TL;DR: 新形態元素具有與頁面相同的背景顏色和兩個框陰影:較暗的一個向下和向右偏移,較淺的一個向上和向左偏移。使用兩者的插入關鍵字會使元素看起來被按下。 CSS Neumorphism Generator 從表面顏色中導出兩種陰影顏色,並使用滑桿顯示距離(2 至50 px)、模糊(0 至100 px)、強度(2 至40%)和半徑(0 至80 px),加上平面、凹面、凸面和壓制形狀。預設的光表面給出
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. 這些陰影與表面的對比度僅為 1.5:1 左右,遠低於 WCAG 對控制邊界要求的 3:1,因此互動元素需要可見的邊界或焦點狀態。它是客戶端、免費的、無註冊的。
什麼是 UI 設計中的神經晶？
新形態,也稱為軟 UI,是一種視覺風格,其中界面元素使用成對的明暗陰影而不是邊框或對比填充從背景中擠出或壓入背景中。名稱混合&引用;新&引用;和&引用;擬物化&引用;,模仿物理材料的舊風格。新形態模仿一種材料,一個單一的連續表面,並依賴左上角的想像光源。
這種風格在 2020 年左右在設計展示網站上流行起來。它非常適合裝飾面板、在良好螢幕上查看的儀表板和一次性英雄圖形。它不太適合密集的形式、戶外使用的任何東西以及用戶必須快速找到的任何控制,原因在輔助功能部分中涵蓋。
新態效應在 CSS 中如何發揮作用?
此效果需要三件事:元素上與頁面相符的背景顏色、邊框半徑以及兩個向相反方向投射的陰影。 CSS box-shadow 屬性接受逗號分隔的陰影列表,每個陰影具有 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 作為頁面,沒有可見的邊緣。形狀僅作為兩個陰影相交的邊界而存在。
為什麼我的神經晶效應沒有出現？
最常見的原因是元素與#39; 的背景及其背後的任何內容之間的不匹配。如果頁面是白色的並且卡片是白色的 #e0e0e0,您會看到一張帶有陰影的灰色卡片,而不是軟擠出。將父級'的背景設定為與元素相同的顏色。生成器'預覽面板會自動執行此操作,這就是為什麼當貼到白頁上時它看起來正確和錯誤。
第二個原因是看不到高光顏色。在非常輕的表面上,"光&引用;陰影可能已經是純白色的,而在純白色的頁面上,白色的陰影是不可見的。這也是為什麼幾乎從未進行過新態化的原因 #ffffff.
淺色和深色的陰影顏色是如何計算的?
生成器將表面顏色的每個紅色、綠色和藍色通道移動相同的量:強度百分比為 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. 由於跨通道的偏移相等,因此表面的輕微藍色色調會變成兩種色調,因此深色新形態卡片不會變成扁平中性灰色。
這四種形狀會改變什麼?
形狀控制元素'背景填充以及陰影是否位於其外部或內部。距離、模糊和半徑對於所有四個都表現相同。
| 形狀 | 背景 | 陰影 | 看起來像 |
|---|---|---|---|
| 平坦的 | 純淨的表面顏色 | 外 | 一個凸起的高原 |
| 凸的 | 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"休止狀態為平的切換的狀態。
凸預設使用完整的淺色和深色色調作為漸變停止, 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 像素偏移使陰影大於控制項。
新態性可以嗎?
預設情況下不是。新態控制' s 邊緣由與表面亮度僅相差百分之幾的陰影定義,並且不符合 WCAG 對互動式元件可見邊界的要求。
WCAG 2.2 成功標準 1.4。11,非文字對比,要求識別使用者介面元件及其狀態所需的視覺資訊與相鄰顏色的對比度至少為 3:1。對比度使用 中定義的相對亮度公式 WCAG 2.2。 預設預設的解決方法:
| 對 | 相對亮度 | 對比度 | 遇見3:1? |
|---|---|---|---|
深色陰影 #bababa 與表面 #e0e0e0 |
0.491 對 0.745 | 約1.47:1 | 不 |
淺色陰影 #ffffff 與表面 #e0e0e0 |
1.000 vs 0.745 | 約1.32:1 | 不 |
邊界 #7f7f7f 與表面 #e0e0e0 |
0.212 對 0.745 | 約3.03:1 | 只是 |
邊界 #767676 與表面 #e0e0e0 |
0.181 對 0.745 | 約3.44:1 | 是的,有保證金 |
文字 #333333 與表面 #e0e0e0 |
0.033 對 0.745 | 約9.6:1 | 是的(文本也經過 4.5:1) |
這些陰影圖形是最好的情況。模糊將陰影顏色展開,因此大多數可見陰影都比 #bababa. 提高強度對光錶面沒有太大幫助,因為高光已經被白色夾住了。
為了檢查你自己的顏色, 顏色對比度檢查器 計算任意對的比率,並且 色彩對比度檢查指南 詳細解釋了公式。
如何保持外觀並通過對比規則
你不必放棄這種風格。你必須停止依賴它來獲取用戶必須感知到的任何東西。
- 對容器使用軟 UI,而不是控制。 卡片、面板和裝飾井可以是純粹的新形態。標準 1.4。11 是關於互動式組件和有意義的圖形,因此內容識別自身的容器比其邊緣是其唯一存在的標誌的按鈕的風險要小得多。
- 為每個互動元素提供真正的提示。 3:1 或更好顏色的 1 或 2 像素邊框、對比圖示或文字標籤。
- 讓焦點顯而易見。 添加一個
:focus-visible高對比色輪廓。柔和的陰影不是焦點指示器。 - 不要僅用深度來表示狀態。 如果按下,表示 "on",也更改圖示、標籤或顏色。
- 尊重用戶設定。 的 偏好對比媒體查詢 當使用者要求更多對比度時,您可以新增邊框或刪除效果。
.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 並填滿顏色 |
沒有 | 最低 | 表單、密集資料、可訪問性優先的工作 |
的 玻璃態發生器 建造磨砂玻璃風格,以及 箱形陰影產生器指南 覆蓋單層和分層高程陰影。對於發光或壓花文字而不是框, 文字陰影產生器 將類似的想法應用於類型。所有這些都列在 CSS 工具中心.
產生器是私有的嗎?
是的。預覽版和 CSS 是在瀏覽器中使用 JavaScript 產生的,沒有任何內容上傳或存儲,並且頁面在加載後保持離線工作。複製 CSS 計入每日使用限制,如果達到該限制,則會出現一則訊息。
