HTML サンプル コードとそれに含まれる CSS コードを以下に示します。その中で使用されている画像は fd.jpg です。完全な効果を確認するには、コードをコピーして画像に fd.jpg という名前を付けます。
<!DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 移行版//EN">
<html>
<頭>
<title>CSS フィルター効果.html</title>
<meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3">
<meta http-equiv="description" content="これは私のページです">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
α
{
フィルター:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.blurs
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
width:350px;/*この属性は必須です。そうでない場合、効果は表示されません*/
フィルター:ぼかし(追加= true、方向= 90、強度= 25);
}
.chromas
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色: 赤;
幅:350ピクセル;
フィルター:クロマ(色=赤);
}
.dropshadows
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルター:dropshadow(color=red,offx=15,offy=10,positive=1);
}
.fliphs
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルタ:フリップ;
}
.flipvs
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルタ:flipv;
}
.光る
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルター:グロー(色=青、強度=15);
}
.greys
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルター:グレー;
}
.inverts
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルタ:反転;
}
.マスク
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルター:マスク(色=緑);
}
.shadows
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルター:シャドウ(色=赤、方向=225);
}
.waves
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルター:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20);
}
.xrays
{
font-family:lucida handwirting italic;
フォントサイズ:72px;
フォントスタイル:太字;
色:#336600;
幅:350ピクセル;
フィルタ:X 線;
}
</スタイル>
</head>
<本文>
<テーブル幅=1000 ボーダー=1>
<tr><td width=100>フィルタのプロパティ</td><td width=100>説明</td><td width=400>パラメータと値</td><td width=400>効果の例</td ></tr>
<tr><td><span class=alpha>アルファ</span></td><td>透明効果の設定</td><td>不透明度: 透明度レベル、0 ～ 100、0 は完全に透明<br>
style: 透明領域の形状特性を指定します。0 は均一分布です。1 は線形です。2 は長方形です。<br>finishopacity: グラデーション効果を実現するために、グラデーションの端の透明度を設定します。 0から100まで<br>
startX、startY: グラデーション透明効果の開始座標<br>finishX、finishY: グラデーション透明効果の終了座標</td><td><p><img src="fd.jpg" class="alphas"/ ></p ></td></tr>
<tr><td>ぼかし</td><td>ぼかし効果を作成します</td><td>追加: 画像をぼかし効果に変更するかどうかを true または false で指定します<br>
方向: ブラーの方向を設定します。0 度は垂直上向きを意味します。45 度ごとが単位で、デフォルトは左に 270 度です。<br>強度: ブラーの影響を受ける幅のピクセル数を表します。デフォルトは 5< /td>
<td><div class="blrs">幸運を祈ります!</div></td></tr>
<tr><td>Chroma</td><td>指定した色を透明に設定します</td><td>color: 透明色を指定します</td><td>chroma<div class="chromas">例 < /div></td></tr>
<tr><td>DropShadow</td><td>オフセット画像のアウトラインを作成します。つまり、影を落とします。</td><td>color: 投影の色<br>offx、offy: 投影の影x、y方向のオフセット<br>
ポジティブ: true は不透明なピクセルにシャドウを作成し、false は透明なピクセルにシャドウを作成します。</td><td><div class="dropshadows">ドロップシャドウの例</div></td></tr>
<tr><td>FlipH</td><td>水平反転</td><td>なし</td><td><div class="fliphs">水平反転</div></td >< /tr>
<tr><td>FlipV</td><td>垂直反転</td><td>なし</td><td><div class="flipvs">垂直反転</div></td >< /tr>
<tr><td>グロー</td><td>オブジェクトの外側の境界に光の効果を追加します</td><td>色: ライトの色を指定します<br>
強度: 光度</td><td><div class="glows">GLOW の例</div></td></tr>
<tr><td>グレー</td><td>画像の色を減らしてグレースケールにします</td><td>なし</td><td><img src="fd.jpg" クラス="グレー"/></td></tr>
<tr><td>反転</td><td>色、彩度、明るさの値を完全に反転してマイナス効果を作成します</td><td>なし</td><td><img src="fd .jpg" class="反転"/></td></tr>
<tr><td>ライト</td><td>オブジェクトにライトを投影します</td><td>いいえ</td><td>いいえ</td></tr>
<tr><td>マスク</td><td>オブジェクトの透明マスクを作成します</td><td>色: マスクの色を指定します</td><td><div class="masks" >マスクの例</div></td></tr>
<tr><td>シャドウ</td><td>オブジェクトの実線、つまりシャドウ効果を確立します。</td><td>色: 投影カラー<br>方向: 投影方向</td> <td>< div class="shadows">シャドウの例</div></td></tr>
<tr><td>波</td><td>正弦波の波紋を使用して X 軸と Y 軸の方向に画像を破壊します</td><td>追加: true は画像を波状に破壊することを意味し、false はそうではありませんそれを妨害する<br >
freq：波紋の発生頻度（波紋が何回発生するか）<br>lightstrength：発生する波紋の効果を強めます（値は0～100）<br>
位相: 正弦波の開始時のオフセットを設定します。通常は 0、最大 100 です<br>強度: 正弦波の振幅を設定します</td><td><div class="waves">波形の例</ div></td></tr>
<tr><td>Xray</td><td>オブジェクトの輪郭のみを表示</td><td>なし</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</テーブル>
</body>
</html>