• RSS

[CSS]ボックスに影を付ける(ドロップシャドウ)CSS のプロパティ「box-shadow」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ボックスに影を付ける(ドロップシャドウ)ことができる CSS3 のプロパティが box-shadow です。

IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。

box-shadow の記述方法

以下のように box-shadow をCSSファイルに記述します。
.box	{
box-shadow: 10px 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px 10px #000;
-moz-box-shadow: 10px 10px 10px 10px #000;
}
※ベンダープレフィックスも付けておきます。

box-shadow の値

box-shadow の値は以下のようになります。
1番目  水平方向へぼかし。1px で右方向、-1px で左方向。
2番目  垂直方向へぼかし。1px で下方向。-1px で上方向。
3番目  ぼかしの距離。値が大きくなるとぼかしが強くなります。
4番目  影の広がり。値が大きくなると影の範囲が広くなります。
5番目  色の指定。RGBa や カラーコード(16進法)を使います。
6番目  影の向き。デフォルトでは影は内→外方向です。
inset を指定すると外→内方向へ影の向きが変わります。

指定できる値が多いですが、よく使うのは 1、2番目の「ぼかしの方向」と 3番目の「ぼかしの距離」、5番目の「」ではないかなと思います。


box-shadow のサンプル

以下、box-shadow を使った簡単なサンプルです。

box-shadow のサンプル1

.box	{
/*box-shadow*/
box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
/*ボックスのデザイン*/
padding:10px;
border:1px solid #ccc;
text-align:center
}
水平方向、垂直方向ともに 5px と「正」の値なので、影の方向は 右下になります。
ぼかしの距離は 10px にして、やや強めにぼかしを効かせています。
色は #000 で真っ黒い影を落としている、という感じです。

box-shadow のサンプル1


box-shadow のサンプル2

今度は inset でボックスの内側に影を落とします。
※分かりやすいように、ボックスにグラデーションをかけています。
.box	{
/*box-shadow*/
box-shadow: 0 2px 1px #fff inset;
-webkit-box-shadow: 0 2px 1px #fff inset;
-moz-box-shadow: 0 2px 1px #fff inset;
/*グラデーション*/
background-image:-moz-linear-gradient(top, #f9f9f9, #cfcfcf);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, #f9f9f9),color-stop(1, #cfcfcf));
/*ボックスのデザイン*/
padding:10px;
border:1px solid #ccc;
text-align:center
}
水平方向は 0 なので、横方向の影は出ません。
ぼかしの距離は 1px でやや気味にして、
垂直方向へ 2px 、色は #fff下方向に白色の影を出しています。

box-shadow のサンプル2


box-shadow のサンプル3 – カンマ区切りで複数指定

box-shadow の値は、カンマ区切りで複数指定することもできます。
.box	{
/*box-shadow*/
box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
-webkit-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
-moz-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
/*ボックスのデザイン*/
padding:10px;
border:1px solid #ccc;
text-align:center
}
こんな感じ↓で、ボックスの四隅にドロップシャドウを施すことができます。

カンマ区切りで複数指定


IE8 以下への対応について

box-shadow はCSS3 のプロパティなので、IE6、IE7、IE8 の下位バージョンのIE では動きません。

どうしても IE下位バージョンでも box-shadow を使う場合は、PIE.htc か、IE-CSS3.htc の HTC ファイルを使うと実現できます。


text-shadow

box-shadow と似たプロパティに、テキストに影を落とす text-shadow があります。

text-shadow については、別途こちらの記事で紹介していますので、合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す