差し込み CSS ボックス シャドウ — 既製のコード
CSS ボックス シャドウ コードを視覚的に構築します。オフセット、ぼかし、スプレッド、不透明度のあるカラー、インセット モード、およびライブ プレビューを備えた最大 4 つのレイヤーのスライダー。
処理中...
0%
結果
このページでは、インセット チェックボックスがすでにチェックされている状態でボックス シャドウ ジェネレーターが開きます。そのため、シャドウは要素の後ろではなく要素の内側に描画されます。プレビュー カードには沈んだ効果がすぐに表示され、すべてのスライダーは CSS 行をライブで更新し続けます。
差し込みシャドウは、CSS が内側に向かって深さを偽装する方法です。押されたボタンの状態、検索フィールドと入力ウェル、プログレスバーの谷、彫刻されたパネルはすべて、差し込みシャドウに依存しています。シャドウが内側のエッジを囲むため、ブラーとスプレッドの動作は通常のドロップ シャドウとは若干異なります。ここでのスライダーを使用すると、その違いをすぐに感じることができます。
くぼんだ外観が適切であれば、ボックスの影の線をスタイルシートにコピーします。また、インセット レイヤーを通常の外側レイヤーと組み合わせることもできます。2 番目のレイヤーを追加し、その上でインセットのチェックを外すと、両方を 1 つの宣言で混合できます。