CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのシャドウフィルター(Shadow Filter)の使い方を徹底解説

シャドウフィルター(Shadow Filter)は、指定した方向と色に基づいて、ぼかしの入った減衰した影を作成するためのフィルターです。テキストや画像に立体感や奥行きを加えたい場合に活用できます。

シャドウフィルターで使用できるパラメータ

このフィルターでは、以下の2つのパラメータを指定できます。

パラメータ説明
Color影の色を指定します。任意のカラーコードを設定できます。
Direction影の方向を時計回りに45度刻みで指定します。デフォルト値は270(左)です。
0 = 上
45 = 右上
90 = 右
135 = 右下
180 = 下
225 = 左下
270 = 左
315 = 左上

使用例

シャドウフィルターを実装するには、以下のコードを実行してみてください。

<html>
   <head>
   </head>

   <body>

      <img src="/css/images/logo.png"
         alt="CSS Logo"
         style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

      <p>テキストの例:</p>

      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family:
         Arial Black;
         color: red;
         Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>
   </body>

</html>

注意:モダンブラウザでの代替手段

上記のShadowフィルターは、Internet Explorer向けの独自拡張(レガシー機能)であり、現在の主要ブラウザではサポートされていません。モダンなブラウザで影を表現する場合は、以下の標準CSSプロパティの使用を推奨します。

  • text-shadow:テキストに影を付けるプロパティ
  • box-shadow:ボックス要素に影を付けるプロパティ
  • filter: drop-shadow():画像や要素の形状に沿った影を付けるプロパティ

これらの標準プロパティを使えば、Internet Explorer以外のすべての主要ブラウザで一貫した影の演出を実現できます。

  1. CSSのtext-shadowプロパティでテキストに影を付ける方法

    Webページのテキストに立体感や装飾性を持たせたいときに便利なのが、CSSのtext-shadowプロパティです。このプロパティを使うことで、文字に影を簡単に追加できます。text-shadowの基本構文text-shadowプロパティは、以下の値を組み合わせて指定します。水平方向のオフセット（offset-x）：影を右（正の値）または左（負の値）にずらす距離垂直方向のオフセット（offset-y）：影を下（正の値）または上（負の値）にずらす距離ぼかし半径（blur-radius）：省略可能。数値が大きいほど影が柔らかくぼやける色（color）：省略可能。影の色を指定するまた、カンマで区切るこ

  2. CSSのシャドウ効果とは？text-shadowとbox-shadowの使い方を解説

    Webページに立体感や奥行きを加えたいときに便利なのが、CSSのシャドウ（影）効果です。CSSでは、text-shadowプロパティを使ってテキストに影を付け、box-shadowプロパティを使って要素（ボックス）に影を付けることができます。 text-shadowプロパティとは text-shadowは、文字に影を付けるためのプロパティです。「影の色」「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」を指定することで、柔らかい影からくっきりした影まで自由に表現できます。 box-shadowプロパティとは box-shadowは、divなどのボックス要素全体に影を付けるプロ