CSS3 の box-shadow プロパティを使用すると、レイヤーのシャドウ効果を簡単に実現できます。この属性を実際に詳しく説明しましょう。
1. box-shadow 属性のブラウザ互換性 まず、この属性のブラウザ互換性を見てみましょう。
Opera: この記事をテストのために投稿したとき、Opera を最新バージョン 10.53 に更新したところですが、すでに box-shadow 属性がサポートされています。
Firefox はプライベート プロパティ -moz-box-shadow を通じてこれをサポートしています。
Safari と Chrome は、プライベート プロパティ -webkit-box-shadow を通じてこれをサポートします。
すべての IE でサポートされているわけではありません (IE9 が改善されているかどうかはわかりません)。心配しないでください。記事の最後で IE のハックをいくつか紹介します。
2. box-shadow属性の構文
box-shadow には 6 つの設定可能な値があります。
img{box-shadow: 影の種類 X 軸変位 Y 軸変位 影のサイズ 影の延長 影の色}
影のタイプが設定されていない場合、デフォルトは影効果です。インセットに設定すると、インナーシャドウ効果になります。
X軸とY軸の変位は同等ではありませんが、Photoshopの「角度」と「位置」に似ています。
影のサイズ、延長、色はPhotoshopと同じです。
3. 分析例 いくつかの例を通してボックスシャドウの効果を見てみましょう。まず、テスト用の簡単な HTML を作成します。
<html>
<頭>
<style type="text/css">ここに CSS 部分を記述します</style>
</head>
<本文>
<img src="テスト.jpg" />
</body>
</html>
注: トラブルを避けるために、以下の CSS コードには box-shadow のみが記述されています。実際に使用する場合は、-moz-box-shadow と -webkit-shadow も記述する必要があります。やるべきことは非常に簡単で、2 つの box-shadow をコピーし、その前に -moz- と -webkit- を追加します。
画像 {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
ボックスシャドウ:2px 2px 10px #06C;
}
(1) ドロップシャドウ、ディスプレイスメントなし、シャドウサイズ 10px、拡張なし、カラー #06C
img{box-shadow:0 0 10px #06C;}
ここでのカラー値は HEX 値です。RGBA 値を使用することもできます。RGBA 値の利点は、追加のアルファ透明度値があり、影の透明度を制御できることです。
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2) 上記に20pxの拡張子を追加します。
img{box-shadow:0 0 10px 20px #06C;}
(3) インナーシャドウ、ディスプレイスメントなし、サイズ 10px、拡大なし、カラー #06C
img{box-shadow:inset 0 0 10px #06C;}
(4) 複数のシャドウ効果。
ボックスシャドウは同時に複数使用できるので、4色のシャドウを使ってみましょう。
img{box-shadow:-10px 0 10px 赤、box-shadow:10px 0 10px 青、box-shadow:0 -10px 10px 黄色、box-shadow:0 10px 10px 緑}
(5). 複数のシャドウ属性を使用する順序 同一要素に複数のシャドウ属性を使用する場合、最初に記述されたシャドウが先頭に表示されることに注意してください。たとえば、次のコードでは、最初に 10 ピクセルの緑色の影を書き込み、次に 10 ピクセルのサイズで 20 ピクセルの影を拡張して書き込みます。結果は、黄色の影付きレイヤーの上に緑色の影付きレイヤーが重ねられたものになります。
img{ボックスシャドウ:0 0 10ピクセル グリーン;ボックスシャドウ:0 0 10ピクセル 20ピクセル イエロー}
しかし、順序を変更すると、次のようになります。
img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}
後で書き込まれた緑色の陰影付きのレイヤーは、最初に書き込まれた、より大きな半径を持つ黄色のレイヤーによって覆われているため、見ることができません。
4. IE も box-shadow をサポートするようにする
IE 自体はシャドウ フィルターを使用して同様の効果を実現します。また、IE でこの効果を実現するのに役立つ js および .htc ハック ファイルもいくつかあります。全部を試すことはできないので、ここでは私が使ったものだけを紹介します。
ie-css3.htc は、IE ブラウザが box-shadow だけでなくいくつかの CSS3 プロパティをサポートできるようにする htc ファイルです。また、IE ブラウザが角丸属性 border-radius と text-shadow 属性 text-shadow をサポートできるようにします。
使用方法: ダウンロードしてサーバー ディレクトリに置きます。
<head></head> に次のコードを記述します。
<!--[IE の場合]>
<style type="text/css">
img、#testdiv、.testbox{動作: url( http://yourdomain.com/js/ie-css3.htc );}
</スタイル>
<![endif]-->
青い部分にはbox-shadow属性を使ってセレクターを入力し、緑色の部分にはie-css3.htcの絶対パスまたは相対パスを入力します。とにかくアクセスできることを確認してください。
それなら大丈夫です。ただし、注意すべき点がまだいくつかあります。
この htc ファイルを使用する場合、CSS に box-shadow、-moz-box-shadow、または -webkit-box-shadow が記述されている限り、IE はそれをレンダリングします。
この htc ファイルを使用する場合、box-shadow: 0 0 10px red; と書くことはできません。そうしないと、IE では失敗します。
RGBA 値のアルファ透明度はサポートされていません。
内側のシャドウの挿入はサポートされていません。
シャドウ拡張はサポートされていません。
他の色を設定しても、IE では影は黒でのみ表示されます。
したがって、このスクリプトでは、IE が一部の box-shadow 値をサポートすることのみが許可されます。他に優れた IE ハック スクリプトがある場合は、共有するメッセージを残してください。