デザイナーは、いくつかのユニークなフォント効果やページ効果を使用することがよくありますが、シャドウもその 1 つで、ページ上のテキストや要素に立体感を持たせて目立たせることができます。たとえば、テキスト シャドウの場合、従来の方法ではテキストを切り取って画像を直接使用する必要がある場合があります。SEO と Web サイトのパフォーマンスを考慮すると、CSS スプライトなどのテクノロジーを使用して画像を統合することもできます。
h2{ 背景:url(sprites.png) 繰り返しなし 0 0; テキストインデント:-9999em;...}
h2#title1{背景位置:0 -30px;}
h2#title2{背景位置:0 -60px;}
....
これは難しいことであり、画像をつなぎ合わせるにはかなりの時間がかかります。また、より良い視覚効果を実現するには、高品質の 32 ビット PNG 画像を使用する必要がある場合があります。これを使用すると、IE 6 の PNG に直面することになります。透明度の問題！
実際、CSS を完全に使用してテキストの影効果を実現できます。
まずはデモをご覧ください。
テキストシャドウ
text-shadow を使用すると、完璧なテキスト シャドウ効果を実現できます。基本的な書き方:
text-shadow:[カラー x 軸 y 軸ぼかし半径],[カラー x 軸 y 軸ぼかし半径]...
または
text-shadow:[x 軸 y 軸のぼかし半径の色],[x 軸 y 軸のぼかし半径の色]...
ここの色は影の色です。色は最初に書いても最後に書いても構いません。 x 軸と y 軸はそれぞれ影のオフセット位置であり、ぼかし半径は影の長さとして理解できます。また、ほとんどのブラウザーはマルチレイヤー シャドウをサポートするようになりました。複数の設定グループをカンマで区切ることができます (もちろん、1 つの設定のみを使用することもできます)。
例：
h1{カラー:#000; 背景:#333; フォント:太字 24px/2 "Microsoft Yahei",Arial;
テキストインデント:2em;
テキストシャドウ:黒 2px 2px 2px;
効果は次のとおりです。
この属性は現在、IE を除くほとんどのブラウザーでサポートされています。IE の場合は、シャドウ フィルターを使用してこれを実現できます。
フィルター: 影(色='黒'、方向='135'、強さ='2')
シャドウ フィルターを使用すると角度方向のみを定義でき、xy 軸は定義できず、z 軸も強度に置き換えられていることに気づいたかもしれません。このフィルタを使用する場合、背景色を設定できないことに注意してください。設定しない場合、フィルタは無効になります。さらに、数学があまり得意ではなく、三角関数のアルゴリズムが理解できない場合は、IE の別のフィルター、dropshadow を使用できます。
フィルター：dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
まあ、IE は常に私たちを妨げますが、IE のこれら 2 つのフィルターがマルチレイヤー シャドウをサポートしていることは言及する価値があります。たとえば、次のように書くことができます。
フィルター：dropshadow(OffX=2、OffY=2、Color='red'、Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
IE 用のこれら 2 つのフィルターの詳細については、「Shadow」と「Dropshadow」を参照してください。
多層シャドウの例を見てみましょう (ここでは IE を無視します)。
h1{font:bold 32px/2 ベルダナ、ジュネーブ、サンセリフ;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
効果は次の図に示すとおりです。
ここでは、CSS で色と透明度を同時に宣言する方法である rgba カラーを使用します。これは、ほとんどの A レベルのブラウザー ( IE を除く) でサポートされている色属性です。詳細については、「RGBa」カラーを参照してください。ブラウザ対応》——同時に、単色半透明の場合は、このシンプルな書き込み方法を使用することをお勧めします。
text-shadow のブラウザ互換性
現在、text-shadow は Firefox 3.5 以降、Safari 1.1 以降/chrome 2.0 以降、および opera 9.5 でサポートされていますが、IE ではサポートされていません。マルチレイヤーシャドウをサポートしているのはSafari 4.0のみであることに注意してください。
IE のすべてのバージョンは text-shadow をサポートしません。
Opera 9.5 以降は、最大 6 ～ 9 レイヤーの影をサポートし、CSS2 レンダリング順序を使用します (最初に定義された影が一番下になります)。また、パフォーマンス上の理由から、ぼかし半径は 100 ピクセルに制限されています。
Gecko (Firefox) は理論的にはテキストシャドウの無限レイヤーをサポートし (ただし、試すことはお勧めしません)、新しい CSS3 レンダリング順序に従います (最初に定義されたシャドウが一番上になります)。
Safari 1.1 ～ 3.2 は、text-shadow の単一レイヤーのみをサポートします (最初のカンマの前の宣言のみが表示され、その後の宣言は無視されます)。 Safari 4.0 以降は、マルチレイヤー シャドウと新しい CSS3 レンダリング順序のみをサポートします。
ボックスシャドウ
まず IE について説明します。IE は box-shadow 属性をサポートしていませんが、上記の 2 つのフィルターを使用してシャドウ効果を実現できます。これは、IE がテキスト シャドウとボックス シャドウを区別しないことを意味します。これにより、いくつかの問題が発生します。要素内のテキストは要素のシャドウ設定を継承します。ただし、要素の背景と境界線を定義しない場合は、テキストの影のみが表示されます。境界線を定義せずに背景属性のみを定義すると、ボックスの影のみが表示され、テキストには影が付きません。 border属性のみを定義し、背景を定義しない場合はボックスの影が表示され、コンテンツのテキストや画像にも影が付きます。興味のある学生はぜひ試してみてください。
さて、IE のことは忘れて、box-shadow を見てみましょう。実際、text-shadow を理解すると、box-shadow は理解しやすくなります。現在、private 属性を通じて box-shadow 属性をサポートしているのは、Firefox と safari/chrome だけです。 Opera ブラウザは現在この属性をサポートしていませんが、ドキュメントには、エンジンの次のバージョン Presto 2.3 (Opera 10.10 のエンジンの最新バージョンは Presto 2.2.15) が box-shadow をサポートすると記載されています。私たちはゆっくり待ちます。
box-shadow の構文は text-shadow と同じです。
#ボックスシャドウ{
...
-webkit-box-shadow:2px 2px 2px 黒;
-moz-box-shadow:2px 2px 2px 黒;
...
}
実際、box-shadow と border-radius は良いパートナーです。
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
境界半径:10px;
ボーダー:1px ソリッド ddd;
-webkit-box-shadow:0 0 10px 黒;
-moz-box-shadow:0 0 10px 黒;
パディング:10px;}
効果は次の図に示すとおりです。
Firefox はバージョン 3.5 で box-shadow のサポートを開始したばかりで、現在の影のレンダリングはまだ完璧ではありません。
要約する
CSS シャドウは、CSS3 の非常に便利な機能です。Firefox/webkit/Opera ではすでに text-shadow を使用でき、box-shadow は間もなくこれらのブラウザに実装される予定です。 IE だけが独自でありながら、依然としてそのくだらないフィルターを主張しています。これは本当に失敗です。