filter:progid:DXImageTransform.Microsoft.Gradient(必要な値) …… 背景と内容の間にグラデーションの面を表示する（IE5.5以上）
広告
filterプロパティのGradient()は、背景と内容の間にグラデーションの面を表示する際に使用します。
■値
- GradientType=タイプ
- 0は縦に変化するグラデーション、1は横に変化するグラデーション
- StartColorStr=#AARRGGBB
- グラデーション開始の透明度（AA）と色（RRGGBB）を指定（初期値は#ff000000）
- EndColorStr=#AARRGGBB
- グラデーション終了の透明度（AA）と色（RRGGBB）を指定（初期値は#ff000000）
※#AARRGGBBの最初のAAは00（透明）～ff（不透明）の範囲で透明度を指定、また、残りのRRGGBBは色を指定
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample {
filter:progid:DXImageTransform.Microsoft.Gradient(
GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ff00cc00);
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample”>
フィルタ効果Gradient()<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/kaeru.gif”>
</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
フィルタ効果Gradient()
■関連項目
BasicImage() …… 透過・回転・反転・グレースケールなどを指定する
fliph() …… 左右反転する
flipv() …… 上下反転する
invert() …… 色（色相・明度・彩度）を反転する
xray() …… X線効果（グレースケールにして反転）を適用する
Alpha() …… 透過表示にする
Chroma() …… 特定の色を透明にする
MaskFilter() …… 指定した色でマスクをかける
Glow() …… 背後から光を当てたような効果を与える
DropShadow() …… ぼかしのない影をつける
Shadow() …… ぼかしのある影をつける
Blur() …… ぼかす
MotionBlur() / blur() …… 方向を指定してぶれさせる
Wave() …… 波状に歪めて表示する
Pixelate() …… モザイク表示にする
Emboss() …… 浮き彫り表示（エンボス）にする
Engrave() …… 彫り込み表示（エングレーブ）にする
Matrix() …… 二次元面を傾けたような表示にする
Gradient() …… 背景と内容の間にグラデーションの面を表示する
zoom …… 拡大・縮小表示する（IE独自の仕様）
fliph() …… 左右反転する
flipv() …… 上下反転する
invert() …… 色（色相・明度・彩度）を反転する
xray() …… X線効果（グレースケールにして反転）を適用する
Alpha() …… 透過表示にする
Chroma() …… 特定の色を透明にする
MaskFilter() …… 指定した色でマスクをかける
Glow() …… 背後から光を当てたような効果を与える
DropShadow() …… ぼかしのない影をつける
Shadow() …… ぼかしのある影をつける
Blur() …… ぼかす
MotionBlur() / blur() …… 方向を指定してぶれさせる
Wave() …… 波状に歪めて表示する
Pixelate() …… モザイク表示にする
Emboss() …… 浮き彫り表示（エンボス）にする
Engrave() …… 彫り込み表示（エングレーブ）にする
Matrix() …… 二次元面を傾けたような表示にする
Gradient() …… 背景と内容の間にグラデーションの面を表示する
zoom …… 拡大・縮小表示する（IE独自の仕様）
広告