figma ファイルの影を照合しようとすると、約 40 分かかりました。デザイナーは私に色、X と Y のオフセット、ぼかし、スプレッドを与えました。これが必要なすべてですが、それでも正しく表示できませんでした。ブラウザの影はモックアップよりも重くて平らで、ぼかし半径を修正するように上下に小突き続けました。
それはそうではありません、なぜならモックアップには2つの影が積み重ねられていたからです。接触用のタイトな暗いもの、周囲光用の幅広の柔らかいもの。figmaは、私が折りたたんだパネルにそれらを別々のレイヤーとして示しました。コンマで区切られたペアとして書くと、一致は瞬時に現れました。
このガイドの CSS プロパティについては、そのとおりです。どれも複雑ではありません。構文からは明らかではない動作が 1 つまたは 2 つあり、どれかに午後を失う可能性があります。このガイドは、それらの動作を書き留めたものです。
ここにリンクされているすべてのジェネレーターはブラウザーで実行され、ドラッグするとライブ プレビューが更新され、CSS が渡されます。 [Toolz.dev] で構築し (/、常に使用しています。これは主に、4 値の速記を読むのは長方形を見るよりも難しいためです。
tl;dr: 使い ボックス シャドウ 深さの場合は、 テキスト シャドウ グローとアウトラインの場合、 境界半径 楕円形のものを含む角の場合、 CSSフィルター ぼかし、明るさおよび色の効果のため、 ガラス形態 曇らされたパネルのために、 新型 柔らかい上げられた表面のために、 グラデーション 背景については、 CSS ユニット コンバータ remでpxが必要なとき それらの全てはライブプレビューでクライアントサイドで実行されます 運ぶ価値のある2 つのルール: 実際の影はレイヤー化されています、そして
backdrop-filterぼかすには後ろに何かが必要です。
どの発電機が必要ですか?
| あなたが欲しい | 財産 | ツール |
|---|---|---|
| ページから持ち上がるカード | box-shadow |
ボックス シャドウ |
| 光る、輪郭が描かれた、またはエンボス加工されたテキスト | text-shadow |
テキスト シャドウ |
| 丸いまたは丸型の角 | border-radius |
境界半径 |
| 要素をぼかし、薄暗く、彩度を低下させたり、色を帯びさせたりします | filter |
CSSフィルター |
| 写真の上に曇ったパネル | backdrop-filter |
ガラス形態 |
| 表面に押し込まれたように見える柔らかいボタン | 重ね box-shadow |
新型 |
| 色の移行の背景 | linear-gradient |
グラデーション |
| 24pxをremにするには | なし | ユニットコンバーター |
このガイドの残りの部分は、それぞれが何をし、どこで噛むかです。
ボックスシャドウはどのように機能しますか?
速記は5 つの値と色:
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 */
オフセットで影が移動します。 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 is why a designer's shadow looks better than yours. 1 つの影はステッカーとして読める 2 つは重みのある物体として読める The ボックスシャドウジェネレータ レイヤーを追加して、それぞれを個別にドラッグできます。これが、レイヤーを調整する唯一の適切な方法です。
inset 境界ボックスの内側の影を移動します。これにより、凹んでいるように見える入力、またはニューモーフィック サーフェスの内側の半分を取得します。
実際のプロジェクトで私を悩ませたパフォーマンス ノートの 1 つは、アニメーションです box-shadow フレームごとに強制的に再塗装します。ホバー時にカードを持ち上げたい場合は、アニメーション化します transform そして、より大きな影を保持する 2 番目の要素をクロスフェードします。 the MDN ボックスシャドウリファレンス 構文を完全に文書化します。
ドロップシャドウ以外にテキストシャドウは何に良いですか?
同じ考えで、1 つの値が少なくなります。 text-shadow スプレッドはありません:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
その興味深い用途は影ではまったくありません。
概要. ぼかしゼロで 4 つのハード シャドウ、対角線に 1 つ、テキストの周りにストロークを偽装します。より重いです -webkit-text-stroke しかし、それはどこでも機能し、それは差を分割するのではなく、グリフの外側をレンダリングします:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
グロー. ゼロオフセット、大きなぼかし、飽和した色、強度を高めるために 2 ～ 3 回繰り返します。
画像上の可読性. 白いテキストの下の単一の柔らかい暗い影は、背景があなたが制御しない写真であるとき、あなたはコントラストを買います。それは適切なスクリムの代わりではなく、失敗したコントラスト比を保存しませんが、明るいパッチに消えるディセンダーを止めます。
3 つすべてを上に構築します テキストシャドウジェネレータ。 効果ではなくコントラスト要件を追っている場合は、結果を照合してください WCAG と カラーコントラストチェッカー 目をつけるのではなく.
なぜ境界半径は 8 つの値をとるのでしょうか?
ほとんどの人は1 つを使います。 full formは4 つずつ2 つのグループで、スラッシュで区切られています:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
スラッシュの前: 各コーナーの水平半径、左上から時計回り その後: 垂直半径 両方を与え、各コーナーは 4 分の 1 円ではなく楕円になります。これにより、SVG を使用しない有機ブロブ形状が得られます。
知っておく価値のある 2 つの行動。
パーセンテージは異なる軸に対して解決されます. 水平半径 % は要素& #39; s の幅、その高さの垂直の1 のパーセンテージです。 で border-radius: 50% 長方形では、丸い長方形ではなく楕円形になり、初めて人々を驚かせます。
ブラウザが重なると半径方向に縮小します。 2 つの隣接する半径の合計が 共有する辺よりも大きくなった場合 すべての半径は 合うまで比例して減少します 形状をオーバーフローさせることはできません だから border-radius: 9999px 確実に錠剤を製造します.
ザ・ ボーダー半径ジェネレーター 8 つの値すべてをコーナーごとのスライダーで公開し、有効な最短速記を放射します。これは、スラッシュ形式を手書きするのは本当に不快であるため、価値があります。
CSS フィルターは何ができるのか、またそのコストは何なのか?
filter グラフィック操作を要素とその内部のすべてに適用します:
filter: blur(4px) brightness(1.1) saturate(1.2);
関数は左から右に構成され、順序によって結果が変わります。ぼかしから増光は、増光から増光と同じではありません。
| 機能 | する | 向け 見る |
|---|---|---|
blur() |
ガウスぼかし | 大きな半径で高価です; エッジを外側にぼかします |
brightness() |
軽さをマルチプライします | 1 クリップ以上は白にハイライトします |
contrast() |
ミッドグレーから値を押します | 細部を速く押しつぶします |
grayscale() |
彩度を取り除きます | 重複した資産よりも安いです |
sepia() |
暖かいトーンマップ | と組み合わせる hue-rotate() 他の色合いのために |
hue-rotate() |
色相を角度ごとにシフトします | 知覚された軽さを保持しません |
drop-shadow() |
アルファに続く影 | 異なり box-shadow、実際の形に従います |
最後の行は覚えておく価値のある行です。 box-shadow ボーダーボックスをシャドウするため、ロゴの透明な PNG は長方形のシャドウになります。 filter: drop-shadow() アルファチャンネルをトレースし、ロゴ自体をシャドウします。
コストは実数です フィルターは要素をそれ自身の合成層に押し付けます そして blur() 特に広い範囲では高価です。ボタンで問題ありません。ローエンドの携帯電話の全ページ オーバーレイで 2 回考えてみましょう。 MDN' s フィルター参照 すべての関数とその補間動作をリストします。
で組み合わせを試してください CSS フィルター ジェネレーター、プレビューと正確な宣言を並べて表示します。
動作するガラスモーフィズムパネルを構築するにはどうすればよいですか?
曇らされたガラスは仕事をする1 つの財産です:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter 何が何であるかをフィルタリングします 後ろ 要素そのものではなく要素。 から3 つのことが続き、それらはほぼすべての" なぜ私のグラスは灰色の箱のように見える" 質問を説明します。
その背後に何かが必要です. 平坦な背景色の上では、ぼやけた背景色も同じ平坦な色になります。この効果は、写真、グラデーション、または重複するコンテンツの上にのみ存在します。
背景は半透明でなければなりません. 完全に不透明な背景は、ぼやけた背景を完全に隠します。 10% ～ 25% の白が通常の範囲です。
飽和がそれを売るのです. 本物のガラスは色を濃縮します。 saturate(180%) ぼかしに加えて、すりガラスと汚れの違いもあります。
ガラスにはエッジがあるため、ヘアラインの境界線を追加し、出荷前にコントラストを確認します。ぼやけた写真上のテキストは写真に応じてパスまたは失敗し、ヒーロー画像を完全に読み取るパネルは次回では読めない場合があります。
ザ・ Glassmorphism Generator 実際の画像をプレビューします。これは、このガイドの他の効果よりも重要です。
ニューモーフィズムは使う価値があるのか?
ニューモーフィズム、またはソフトUIは、要素を背景の上に浮かぶのではなく、背景から押し出されたように見せます。 2つの影、反対側の角、1つは表面より明るく、もう1つは暗いです:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
押された状態と交換するか、使用します inset どちらも彫刻された外観です。
このテクニックには、次の 1 つの厳しい制約があります: 要素とその背景は同じ色でなければなりません. 効果は完全に 2 つの影であるため、異なる背景にあるニューモーフィック ボタンは押し出されたものとして読み取れなくなり、壊れたものとして読み取られ始めます。
それはまた正直である価値があるアクセシビリティの問題を持っています 全体の美学は建設によって低コントラストであり、柔らかい影だけのアフォーダンスであるボタンは失敗することができます WCAG'非テキストコントラスト要件 インタラクティブコンポーネントの場合 使用する場合は、ボタンに実際の境界線または影に依存しないフォーカススタイルを与えます。
ザ・ Neumorphism Generator 両方の影の色を表の色から導き出しますが、これは手作業で行うのが面倒な部分です。
ユニットコンバーターはいつ必要ですか?
デザインツールは px を話し、優れた CSS は px を話さないことが多いため、思っているよりも頻繁に発生します。
rem はルートのフォント サイズに相対的なものであるため、rem のレイアウトは、ユーザーがブラウザ & #39; のデフォルトのテキスト サイズを変更するとスケーリングされます。 em は に対して相対的である エレメント' s フォント サイズ。独自のテキストを追跡するパディングや、ネストされた要素を介して合成される場合に危険なパディングに役立ちます。
算術は些細なことです スペックの翻訳中に40 回行うと 特にルートのサイズが16pxでない場合 ミスが忍び寄る場所です The CSS ユニット コンバータ 設定可能なルートを取得し、すべてのユニットを一度に表示します。
グラデーションの場合、 グラデーションジェネ 線形、放射状、円錐形をカバーしており、書き込みが長くなります CSS グラデーション ガイド。
それらをまとめると、カードが完成し始めます
プロパティが単独で使用されることはほとんどありません。ここに、私が構築する方法で構築された、そのうちの 4 つを使用するカードがあります。
形と休んでいる影から始めます:
.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;
}
再び2 つの影、両方とも光です 休んでいるカードはかろうじて持ち上げられるはずです ホバー状態のためにドラマを保存します。
.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 認識されている作業のほとんどを行います。動きは、より大きな影よりも説得力のある揚力として読み取られます。また、変換は再塗装されるのではなく合成されるため、安価です。
カードがフラットページの代わりに写真の上に座っている場合は、白い背景をガラスに交換します:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
何が変わり、何が変わらなかったかに注意してください。半径と影は手付かずで引き継がれます。表面処理のみが異なります。これが有用なメンタル モデルです。形状と深さは 1 つの決定であり、表面は別の決定です。
ブラウザのサポートとフォールバックについてはどうですか?
このほとんどは古く、安全です。 box-shadow、 text-shadow、 border-radius あんど filter 何年もの間どこでもサポートされており、考え直すことなく書くことができます。
backdrop-filter は扱う価値のある例外です サポートは今幅広いですが、それが欠けているときに真に壊れたように見える結果を生み出すのは、ここでの1 つのプロパティです: 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%);
}
}
フォールバックはほとんど不透明なパネルであり、これは効果ではありませんが、完全に使用できます。拡張バージョンは、ブラウザが配信できる場所でのみ適用されます。 MDN' s @supports 参照 構文をカバーしており、プロパティの障害モードが単に単純なものではなく、視覚的に壊れている場合はいつでも到達する価値があります。
プロジェクト全体でエフェクトの一貫性を保つにはどうすればよいですか?
実際のコードベースの障害モードは 1 つの悪い影ではありません。カードが必要な人は誰でも自分で書いたので、14 のわずかに異なる影になります。
それらをカスタムプロパティとして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 つのシャドウステップで十分です.4 つ目を追加していることに気づいた場合、それは多くの場合、コンポーネントに別のものが必要であるためです 標高 別の影ではなく、既存のステップを再利用することが答えです。
これにより、ダークモードも扱いやすくなります 白に作用する影は、暗い表面では見えないものに近く、通常、深さは明るい境界線または代わりに微妙な輝きから得られます メディアクエリ内のトークンを再定義し、すべてのコンポーネントが続きます:
@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);
}
}
上記のツールで各値を1 回生成し、トークンブロックに貼り付けて、考えるのをやめる それがジェネレータを持つことの要点です: 手書きで書けなかったCSSを書くのではなく、一度決めるだけで済む値に注意を費やすのをやめることです。
これらの影響がアクセシビリティの問題を引き起こす場所
このガイドのすべてのプロパティはコントラストを操作します。コントラストは、アクセシビリティ要件が主に考慮されるものです。 4 つの特定のトラップ。
インタラクティブ コンポーネントには目に見える境界が必要です。 WCAG 2.2 では 3:1 のコントラストが必要です コントロールの識別する部分の場合。ソフトシャドウが唯一のエッジであるボタンは、それを失敗する可能性があります。これは、新同型の構造上の問題であり、境界やソリッドフォーカスリングがオプションではない理由です。
ガラス パネルは背景を継承します' s のコントラストの問題。 曇らされたパネルのテキストは、その背後にある写真に応じて判読可能か判読できず、写真はしばしば変更されます。ヒーローではなく、最悪のイメージに対してテストしてください。パネル' の背景の不透明度を上げることは、通常、テキストをより大胆にするよりも優れた修正です。
フィルターは静かにコントラストを変更します。 brightness() あんど contrast() コンテナに適用すると、その中のテキストにも適用されます A filter: brightness(1.15) カード上でポップにすると、体内テキストを 4.5:1 のしきい値以下に静かにプッシュできます。後で確認してください カラーコントラストチェッカー、以前ではない.
影を唯一の状態インジケーターにしないでください。 ホバー、フォーカス、プレスが影の深さによってのみ異なる場合、キーボード ユーザーとロービジョンの人は区別を失います。影の変化とトランスフォーム、アウトライン、またはカラー シフトを組み合わせます。
これらのいずれもエフェクトを使用できなくすることはありません。これにより、エフェクトは想定されるのではなく検証されるものになり、コントラスト チェッカーを開いた状態でコンポーネントごとに約 1 分かかります。
これらのツールは私の作品をどこかに送ってくれますか?
いいえ ここにあるジェネレータはすべてブラウザで完全に実行されます アップロード手順とサーバーの往復はありません そのため、スライダーをドラッグすると即座に反応します これは、カタログの残りの部分がオフラインで動作するのと同じ理由です データ プライバシー ガイド。
よくある間違い
- 影が2 つではなく1 つに. 手書きの影とデザインされた影の最も目に見える唯一の違い。
- アニメーション化
box-shadowホバーで. すべてのフレームをリペイントします。アニメーション化しますtransformそして代わりにクロスフェードします. backdrop-filter無地. 何もぼやけることはないので、何も起こりません。- ガラスパネルの不透明な背景. 今書いた効果を隠します.
- 不一致の背景上の新同型性. 錯覚はそれらが同一であるかどうかにかかっています。
border-radius: 50%丸みを帯びた長方形を期待します. 非正方要素では楕円が得られます。- これらのいずれかをコントラストチェックなしで発送します。 影とガラスはどちらもコントラストを低下させ、どちらも優れたモニターで簡単にオーバーチューニングできます。
