ニューモーフィズムとは、柔らかいプラスチックで成形された形状のように、ボタンやカードがページ自体から押し出されているように見える外観です。境界線や背景と異なる塗りつぶしの色はなく、片面に淡いハイライトがあり、もう片面に柔らかい影があるだけです。デザインモックアップで美しく撮影します。実際のインターフェイスでは、効果が消えるか、コントロールが見えにくくなるという 2 つの点で間違えやすいです。
どちらの問題も、色と影に関する少量の算術に帰着します。 このガイドでは、ソフト UI エフェクトが 2 つからどのように構築されるかを説明します box-shadow レイヤー、1 つの表面の色から明るい色合いと暗い色合いがどのように派生するか、フラット、凹面、凸面、プレス形状が変化するもの、およびWCAGコントラストルールの下で使用可能なニューモルフィックインターフェイスを維持する方法 CSS ニューモルフィズム発生器 以下のすべてのコードをライブ プレビューとともに作成します。
tl;dr: ニューモーフィック要素は、ページと同じ背景色と2 つのボックスシャドウ (暗い1 つは下と右にオフセットし、明るい1 つは上と左にオフセット) を持ち、両方に挿入キーワードを使用すると、要素がプレスされたように見えます。 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とも呼ばれ、境界や対照的な塗りつぶしの代わりに、光と闇の影のペアを使用して、インターフェース要素が背景から押し出されたり押し込まれたりして表示される視覚的なスタイルです。 "new" と "skeuomorphism" という名前は、物理的なマテリアルを模倣した古いスタイルをブレンドします。 neumorphismは、1 つのマテリアル、単一の連続した表面を模倣し、左上の想像上の光源に依存しています。
このスタイルは、2020 年頃にデザイン ショーケース サイトで人気になりました。装飾パネル、優れた画面で表示されるダッシュボード、および 1 回限りのヒーロー グラフィックスによく適しています。高密度のフォーム、屋外で使用されるもの、およびユーザーがすぐに見つけなければならないコントロールにはあまり適していません。その理由は、アクセシビリティ セクションで説明されています。
CSS ではニューモルフィック効果はどのように機能しますか?
エフェクトには3 つのものが必要です: ページに一致する要素の背景色、境界線の半径、反対方向にキャストされる2 つの影 CSS box-shadow プロパティは、ドキュメントに記載されているように、それぞれ x オフセット、y オフセット、ぼかし半径、色を持つ影のカンマ区切りのリストを受け入れます MDN' s ボックスシャドウのリファレンス で指定されています CSS の背景と境界 レベル 3。
Generator' s default Light preset の出力は次のとおりです:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
影のリストを左から右に読みます 最初の影は右に12 ピクセル 下に12 ピクセル 表面より濃い灰色でぼかされています: それは光から離れた側の色合いです 2 番目の影は左に12 ピクセル 上にオフセットされています 表面より明るい色: 光に面した側のハイライトです なぜなら要素& #39; 自身の背景は同じだからです #e0e0e0 ページとして、目に見えるエッジはありません。形状は、2 つの影が交わる境界としてのみ存在します。
ニューモルフィズム効果が表示されないのはなぜですか?
最も一般的な原因は、要素& #39; sの背景と、その背後にあるものとの間の不一致です。 ページが白でカードが白の場合 #e0e0e0、あなたは影と灰色のカード、ソフト押出ではないを参照してください。 parent& #39; s の背景を要素と同じ色に設定します。 generator& #39; s プレビューパネルが自動的にこれを行うため、白いページに貼り付けると、そこに見え、間違っています。
2 つ目の原因は 見えないハイライトカラーです 非常に明るい表面では " light" shadow はすでに真っ白になっている可能性があり 真っ白なページでは 白い影が見えないのです それがまた neumorphism がほとんど行われない理由です #ffffff。
明るい影の色と暗い影の色はどのように計算されますか?
ジェネレータは、表面色の赤、緑、青の各チャンネルを同じ量だけシフトします。強度パーセンテージは 255 です。明るい色合いでその量が追加され、暗い色合いがそれを減算し、各チャンネルは 0 ～ 255 の範囲にクランプされ、丸められます。
デフォルトの Light プリセット、surface の計算は次のとおりです #e0e0e0 (224, 224, 224) 15% の強度で:
- シフト量: 255 の 15% = 38.25。
- 暗い色合い: 224 - 38.25 = 185.75、186 に丸め、16 進数です
ba。 結果:#bababa。 - 明るい色合い: 224 + 38.25 = 262.25、255 にクランプ、16 進数
ff。 結果:#ffffff。
ステップ3 は知る価値のある限界を示しています。 on #e0e0e0 ハイライトは、強度が過ぎると真っ白になります (255 - 224) / 255 = 12.2%。ハイライトを明るくすることなく、影を暗くする強度を超えると、効果が偏ります。明るい表面では、強度をそのクランプ点の近くに保つか、ハイライトにスペースが入るように少し暗い表面を選択します。
同じルールが他のプリセットを与えます:
| プリセット | 表面 | 距離/ぼかし | 強度 | 暗い色合い | ライトシェード |
|---|---|---|---|---|---|
| 光 | #e0e0e0 |
12/24px | 15% | #bababa |
#ffffff |
| カード | #f0f0f3 |
10/20px | 12% | #d1d1d4 |
#ffffff |
| 暗い | #2d2f34 |
12/24px | 12% | #0e1015 |
#4c4e53 |
| 押さ | #e0e0e0 |
12/24px | 15% | #bababa |
#ffffff |
| 凸 | #e0e0e0 |
12/24px | 15% | #bababa |
#ffffff |
Dark プリセットでは、(45、47、52) の各チャンネルから 30.6 を引くと、(14、16、21)、または #0e1015を付け、 を加えると (76, 78, 83) 、あるいは #4c4e53。シフトはチャネル間で等しいため、表面のわずかな青みが両方の色合いに反映されるため、暗いニューモーフィック カードはフラット ニュートラル グレーにはなりません。
4 つの形は何が変わるのか?
Shape controls the element' s background fill and whether the shadows sit outside or inside.距離、ぼかし、半径は4 つすべてで同じように動作します。
| 形状 | 背景 | 影 | のようですね |
|---|---|---|---|
| 平坦 | 固体表面色 | アウター | 高台 |
| 凸 | linear-gradient(145deg, light, dark) |
アウター | 左上から照らされた一段高いドーム |
| 凹面 | linear-gradient(145deg, dark, light) |
アウター | 内側に湾曲した盛り上がった皿 |
| 押さ | 固体表面色 | 両方 inset |
ページに押し込まれた空洞 |
Pressedプリセットでは以下が生成されます:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
と inset、影はelement& #39; sのパディングボックスの内側に描かれているので、暗い色合いは左上の内側の端に沿って表示され、ハイライトは右下に沿って表示されます それは照明の合図を反転させ、くぼみとして読みます それは自然な " active" または "on" 静止状態が平坦なトグルの状態です。
Convexプリセットは、グラデーションの停止として完全なライトとダークシェードを使用します、 linear-gradient(145deg, #ffffff, #bababa)、これは15% の強度でかなり強い曲線です。 subtlerドームのために、強度を下げます; 両方が同じ2 色から来ているので、グラデーションと影を一緒に柔らかくする。
距離、ぼかし、半径はどのように相互作用しますか?
スライダーは独立していますが、見た目は比率によって異なります。
- 距離 (2 から 50 px) は、両方の軸で各影がオフセットされる距離を設定します。見かけの高さを制御します。距離が長くなると、要素がページの上に大きく浮かび上がります。
- ぼかし (0 から 100 px) は、シャドウ エッジがどれだけ柔らかいかを示します。すべてのプリセットのように、距離の約 2 倍のぼかしが特徴的な枕状の外観を与えます。距離以下のぼかしは、切り欠きのように見えるハードエッジの影を生成します。
- 半径 (0 から80 px) は角を丸めます。 soft UIはほとんど常に寛大な丸めを使用します; 柔らかい影のある四角い角はレンダリングエラーのように見えます。
- 強度 (2 ～ 40%) は、色合いが表面の色からどれだけ離れているかを設定します。
実用的な開始比率は、ぼかし = 2 x 距離、半径 = 2 x 距離、表面のクランプ点付近の強度です。 40 ピクセルのアイコン ボタンなどの小さな要素の場合、距離を 4 ～ 6 ピクセルまで縮小します。 40 ピクセルのボタンで 12 ピクセルのオフセットを使用すると、影がコントロールよりも大きくなります。
ニューモーフィズムはアクセス可能ですか?
デフォルトではありません。 neumorphic control's エッジは、輝度がわずか数パーセントだけ表面と異なる影によって定義され、インタラクティブ コンポーネントの可視境界に対する WCAG 要件を満たしていません。
WCAG 2.2 達成基準 1.4.11、非テキストコントラスト、ユーザインタフェースコンポーネントを識別するために必要な視覚情報、およびその状態を要求し、隣接する色に対して少なくとも3:1 のコントラスト比を持つようにする。 contrast ratioはで定義された相対輝度公式を使用する 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 も渡します) |
そしてそれらの影の数字は最良の場合です。 ぼかしは影の色を塗り広げるので、目に見える影の大部分はより軽いです #bababa。ハイライトはすでに白でクランプされているため、光面では強度を上げてもあまり役に立ちません。
自分の色を確認するには、 カラーコントラストチェッカー 任意のペアの比を計算します カラーコントラストチェックに関するガイド 式を詳しく説明します.
見た目を保ち、コントラストルールを渡す方法
スタイルを放棄する必要はありません。ユーザーが認識しなければならないものは何でも、スタイルに依存するのをやめなければなりません。
- コントロール用ではなく、コンテナー用のソフト UI を使用します。 カード、パネル、装飾ウェルは純粋にニューモルフィックである可能性があります。基準 1.4.11 はインタラクティブなコンポーネントと意味のあるグラフィックスに関するものであるため、コンテンツが識別されるコンテナは、エッジが唯一の記号であるボタンよりもはるかにリスクが低くなります。
- すべてのインタラクティブな要素に真のヒントを与えます。 3:1 以上の色の 1 または 2 ピクセルの境界線、対照的なアイコン、またはテキスト ラベル。
- 焦点を明白にする. を追加します
:focus-visibleハイコントラストカラーのアウトライン ソフトシャドウはフォーカスインジケーターではありません。 - 深度だけで状態を知らせないでください。 押された場合は "on" を意味します。アイコン、ラベル、色も変更します。
- ユーザー設定を尊重する. ザ・ prefers-contrast メディアクエリ ユーザーがコントラストをさらに要求したときに、境界を追加したり、エフェクトを削除したりできます。
.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 を段階的に生成する方法
- を開きます neumorphism generator そして、開始点としてプリセットを選択します: ライト、カード、ダーク、プレス、または凸面。
- 要素が配置される背景に一致するように、カラー ピッカーで表面の色を設定します。
- 高さと柔らかさのために距離とぼかしを調整し、次にコントラストのために強度を調整し、ライブプレビューを見ます。
- 形状を選択してください: 平ら、凹面、凸面、またはプレス.
- 要素のサイズに合わせて半径を設定します。
- 「Copy CSS」をクリックし、3 つの宣言をルールに貼り付けます。親に同じ背景色を与えることを忘れないでください。
明るいテーマと暗いテーマをどのようにサポートしますか?
各テーマに対して1 セットの値を生成し、カスタムプロパティで交換します 上記のLightとDarkのプリセットは、次の作業ペアを与えます:
: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 は深みを示すいくつかの方法のうちの 1 つであり、それぞれに異なるコストがあります。
| スタイル | コア CSS | デプスキュー | コントラストリスク | いいね |
|---|---|---|---|---|
| 新型 | 二人の対立 box-shadow レイヤー、一致する背景 |
ページからの押し出し | 高い | 装飾的なパネル、ショーケースのダッシュボード |
| ガラス形態 | backdrop-filter: blur() そして半透明の塗りつぶし |
コンテンツ上のフロスト層 | 中、後ろにあるものによって異なります | 画像の上にオーバーレイ、カード |
| 素材風の高架化 | 1 つまたは 2 つ下向き box-shadow 層 |
ページの上に浮かぶカード | ロウ | 一般的なインターフェース |
| 平ら な 縁取り | border そして色を塗りつぶします |
なし | 最低 | フォーム、高密度データ、アクセシビリティ第一の作業 |
ザ・ glassmorphism generator 曇りガラスのスタイルを構築します ボックスシャドウジェネレータガイド 単一および層状の標高の影をカバーします。 、ボックスではなく光ったり、エンボス加工されたテキストのために、 テキストシャドウジェネレータ 類型に類似した考えを適用します.それらはすべて, にリストされています. CSS ツールハブ。
発電機はプライベートですか?
はい。 javascript を使用してプレビューと CSS がブラウザで生成され、アップロードまたは保存されるものは何もなく、ロードされるとページはオフラインで動作し続けます。CSS をコピーすると 1 日の使用制限にカウントされ、その制限に達するとメッセージが表示されます。
