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

CSSのShadowフィルターを使って減衰シャドウを作成する方法

Shadowフィルターは、指定した方向と色をもとに、徐々にぼやけていく「減衰シャドウ(影)」を作成するために使用されるフィルターです。

Shadowフィルターで使えるパラメータ

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

番号パラメータと説明
1 Color(色)
シャドウに付けたい色を指定します。
2 Direction(方向)
影の伸びる方向を時計回りの角度で指定します。値は45度刻みで指定し、デフォルト値は270(左)です。
0 = 上
45 = 右上
90 = 右
135 = 右下
180 = 下
225 = 左下
270 = 左
315 = 左上

実装例

次のコードを実行すると、Shadowフィルターによる減衰シャドウの効果を確認できます。

<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>

補足:モダンCSSでの代替手段

ShadowフィルターはInternet Explorer向けの旧式の独自機能であり、現在の主要ブラウザではサポートされていない点に注意が必要です。モダンなWeb開発では、テキストに影を付ける場合はtext-shadowプロパティを、ボックス要素に影を付ける場合はbox-shadowプロパティを使用することが推奨されています。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>