CSS3のフィルター効果例を詳しく解説

フィルター: 透明効果

構文: filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)

説明:
不透明度:開始値は 0 ～ 100 の範囲で、0 は透明、100 は元のイメージです。
FinishOpacity: 目標値。
スタイル: 1、2、または 3
StartX: 任意の値
StartY: 任意の値
FinishX: 任意の値
FinishY: 任意の値

一般的な透明効果: filter:alpha(opacity=30);

W3C コード: -webkit -filter:opacity(0.3); または opacity:0.3;

rose

線の透明度: filter: alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, Complete unknown) ;

バラ

ソフトライト効果フィルタ:alpha(opacity=100,finishOpacity=0,style=3);

W3Cコード:不明;

バラ

構文: filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)

説明: Color:#rrggbb 形式、任意。

Offy: Y 軸オフセット値。

シャドウ効果: filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5,positives=true);

Rose

シャドウ効果: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=10);

W3C コード: 不明;

ローズ

カラーエフェクト: progid:DXImageTransform.Microsoft.Chroma(color=#59A074);

W3C コード: 不明;

ローズ

モザイク ：filter:progi d :dXImageTransform.Microsoft.Pixelate(maxsquare=3);

W3C コード: 不明;

ローズ

グローエフェクト: filter:progid:dXImageTransform.Microsoft.Glow(color=#000000, Strength=5);

W3Cコード:不明;

ローズ

水平反転:フィルター:fliph;

W3Cコード:-webkit-transform:rotateY(180deg);

ローズ

垂直反転: フィルター: flickv;

W3C コード: -webkit-transform:rotateX(180deg);

rose

逆色効果: フィルター: 反転;

W3C コード: -webkit-filter :invert(1);

ローズ

白黒効果: filter:gray;

W3C コード: -webkit-filter:grayscale(1);

ローズ

X 線写真: filter:xray;

W3Cコード: -webkit-filter:grayscale(1) invert(1);

rose

構文: filter:Blur(Add = 追加、Direction = 方向、Strength = 強度)

説明: 追加: 画像を印象派のぼかし効果に変更するかどうかを指定します。1 は true、0 は false。

強度: ぼかしの影響を受ける幅のピクセル数。デフォルトは 5 ピクセルです。

風のブラー (角度付き): filter: Blur(add=true,direction=45,strength=30);

W3C コード: None

Rose

一般的なブラー: filter:progid:DXImageTransform .Microsoft。 Blur(pixelradius=7);

W3C コード: -webkit-filter:blur(3px);

Rose

フィルター: リップル効果

構文: filter: Wave(Add =add, Freq= freq, LightStrength=strength, Phase=phase, Strength=strength)