何年もの間、私の影は偽物に見え、その理由を理解できませんでした。私は書きます box-shadow: 0 5px 10px black、泥だらけの灰色の光輪を得て、トーンを下げ、漠然と不満を感じながら進みます カードは影ではなく打撲傷があるように見えました 私が賞賛したデザインシステム - カードが本当に浮いているように見えるもの - を引き離し始めたときに初めて、そのトリックに気づきました 彼らは決して1つの影を使用しません 彼らは2つまたは3つ積み重ね、それぞれ異なる仕事をし、結果は光が実際に振る舞うように光として読み取られます。
私は React と Tailwind でインターフェイスを構築して生計を立てています。WP Adminify では影が視覚的な階層を多く運ぶ WordPress 管理テーマを維持し、それを構築しました CSS ボックス シャドウ ジェネレーター テキストエディタでマルチレイヤーシャドウを手作業でチューニングして、結果を確認するためにリロードすることに飽きたため、 Toolz.dev で このガイドは、私が学んだすべてのものです box-shadow プロパティ: 各値が何をするか、なぜレイヤー化が機能するか、一般的なトラップを回避する方法、ジェネレーターを使用して空白の要素から量産 CSS に数分で移行する方法。
tl;dr: CSS
box-shadowX オフセット、Y オフセット、ぼかし半径、拡散半径、および色を取得しますが、オプションですinsetキーワード.ぼかしはエッジを柔らかくする; スプレッドはぼかしをする前に影を成長または縮小する. real 標高は、1 つのシャドウをクランキングすることからではなく、複数のカンマ区切りの影を積み重ねることから来る& #39; s 不透明度. low-opacity ブラック、小さな Y オフセット、寛大なぼかし、およびわずかに負のスプレッドを使用する - その後、ジェネレータから CSS をまっすぐにコピーします。
Box-shadow プロパティは実際に何をしますか?
box-shadow 要素 & #39; の境界ボックスの周囲に 1 つ以上の影をペイントし、プロパティは で指定されます CSS の背景と境界 レベル 3.単一の影の構文は次のようになります:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
オフセットが必要です; ぼかし、広がり、色はオプションですが、ほとんどの場合、それらを設定します。チューニング時にそれらについて考える方法で、それぞれが制御するものは次のとおりです:
オフセット X 影を水平に移動します。正の値は影を右に押し、負の左に押します。ほとんどのインターフェイス シャドウでは、これをゼロまたはゼロ付近にする必要があります。現実世界の光は通常、上から来て、影を横に落とすのではなく、まっすぐに下に落とすためです。
オフセット Y 影を垂直に移動します 正の値は影を押し下げます これはページの上に座っているように見える要素に 求めるものです これは " high" のやり方を 最も制御する単一の値です 要素の感じ方。
ブラー半径 shadow& #39; s edge を柔らかくします。 zero の値は、ソリッドシェイプのようなハードエッジの影を与えます。; 大きな値は、柔らかさを広げます。これは負ではありません。ほとんどすべての自然に見える影は、Y オフセットよりも数倍大きいぼかしを使用します。
半径の広がり ぼかしがかかる前に影のサイズを変更します 正の広がりは影をあらゆる方向に大きくします; 負の広がりはそれを縮小します 負の広がりは、要素を超えて滲み出さないように影を引き込むため、タイトで信頼できるカードシャドウの秘密兵器です。
色 は有効な CSS カラーです。 最高のインターフェイス シャドウは、低不透明度で黒または黒に近い色を使用します。のようなもの rgba(0, 0, 0, 0.1) - 完全に不透明なグレーではなく、半透明の黒が後ろにあるものを本物の影と同じように色付けするからです。
なぜ良い影は複数のレイヤーを使用するのですか?
これは私の影を完全に変えたアイデアですので、独自のセクションを取得します。 1 つの影は単一の均一な塊です。 実際の影は均一ではありません。 物体に近いほど、影はより暗く、より鮮明です。さらに遠くでは、より明るく、より拡散します。影を積み重ねることで、その落ち込みを近似します。
古典的なレシピは2 つの層です: 要素の近くに座って鮮明なベースを与えるタイトでわずかに暗い影に加えて、その下のより柔らかく、より広く、明るい影が周囲の拡散を提供するようなもの:
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
ブラウザは、最初の1 つを上にして、コンマで区切られた影を順番にペイントします 各レイヤーは安価で、2 つまたは3 つ一緒に、単一の影ができない方法で本物の深さと読み取られます どのようにチューニングしても、ジェネレーターが単一のスライダーセットではなくレイヤーを中心に構築されているのはまさにこのためです - the CSS ボックス シャドウ ジェネレーター カード、エレベート、フローティングなどのプリセットがすべてマルチレイヤーになっているため、孤独な塊ではなく現実的なベースから開始できます。
私が使用するメンタルモデル: 標高レベルで考える 休憩カードは小さくタイトな影で低く座ります ドロップダウンまたはポップオーバーは、より大きく柔らかい影で高く座ります モーダルはすべての中で最も高く座ります 標高を上げることは、1 つの影を暗くするだけでなく、すべてのレイヤーを一緒に Y オフセットしてぼかしを増やすことを意味します。
内なる影を作るにはどうすればよいですか?
ザ・ inset キーワードは、要素& #39; sのパディングボックス内に影を反転させます, 外側にキャストする代わりに. 追加します inset 影の宣言の前に、そしてそれは要素内に塗ります:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
内側の影は、コントロールを押したり、埋め込んだり、彫り込んだように見せる方法です。テキスト入力は、多くの場合、テキストが内側に収まっていることを暗示する微妙な挿入影で読みやすくなります。押されたボタンの状態は、その外側の影を内側の影と交換して、物理的に落ち込んでいるように感じることができます。そして、ニューモーフィズムの傾向全体は、一方の方向からの光の挿入と他方の方向からの暗い挿入の組み合わせに基づいて構築されます。ジェネレーターでは、挿入はレイヤーごとに 1 つのトグルであるため、同じ要素に挿入と開始の影を混合できます。これはまさにニューモーフィック サーフェスに必要なものです。
Box Shadow Generatorはどのように使用すればよいですか?
フローは、私が実際にどのように作業するかと一致するように設計されています。 を開きます CSS ボックス シャドウ ジェネレーター そして、現実的なカード プリセットがすでに適用されているプレビュー要素に着地するため、空白のキャンバスを見つめることはありません。
プリセットをピックして、必要なものに近づけます - Subtle、Card、Elevated、Floating、Inner、Glow、Neumorphic、または Sharp それぞれがレイヤースタックをフルロードしてから、レイヤーを選択してスライダーでチューニングします: offset X、offset Y、blur、spread それぞれが独自の制御を持ち、さらにカラーピッカー、不透明度スライダー、挿入トグルをドラッグするとプレビューがライブで更新されるため、数値を編集して結果を想像するのではなく、シャドウを直接形成します。
さらに奥行きが必要な場合は、レイヤーを追加します。レイヤーが何も役に立たない場合は、レイヤーを削除します。プレビューを明暗に切り替える背景トグルがあります。明色のカードでは完璧に見える影が消えたり、暗いカードでは醜い灰色のリングに変わったりする可能性があるため、重要です。発送前に両方をチェックすると往復が節約されます。
喜んだらCSSをコピーする 平野をつかめる box-shadow 宣言、または を含むブロック -webkit-box-shadow 非常に古い WebKit ビルドをサポートする必要がある場合は、プレフィックスを付けます。スタイルシート、スタイルされたコンポーネント、または Tailwind の任意の値に貼り付けると完了です。
サイト上のすべてのツールと同様に、ブラウザで完全に実行されます。何もアップロードされず、ロードされるとオフラインで動作し続けます。これは、で説明するクライアント側のアプローチと同じです データ プライバシー ガイド。
現実世界のユースケース
設計システムのための標高スケールの構築
新しいプロジェクトをセットアップするとき、私はすべてのコンポーネントに独自の影を発明させるのではなく、標高レベルの固定セットを定義します。通常、それは "resting card" から 4 つまたは 5 つのステップです。 "modal." までです。ジェネレーターにそれぞれを構築し、CSS をコピーして、名前付き値としてデザイン トークンにドロップします。すべてのカード、メニュー、ダイアログはレベルを参照するため、製品全体が一貫したライティング モデルを共有します。これをテキスト エディターで手作業で行うのは惨めです。ライブ プレビューで行うには数分かかります。
実際にカードを浮かせること
デフォルトの本能は単一の暗い影で、貼り付けられているように見えます。修正は 2 層のレシピです。カードを固定するために小さな Y オフセットと負の広がりを持つタイトなレイヤーと、周囲の光のためにその下にあるより広くて柔らかいレイヤーです。カードまたはエレベーテッド プリセットから開始し、好みに合わせて値をナッジすると、輪郭が描かれているのではなく、持ち上げられていると表示されるカードが得られます。
プレスとフォーカスのある状態の設計
インタラクティブなフィードバックは影の中に存在することがよくあります。ボタンは外側の影の大部分を失い、物理的に押されているのを感じるために押すと小さなはめ込みが得られる可能性があります。入力には、井戸のように見えるように永続的な微妙なはめ込みが含まれる可能性があります。これらは、はめ込みを切り替えてプレビューを見ることでプロトタイプを作成するのが速く、非常に小さなコードに対して知覚される研磨を多く追加します。
新形表面
soft-ui ルックを選択する場合は、同じ要素上の反対方向を指す 2 つの影 (暗い影は右下、明るい影は左上) が必要であるため、表面は背景から押し出されて表示されます。 Neumorphic プリセットがこれを設定し、特定の背景に合わせて色、不透明度、ぼかしを調整します。純白でも純黒でもない背景でのみ動作し、暗い背景の切り替えがチェックに役立ちます。
ボックス シャドウとフィルター: ドロップ シャドウ
よくある質問:いつ使用すればよいのか filter: drop-shadow() 代わりに box-shadow?似てはいるが振る舞いが異なり、間違った選択をすると本物のバグが発生する。
| 特集 | ボックスシャドウ | フィルター: drop-shadow() |
|---|---|---|
| フォロー | 長方形のボーダーボックス | 実際の可視 (非透過) ピクセル |
| に最適 | カード、ボタン、パネル、入力 | ロゴ、アイコン、透明度のあるPNG、不規則な形状 |
| はめ込みをサポート | はいって | いやー |
| スプレッドをサポート | はいって | いやー |
| 複数の影 | はい、カンマ区切りです | はい、フィルターを連鎖させることによって |
| レイアウトに影響を与えます | いやー | いやー |
短いバージョン: 通常の長方形の要素の場合は、を使用します box-shadow ー より有能で、スプレッドとインセットをサポートし、このジェネレーターが生成するものに なる。 に到達する drop-shadow() ロゴや切り抜きアイコンなど、長方形の影が間違って見える透明または不規則な形状を影でトレースする必要がある場合に限ります。
高度なヒントとトラップ
燃やされたことがいくつかある まず影が切り取られる overflow: hidden 祖先について あなたの美しい影が不思議なことに切り取られている場合、祖先はそれを切り取っています - 影の部屋を与えるか、または移動します overflow 他の場所で支配するのです なぜなら box-shadow レイアウトには決して影響せず、隣接する要素をプッシュすることもありません。これは特徴ですが、兄弟の下に影が静かに伸びる可能性があることも意味します。
第二に、多くの要素で大きなぼかしが発生すると、特にアニメーション化すると、ペイントパフォーマンスが低下する可能性があります。スクロールまたは長いリストの上にカーソルを合わせる場合は、フレームレートに注意してください; 静的な影を保持する疑似要素の不透明度をアニメーション化する方が安価になる場合があります。 CSS が完成したら、それを実行します CSS ミニファイア 多層シャドウが追加する余分なバイトを剃ります。
第三に、影の色は黒以上のものになる可能性があることを忘れないでください。非常に微妙に着色された影 - 純粋な黒ではなく、あなたの表面と#39; sの色合いの暗いバージョン - 実際の影が周囲の色を拾うため、ニュートラルグレーよりも豊かに見えることがよくあります。それは不釣り合いな見返りを持つ小さな動きです。
より広範な CSS ツールキットを組み立てる場合は、 Web 開発者ツールキット ガイド シャドウ ワークが他のブラウザベースのユーティリティに当てはまる場所をカバーし、シャドウが完成したら、 グラデーションジェネ あんど カラーピッカー 表面スタイリングを丸めます。アクセシビリティが気になる場合は、これを と組み合わせてください カラーコントラストチェッカー したがって、影付きカードに記載されているコンテンツは読みやすいままになります。
フェイク
CSS ボックス シャドウ プロパティとは何ですか?
box-shadow は要素 & #39; s フレームの周りに 1 つ以上の影を追加します。各影は水平オフセット、垂直オフセット、オプションのぼかし半径、オプションの拡散半径、および色を受け取り、オプションの挿入キーワードを使用してボックス内に影を描画します。複数の影はカンマで区切られ、最初の影が上にペイントされます。
ブラーとスプレッドはどう違いますか？
ぼかし半径は影のエッジを柔らかくするので、値が大きいほど拡散性が高くなります。広がり半径はぼかし前に影と#39; のサイズを変更します。正の広がりではあらゆる方向に影が成長しますが、負の広がりでは影が縮小します。これにより、影をカードの端から滲むのではなく、カードの下にしっかりと押し込みます。
CSS で内部の影を作成するにはどうすればよいですか?
影に挿入キーワードを追加します。 inset は、押されたボタン、入力ウェル、およびニューモルフィック サーフェスに便利な、外側の代わりに element' s パディング ボックスの内側に影を描画します。 generator で挿入スイッチを切り替えると、選択したレイヤーに自動的に追加されます。
1 つの要素で複数のボックス シャドウを使用できますか?
はい。 1 つのボックスシャドウ宣言にカンマで区切っていくつかの影をリストし、ブラウザは最初の影を上にして順番にペイントします。小さくて暗い影の下に柔らかく広い影を重ねることが、高さを貼り付けるのではなく現実的に見せる標準的な方法です。
ボックス シャドウが切り取られるのはなぜですか?
影は、祖先がオーバーフロー: 隠れている場合、または要素がクリッピング コンテナの端にある場合に切断されます。 shadow room を与えるか、オーバーフロー: 隠されているルールを別の要素に移動します。 box-shadow はレイアウトに影響を与えないため、隣接する要素をプッシュすることはないため、兄弟の下で静かに拡張することもできます。
ボックス シャドウとフィルター ドロップ シャドウの違いは何ですか?
box-shadow は element' s の矩形ボーダーボックスに従うので、PNG 内部の透明領域や不規則な形状を無視します。 filter: drop-shadow()は、実際に表示されているピクセルをトレースし、透明度のあるロゴやアイコンに合います。 box-shadow は標準的な矩形カードやボタンの場合、正しい選択であり、drop-shadow がしないスプレッドや挿入をサポートします。
box-shadow の -webkit- 接頭辞はまだ必要ですか?
最新のブラウザでは、いいえ。 box-shadow は接頭辞が付けられておらず、長年にわたって広くサポートされています。ジェネレーターが出力できる接頭辞付きブロックは、非常に古い WebKit ビルドをサポートする必要がある場合にのみ役立ちます。ほとんどのプロジェクトでは、標準の box-shadow プロパティだけで十分です。
このボックス シャドウ ジェネレーターは私のデータをどこにでも送信しますか?
いやー 。 プレビューと CSS の出力は、JavaScript を使用してブラウザーで完全に生成されます。 値はアップロードまたは保存されず、ページが読み込まれた後も、ネットワーク接続なしでツールが機能し続けます。
