box-shadowプロパティの基本的な使い方について書きます。box-shadowプロパティは、要素に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。
記述の仕方
/* 記述例 */ セレクタ名{ box-shadow: 水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 (inset); }
box-shadowプロパティの基本情報
box-shadowプロパティが取る値について説明します。
- 水平方向の距離
- 水平方向の影の距離を指定する
- 正の値だと右に、負の値だと左に影を付ける
- 垂直方向の距離
- 垂直方向の影の距離を指定する
- 正の値だと下に、負の値だと上に影を付ける
- ぼかし距離
- 影をぼかす距離
- 広がり距離
- 正の値だと拡大し、負の値だと縮小する
- 影の色
- inset
- 影が要素の内側に付く
サンプルコード
共通のスタイルを.boxにまとめて、box-shadowプロパティの指定を切り出しています。
<p class="boxshadow1 box">box-shadowで要素に影を付ける</p> <p class="boxshadow2 box">box-shadowで要素に影を付ける</p> <p class="boxshadow3 box">box-shadowで要素に影を付ける</p> <p class="boxshadow4 box">box-shadowで要素に影を付ける</p>
/* 共通のスタイル */ .box{ font-size:24px; font-weight:bold; background:#f3f3f3; padding:10px; border: solid 1px #333333; } /* ぼかしのないくっきりした影ができる */ .boxshadow1{ box-shadow:4px 4px #666666; } /* ぼかした影ができる */ .boxshadow2{ box-shadow:4px 4px 4px #666666; } /* ぼかした影を拡大する */ .boxshadow3{ box-shadow:4px 4px 4px 4px #666666; } /* 複数の影を要素の内側に付ける */ .boxshadow4{ box-shadow:10px 10px 10px -4px #666666 inset, -10px -10px 10px -4px #666666 inset; }
表示例
box-shadowで要素に影を付ける
box-shadowで要素に影を付ける
box-shadowで要素に影を付ける
box-shadowで要素に影を付ける
使用例
要素の内側に色付きの影を指定しています。色があるだけで雰囲気が変わります。影を付けることで、ボタンに立体感が出たかと思います。ぼかしがグラデーションのような効果を生んで、ベタ塗りとは違ったデザインになります。
まとめ
box-shadowプロパティの基本的な使い方について書きました。box-shadowプロパティは、「立体感を出したい」ときに使うと良いです。他のプロパティと組み合わせて、新たな見せ方を見つけるのも良いです。
