デザイナーが新しい UI デザインのドラフトを送ってきたので、それを開いて見てみると、あらゆる種類の美しいカード、ボタン、ポップアップ ウィンドウがあり、すべてソフト シャドウ効果が付いています。これらの詳細により、インターフェイスが階層化された、モダンで洗練されたものに見えます。
しかし、ここで疑問が生じます。これらの影を復元するにはどうすればよいでしょうか?
パラメータを手動で調整するのは面倒
最初はとても簡単だと思いました。
box-shadow だけじゃないですか？ブラウザの開発者ツールで調整を開始しました:
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
保存、更新、間違っています。再度変更します:
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
まだ間違っています。 20回以上行ったり来たりした後、デザイナーは「まだ感触が良くない。もっと柔らかくしないと…」と言いました。
私は打ちのめされました。
box-shadow のパラメータ トラップ
box-shadowパラメータは 5 つあります:
- 水平オフセット(offset-x) — 影は左または右に移動します
- 垂直オフセット(offset-y) — 影は上または下に移動します
- ブラー半径(blur-radius) — シャドウのフェザリング度
- スプレッド半径(spread-radius) — シャドウのスケーリング
- color(color) — シャドウのカラーは透明度をサポートします
各パラメータが変更された場合ほんの少しで、効果は全く異なります。さらに悪いことに:
- 正の値と負の値は、異なる方向でまったく逆の効果をもたらします
- ぼかし半径と拡散半径の相互作用を直感的に理解するのは難しい
- 色の透明度を RGBA 形式に変換する必要があります
30 分が経過しても、私はまだ最初のシャドウを調整していました。ページ全体に 20 種類以上の異なる影効果があります...
視覚ツールで問題を解決
ToolMi の CSS 影ジェネレータを開きました。
インターフェイスは非常に直観的です:
- さまざまなパラメーターを制御する 5 つのスライダー
- リアルタイム プレビュー エリアの表示効果
- 内側の影と外側の影の切り替えをサポート
- 生成されたコードをワンクリックでコピー
まずは試してみる
デザイナーは、「このカードの影はより柔らかく、階層感があります。」と言いました。
ツールで:
- ぼかし半径を 24 ピクセルにドラッグ
- 不透明度を 15% に設定
- 垂直オフセットを 8 ピクセルに調整
ライブ プレビュー エリアにすぐに効果が表示されました。まさに私が望んでいたソフト シャドウです。
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
「コピー」をクリックしてコードに貼り付け、ページを更新します。デザイナーはそれを見て、「はい、そのような感じです!」
すべてのシャドウのバッチ処理
最初の成功の後、処理がはるかに速くなりました:
- ボタン シャドウ:
0px 2px 8px rgba(0, 0, 0, 0.1) - ポップアップ シャドウ:
0px 12px 32px rgba(0, 0, 0, 0.2) - 入力ボックス フォーカス シャドウ:
0px 0px 0px 3px rgba(66, 153, 225, 0.3)
各シャドウは、プレビューと調整を含めて完了までに平均 30 秒かかります。
2 時間から 20 分
効率の比較を計算してみましょう:
| 方法 | 1 回のシャドウ時間 | 20 回のシャドウ合計時間 | 精度 |
|---|
| 手動調整 | 5 分||~100 分 | 60% | 視覚化ツール |
| 1 分 | ～20 分 | 95% | 実践的なヒント |
1.よく使用されるシャドウ パラメータ
何度も練習した後、いくつかの一般的なパラメータをまとめました:
ソフト カード シャドウ:
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
- フローティング ポップアップ ウィンドウ シャドウ:
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2);
インナー シャドウは沈んだ効果を作成できます:
入力ボックスの沈んだ効果
/3。シャドウ階層の原則/
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
要素がユーザーに近づくほど、シャドウが強くなります (ポップアップ > カード > ボタン)
- 同じレベルの要素は一貫したシャドウ強度を持ちます
- 過剰なシャドウ強度を避け、視覚的な統一性を維持します
- 4。パフォーマンスに関する注意事項
影はレンダリングのパフォーマンスに影響します。推奨事項:
モバイル端末でのシャドウの使用を減らす
- アニメーション中にボックス シャドウを変更しない
- 広い範囲のシャドウに疑似要素の使用を検討する
- 私の経験の概要
視覚化ツールを使用した後のワークフローは次のようになりました:
ツールを開く
- — ページの読み込み < 1 秒パラメーターを調整
- — スライダーをドラッグしてリアルタイムでプレビューコードをコピー
- —ワンクリックのコピー アンド ペーストを使用します微調整と最適化
- — 実際の効果に応じて微調整しますプロセス全体がスムーズかつ自然で、「長時間修正しても動作しない」というフラストレーションはもうありません。
影パラメータのクイックチェック
効果
| オフセット x | オフセット y | ぼかし | 広がり | 不透明度 | わずかに浮いている |
|---|
| 2px| ||8px | 0 | 10% | ソフトカード | 0 | 24px |
| 15% | 0 | 8px | 強力なフローティングレイヤー | 0 | 12px |
| 32px | 0 | 20% | デボス効果 | 0 | 4px |
| 6% (インセット) | 0 | 2px | 概要 | 0 | CSS box-shadow のパラメータ調整は開発にとって負担ではありません。視覚化ツールを使用すると、次のことが可能になります: |
⚡ シャドウ コードをすばやく生成
👁️ エフェクトをリアルタイムでプレビュー
- 🎯 各パラメーターを正確に制御
- 📋 ワンクリックでコピーして使用
- すべての影の調整が 20 分で完了すると、デザイナーは満足し、私は時間を大幅に節約できます。これが効率的な作業方法です。
- 📋 一键复制使用
20 分钟完成所有阴影调整，设计师满意，我也省了大量时间。这才是高效的工作方式。