【CSS】ボックスに影をつけるbox-shadow

ボックスの周りに影をつける際にbox-shadowプロパティを使用します。立体的に見えて見栄えがよくなります。

box-shadowプロパティ
下記のように、box-shadowプロパティは４つの数値と色で値を指定します。 .shadow { 　　-moz-box-shadow: 3px 3px 3px 3px #999; 　　-webkit-box-shadow: 3px 3px 3px 3px #999; 　　box-shadow: 3px 3px 3px 3px #999; 　　}
1番目の値	水平方向の影のオフセット長さを表します。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
2番目の値	垂直方向の影のオフセット長さを表します。正の値を指定するとボックスの下に、負の値を指定するとボックスの上に影が付きます。
3番目の値	影のぼかしの半径(blur radius)です。負の値を指定することはできません。値が大きいほど影の端のぼかしが強くなり、値が0の場合、端にぼかしがかからず、くっきりとした影になります。負の値は指定できません。
4番目の値	影の広がり距離(Spread distance)です。正の値を指定すると影の全方向に拡大、負の値を指定すると影のサイズが縮小します。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
5番目の値	影の色(color)を指定します。

以下のように、３つの図形にそれぞれ影をつけてみました。firstボックスには正の値で影をつけました。

secondボックスは負の値で、thirdボックスには影の広がり具合を値-1で確かめてみました。

影の付け方

 .shadowbox {
   width:100px;
   height:100px; }

 .first{
   border-radius:3px;
   box-shadow:3px 3px 3px 3px #999;}
   
 .second{
   border-radius:50%;
   box-shadow:-3px -3px 3px 6px #093;}

 .third{
   border-radius:3px;
   transform-origin:50% 50%;
   transform:rotate(20deg);
   box-shadow:3px 3px 0px -1px #F00;}

first

second

third

ボックスの内部に影をつける：inset

ぼかし具合を適正に使用すれば、グラデーション効果が出せます。

 .inset-box {
　　width:100px;
　　height: 100px;
　　border-radius:50%;
　　border:1px solid #999;
　　background:#FFF;
　　box-shadow:inset 0 2px 45px #7c7c7e;
}

inset

ピクセルを重ねて影を作る

水平方向の値を「0」にしといて、垂直方向に1ピクセルずつ増しながら、薄い色から徐々に濃い色へ値を指定していきます。結果、以下のように立体的なボックスが完成しました。

 .shadowbox {
   0 1px 1px #c0c0c0,
   0 2px 0 #a8a7a6, 
   0 3px 0 #8b8a89, 
   0 4px 0 #7d7b7a,
   0 5px 0 #686766,
   0 6px 3px #5f5e5d;
   }

ピクセルを重ねて影を作る

ボックスの外部と内部の影を合わせる

複数の値をコンマ(,)で区切りながら指定します。結果、ボックスの内側と外側両方に影がついたボックスが完成ました。

 .inset-shadowbox {
   0 1px 1px #c0c0c0,
   0 2px 0 #a8a7a6, 
   0 3px 0 #8b8a89, 
   0 4px 0 #7d7b7a,
   0 5px 0 #686766,
   0 6px 3px #5f5e5d,
   inset 1px 1px 50px #7c7c7e;
   }

重ねて影をつける

【CSS】 ボックスに影をつけるbox-shadow

ボックスの内部に影をつける：inset

ピクセルを重ねて影を作る

ボックスの外部と内部の影を合わせる

【CSS】ボックスに影をつけるbox-shadow