CSS ボックス シャドウ ジェネレーター

CSS ボックス シャドウ ジェネレーターは、CSS ボックス シャドウ プロパティのビジュアル エディターです。 スライダーでオフセット、ぼかし半径、広さの半径、色、不透明度を調整し、プレビュー要素でライブ結果を表示してから、正確な CSS をコピーします。 ピクセル値を推測してページをリロードする代わりに、影を直接形作り、生成するコードを読み取ります。

このCSSボックスシャドウジェネレータを開き、それはカードプリセットで起動します, box-shadowとしてコピーする2 つのレイヤー:0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a; 不透明度スライダーは、六角形の色に焼き付けられているので、 10% 末尾に1aになります.Innerプリセットをクリックし、宣言は、ボックス-shadowに変わります: inset 0px 2px 4px 0px #00000033;, プレスボタンの外観を追加レイヤーは、0px 4px 6px 0px #00000033, 最後にリストされ、他の下塗り.

ボックス シャドウ プロパティは、一見深いです。 1 つの宣言で複数のシャドウをスタックできます。それぞれにオフセットがあり、ぼかし、広がり、色が付けられ、オプションの inset キーワードで要素内ではなく要素内に描画します。 実際のインターフェースのシャドウは、ほとんどの場合、2 つ以上のレイヤーを使用して自然に見えるようにします。これは、手書きで面倒です。 このツールは、レイヤーを管理し、正しいコンマ区切りの順序で有効な宣言を出力します。

すべてのブラウザで発生します。 プリセットを選択し、レイヤーを調整し、プレビューを明るい背景と暗い背景に切り替えて、標準プロパティまたは -webkit- プレフィックスを含むブロックをコピーします。 アカウントもアップロードもありません。ページが読み込まれた後もオフラインで動作します。

影は箱の外側に描かれ、スペースを占有しないので、隣人を押し回すことはなく、オーバーフローが隠されている任意の祖先によってクリップされます。 「スプレッド」は最も理解されていない値です。ぼやける前に影の形が成長または縮小するため、ぼやけゼロで正のスプレッドを行うと、レイアウトに影響を与えることなくボーダー効果がどのように偽装されるか、しっかりとしたオフセットの輪郭が得られます。 「インセット」は要素内の影を移動させ、押された状態や内側の輝きに役立ちます。オフセットとぼやけが増加するいくつかの影を重ねることは、単一の大きなぼやけが影としてではなく霧として読めるため、説得力のある深さが構築されます。各レイヤーにはレンダリング時間がかかり、スクロールやアニメーション中に再ペイントされる影は、低出力のデバイスでは一般的なジャンクの原因となります。