CSSボックスシャドウ生成ツール
このツールとは CSSボックスシャドウ生成ツール
CSSボックスシャドウ生成ツールを使うと、box-shadowを視覚的に組み立てて正確なCSSをコピーできます。水平方向と垂直方向の位置、ぼかしの半径、広がり、影の色と不透明度を設定すると、スライダーを動かすたびにプレビューが更新されます。1つの要素に複数の影を重ねたり、任意のレイヤーを内側に切り替えたりできるので、出力欄には常に貼り付け可能なbox-shadow宣言が表示されます。
使い方
- 位置のスライダーを動かして、影を水平方向と垂直方向にずらします。
- ぼかしの半径で縁の柔らかさを、広がりで影の大きさを調整します。
- 影の色を選び、不透明度を調整し、内側を切り替えて内向きの影にします。
- 必要ならレイヤーを追加し、出力欄から生成されたCSSをコピーします。
こんなときに便利
硬すぎず今風に見えるカードの影が欲しいときは、位置を0pxと10px、ぼかしを20px、広がりなし、色は黒で不透明度25%に設定し、box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); をそのままスタイルシートにコピーします。ボタンのホバー状態、レイヤーによる奥行き、入力欄をへこんで見せる内側の影にも便利です。
よくある質問
box-shadowの各値は何を表しますか。
順に、水平方向の位置、垂直方向の位置、ぼかしの半径、広がり、色です。位置が正の値だと影は右下へ動き、ぼかしは縁を柔らかくし、広がりはぼかしの前に影全体を大きくまたは小さくします。
広がりの値は何をするものですか。
広がりはぼかしが適用される前に影の大きさを変えます。正の値だと影は要素より大きくなり、負の値だと内側に引き締まるため、片側だけ少し覗くような詰まった影に役立ちます。
影を複数重ねられますか。
はい。好きなだけレイヤーを追加でき、それぞれが同じbox-shadowルール内でカンマ区切りの影になります。柔らかく広い影の上に近くて締まった影を重ねるのは、現実的な奥行きを出す一般的な方法です。
内側の影とは何ですか。
内側の影は要素の背後ではなく内部に描かれるため、ボックスがへこんだり沈んだりして見えます。任意のレイヤーで内側を切り替えられ、入力欄や押されたボタンによく合います。
入力済みの状態でこのツールを共有できますか。
はい。スライダーを調整するとURLが自動的に更新されます。アドレスバーからコピーするか共有ボタンを使えば、リンクを開いた人には同じ影がそのまま表示されます。