CSSのbox-shadowで影を付けて立体的に見せる方法

生徒

WEBページに影をつけて立体的な表示にしたいです

先生

CSSのbox-shadowで影をつけて立体的な表示にできます

 この記事でわかること

• CSSのbox-shadowの書き方
• CSSで要素を立体的に見せる方法

WEBページに影を付けて表示する

box-shadowプロパティの構文

box-shadowプロパティでは以下を設定できます。

• 影の位置、ぼかし、広がり
• 影が外側か内側か
• 影の色

影の位置、ぼかし、広がり

• 水平位置 (offset-x)　 影を右（正の値）または左（負の値）に移動します。
• 垂直位置 (offset-y)　影を下（正の値）または上（負の値）に移動します。
• ぼかしの半径 (blur-radius)　影のぼかし具合を指定します。値が大きいほどぼんやりします。
• 影の広がり (spread-radius)　 影の範囲を広げたり縮めたりします（正の値で広がり、負の値で縮む）

box-shadowプロパティには2つ以上の値を指定する必要があり、1つの値だと影は表示されません。

2つの数値を指定した場合

box-shadowに2つの数値を指定すると、その位置に影が表示されます。

/* 2つの数値で影の位置を指定する */
* {
  box-shadow: 水平方向のオフセット値 垂直方向のオフセット値;
}

オフセット値に正の値を指定すると、それぞれ右方向、下方向に影が表示されます。

オフセット値に負の値を指定すると、それぞれ左方向、上方向に影が表示されます。

3つの値を指定した場合

box-shadowに3番目の数値を指定すると、影のぼかし方を設定できます。

/* 3つの数値で影の位置を指定する */
* {
  box-shadow: 水平方向のオフセット値 垂直方向のオフセット値　ぼかしの半径;
}

数値が大きいとぼかしが大きくなり、影が大きく明るくなります。

指定しない場合は0で、ぼかし無しです。また、マイナスの値は無効です。

4つの値を指定した場合

4番目の値を指定しない場合は0となり、影は要素と同じ大きさになります。

insetは影を内側に表示する

insetを指定すると、影は内側に表示されます。

１つの要素に複数の影を設定できる

影を変えてボタンが押されたように見せる

クリックされた時の影を変えて、ボタンが押されたように見せることができます。