フィルタに関するCSS

■α合成

■例:α合成(style=0,opacity=50)




■例:α合成(style=1,opacity=100)




■例:α合成(style=2,opacity=100)




■例:α合成(style=3,opacity=100)

■CSS
タグ{position:absolute;
filter:Alpha(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Alpha(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
startX 適用範囲の開始X座標
startY 適用範囲の開始Y座標
finishX 適用範囲の終了X座標
finishY 適用範囲の終了Y座標
opacity 開始地点の透明度(0〜100)
finishOpacity 終了地点の透明度(0〜100)
style 0:均一、1:線状、2:円形、3:四角
enabled true:有効、false:無効

■ぼかし

■例:ぼかし(direction=45,add=0)




■例:ぼかし(direction=135)




■例:ぼかし(direction=225)




■例:ぼかし(direction=315)

■CSS
タグ{position:absolute;
filter:Blur(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Blur(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
add 0:元イメージを合成しない、1:合成する
direction 方向(0〜360)45度単位
enabled true:有効、false:無効

■シャドー

■例:影(direction=135)




■例:影(color=red)

■CSS
タグ{position:absolute;
filter:Shadow(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Shadow(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
color 影の色を指定
direction 方向(0〜360)45度単位
enabled true:有効、false:無効

■ドロップシャドー

■例:影(color=red)




■例:影(offX=10,offY=10)




■例:影(positive=false)

■CSS
タグ{position:absolute;
filter:Dropshadow(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Dropshadow(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
color 影の色を指定
offX オフセットX座標
offY オフセットY座標
positive true:通常、false:カットアウト
enabled true:有効、false:無効

■発光効果

■例:発光(color=yellow)




■例:発光(strength=15)


■CSS
タグ{position:absolute;
filter:Glow(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Glow(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
color 発光する色を指定
strength 発光強度を指定
enabled true:有効、false:無効

■クロマキー

■例:クロマキー(color=black)
※クロマキーは、特定色を領域から消します

■CSS
タグ{position:absolute;
filter:Chroma(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Chroma(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
color 消す色を指定
enabled true:有効、false:無効

■マスク

■例:カラーマスク(color=red)
※カラーマスクは、指定色の領域から色を消します。

■CSS
タグ{position:absolute;
filter:Mask(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Chroma(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
color 文字の背景色を指定
enabled true:有効、false:無効

■左右反転

■例:左右反転当サイトバナー

■CSS
タグ{position:absolute;
filter:FlipH();}
■HTML
<タグ style="position:absolute;
filter:FlipH()">〜</タグ>
■パラメータ
パラメータ名
enabled true:有効、false:無効

■上下反転

■例:上下反転当サイトバナー

■CSS
タグ{position:absolute;
filter:FlipV();}
■HTML
<タグ style="position:absolute;
filter:FlipV()">〜</タグ>
■パラメータ
パラメータ名
enabled true:有効、false:無効

■色反転

■例:色反転当サイトバナー

■CSS
タグ{position:absolute;
filter:Invert();}
■HTML
<タグ style="position:absolute;
filter:Invert()">〜</タグ>
■パラメータ
パラメータ名
enabled true:有効、false:無効

■グレースケール

■例:グレースケール当サイトバナー

■CSS
タグ{position:absolute;
filter:Gray();}
■HTML
<タグ style="position:absolute;
filter:Gray()">〜</タグ>
■パラメータ
パラメータ名
enabled true:有効、false:無効

■X線効果

■例:X線効果当サイトバナー

■CSS
タグ{position:absolute;
filter:Xray();}
■HTML
<タグ style="position:absolute;
filter:Xray()">〜</タグ>
■パラメータ
パラメータ名
enabled true:有効、false:無効

■波形効果
■例(strength=5,lightstrength=5)

■例:波形効果(add=1)
当サイトバナー







■例:波形効果(freq=2)
当サイトバナー







■例:波形効果(phase=2)
当サイトバナー

■CSS
タグ{position:absolute;
filter:Wave(パラメータ=値);}
■HTML
<タグ style="position:absolute;
filter:Wave(パラメータ=値)">〜</タグ>
■パラメータ
パラメータ名
add 0:元イメージを合成しない、1:合成する
freq 波数(0〜)
strength 強度(0〜)
lightstrength 強度(0〜100)
phase 波形開始位相(0〜100)
enabled true:有効、false:無効

Presented by
HTML辞典