Card Shadow CSS — 微妙なボックスシャドウ コード
CSS ボックス シャドウ コードを視覚的に構築します。オフセット、ぼかし、スプレッド、不透明度のあるカラー、インセット モード、およびライブ プレビューを備えた最大 4 つのレイヤーのスライダー。
処理中...
0%
結果
このページでは、クラシックなカード シャドウ (下 2 ピクセル、ぼかし 8 ピクセル、黒の不透明度 15%) にプリセットされたボックス シャドウ ジェネレーターが開きます。それは意図的に静かであり、カードをページから切り離すのに十分なほど静かであり、プレビューはまさにその静かさを示しています。
この範囲は、リスト カード、ドロップダウン メニュー、ポップオーバー、ホバー時のテーブル行など、ほとんどのデザイン システムの最低のエレベーション ステップに対応します。モーダルまたはフローティング パネルにより強いリフトが必要な場合は、Y オフセットを上げて一緒にブラーします。光源を信じられるものに保つために、それらは比例して大きくなるはずです。
ボックス シャドウ ラインをコンポーネント スタイルにコピーするか、よりきつめのぼかしを加えて 2 番目のレイヤーとして複製して、エッジ定義を追加します。このツールは無料で、ブラウザ内で完全に実行されます。