Box Shadow Generator
Generate box shadows
Generate box shadows ブラウザ内でローカルに実行
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
ボックス シャドウ ジェネレーターは、ライブ プレビューと CSS を使用して、オフセット、ブラー、スプレッド、カラー、不透明度からシャドウを作成します。人々が混同する 2 つの設定は、ブラーとスプレッドです。ブラーはシャドウの形状から外側と内側にエッジを柔らかくしますが、スプレッドはブラーが発生する前にシャドウ自体のサイズを拡大または縮小します。負のスプレッドは、ソフト シャドウがハローのように見えるのを防ぐものです。そのため、ここではデフォルトで小さな負の値が使用されています。
Where people use the
- カード、モーダル、メニューの標高スケールを構築します。
- 差し込み影で押された状態またはフォーカスされた状態を作ります。
- 実際の境界線を追加せずに境界線を柔らかくします。
- 設計仕様のシャドウ値が実際にどのように見えるかを確認します。
How to use the
- 1
オフセットを設定する
オフセット X は影を右に移動し、オフセット Y は影を下に移動します。負の値を指定すると、逆の方向に移動します。
- 2
ぼかしと広がりを設定する
ぼかしを加えるとエッジが柔らかくなります。スプレッドはぼかしの前に影を拡大します。要素の周囲ではなく要素の下にある影には、小さな負の広がりを使用します。
- 3
色と不透明度を選択してください
完全な不透明度の純粋な黒は粗く見えます。 8 ～ 20% の間の不透明度が低いと、汚れではなく深さとして認識されます。
- 4
内側のシャドウが必要な場合は、インセットにチェックを入れます
インセットは、要素の後ろではなく内側に影を描画します。これは、押された状態やウェルに適しています。
- 5
CSSをコピーする
ルールには rgba カラーが含まれているため、スタイルシートに直接貼り付けることができます。
ヒントとベストプラクティス
- 影を 1 つだけ重くするよりも、2 つの影を重ねた方がはるかに見栄えがします。
- 光源を一貫したものに保ちます。1 枚のカードが右下にキャストされた場合、すべてのカードが右下にキャストされる必要があります。
- オーバーフローが非表示になっている親によってシャドウがクリップされることに注意してください。
よくある質問
ブラーとスプレッドの違いは何ですか？
Spread は、ソフト化する前の影の形状のサイズを変更します。正の場合は拡大し、負の場合は縮小します。次に、ブラーにより、指定された半径だけエッジが柔らかくなります。カードの下にしっかりとした影を付けるには、小さなぼかしとわずかにマイナスのスプレッドが必要です。
私の影が灰色で汚く見えるのはなぜですか?
不透明度が高いと真っ黒なので。 0.08 ～ 0.2 程度の低いアルファを使用し、シャドウを背景の色相に向けて着色することを検討してください。これにより、より自然に表示されます。
複数の影を付けることはできますか?
はい。同じ宣言内で複数のシャドウをカンマで区切ります。それらは前から後ろに積み重ねられるため、最初のものが一番上になります。レイヤー状のシャドウにより、柔らかくリアルな標高が構築されます。
ボックスの影はレイアウトに影響しますか?
いいえ。シャドウは要素のボックスの外側に描画され、スペースをとらないため、オーバーフローを非表示にした親またはタイトなコンテナーによってクリップできます。
ボックス シャドウのアニメーション化にはコストがかかりますか?
はい、比較的です。ぼかしやスプレッドを変更すると、ブラウザはフレームごとに影を強制的に再描画します。スムーズな動きを実現するには、代わりに不透明度をアニメーション化するか変換するか、事前にレンダリングされた 2 つのシャドウ間をクロスフェードします。