• RSS

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

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

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

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

box-shadow の記述方法

以下のように box-shadow をCSSファイルに記述します。

※ベンダープレフィックスも付けておきます。

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

水平方向、垂直方向ともに 5px と「正」の値なので、影の方向は 右下になります。
ぼかしの距離は 10px にして、やや強めにぼかしを効かせています。
色は #000 で真っ黒い影を落としている、という感じです。

box-shadow のサンプル1


box-shadow のサンプル2

今度は inset でボックスの内側に影を落とします。
※分かりやすいように、ボックスにグラデーションをかけています。

水平方向は 0 なので、横方向の影は出ません。
ぼかしの距離は 1px でやや気味にして、
垂直方向へ 2px 、色は #fff下方向に白色の影を出しています。

box-shadow のサンプル2


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

box-shadow の値は、カンマ区切りで複数指定することもできます。

こんな感じ↓で、ボックスの四隅にドロップシャドウを施すことができます。

カンマ区切りで複数指定


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

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください