フィルター（マイクロソフトＩＥのみ）

フィルタとは、画像などのオブジェクト（当然画像以外も可）に、特定の視覚的効果を付与するものです。Photoshop等の画像処理ソフトのフィルタを使用した場合、画像そのものが書き換えられますが、スタイルシートのフィルタの場合、元の画像はかわらいため画像の使いまわしが出来ます。

また、Transitionを使用すれば、まるでFlashのような画像切り替えが可能になります。

サンプル

filter:Alpha

特定の要素に透明・半透明・グラデーション効果を与えるためのプロパティです。すべての filter に共通ですが、<DIV>と<SPAN>に指定する場合には、width または height をあわせて指定する必要がある。

値：style=0（無し）
style=1（線形）
style=2（円形）
style=3（四角形）
startx=数値, finishx=数値
  （グラデーションのX軸上の開始・終了位置指定）
starty=数値, finishy=数値
  （グラデーションのY軸上の開始・終了位置指定）
opacity=0〜100
  （始点透明度。

0が完全透明、100が完全不透明）
finishopacity=0〜100
  （終点透明度。

0が完全透明、100が完全不透明）

style="filter:Alpha(style=1,opacity=10,finishopacity=100)"

花にとまる蝶
style=0,
opacity=100,
finishopacity=100		 花にとまる蝶
style=1,
opacity=0,
finishopacity=100
花にとまる蝶
style=2,
opacity=0,
finishopacity=100		 花にとまる蝶
style=3,
opacity=0,
finishopacity=100
花にとまる蝶
style=0,
opacity=50,
finishopacity=50		 花にとまる蝶
style=1,
opacity=100,
finishopacity=0
花にとまる蝶
style=2,
opacity=100,
finishopacity=0		 花にとまる蝶
style=3,
opacity=100,
finishopacity=0

up

NN系の透明化

style="-moz-opacity:0.5;filter:Alpha(Opacity=50)"

花にとまる蝶

<div style="background-image:url(background3.jpg);
 padding:20px; text-align:center">
<img src="filter_alpha.gif"
 style="filter:Alpha(opacity=100,
 finishopacity=0, style=2)"
 width="247" height="383" alt="Grafik" border="0"></div>

up

filter:Blur

特定の要素にぼかし効果を与えるためのプロパティです。

値：add=0（ぼかした後にぼかす前の要素を重ねない）
add=1（ぼかした後にぼかす前の要素を重ねる）
direction=0〜360（角度）
strength=0〜100（ぼかし度合い）

<IMG src="../images/green.png" style="filter:Blur(add=0,direction=90,strength=20)">

花にとまる蝶
add=0,
direction=45,
strength=10		 花にとまる蝶
add=0,
direction=45,
strength=10
花にとまる蝶
add=1,
direction=45,
strength=20		 花にとまる蝶
add=1,
direction=90,
strength=20

up

<img src="filter_blur.jpg"
 width="91" height="177"
 alt="Bild"
 border="0"
 style="filter:Blur(direction=45, strength=40)">
<div
 style="width:100%;
 padding:20px;
 font-size:42pt;
 color:red; filter:Blur(direction=235,
 strength=6)">Text mit Blur-Effekt</div>

up

filter: Chroma

特定の要素の特定の色を透明化するためのプロパティです。

style="filter:Chroma(color=#009900)"

ドイツ国旗
filter:Chroma(color=#ffffff)		 ドイツ国旗
filter:Chroma(color=#000000)
ドイツ国旗
filter:Chroma(color=#fefe00)		 ドイツ国旗
filter:Chroma(color=#fd0000)
<img
 src="filter_chroma.gif"
 style="filter:Chroma(color=#DDBB99)"
 width="106" height="109" alt="Bild" border="0">

up

filter: DropShadow

テキストにぼかし無しの影をつけるためのプロパティです。

ぼかしありの影filter: Shadow() と上手く使い分けましょう。

値：color=#RGB（影の色）
offx=数値（影のX軸上の距離）
offx=数値（影のY軸上の距離）
positive=0（影と影背景を反転させる）
positive=1（影と影背景を反転させない）

filter:DropShadow(color=#60f060,offx=5,offy=5,positive=1)

ドイツ国旗あいうえお
filter:DropShadow(color=#60f060,offx=5,offy=5,positive=0)
ドイツ国旗あいうえお
<div
 style="width:100%;
 font-size:64pt;
 color:blue;
 filter:DropShadow(color=#C0C0C0,
 offx=3,
 offy=3)">
Text mit Schattenwurf</div>

　

up

filter: FlipH

　

特定の要素を左右反転させるためのプロパティです。

<IMG src="../images/green.png"style="filter:FlipH()">

ドイツ国旗 MOPA ドイツ国旗 MOPA
<img
 src="filter_flip.jpg"
 style="filter:FlipH()"
 width="200" height="140"
 border="0" alt="Bild">

up

filter: FlipV

特定の要素を上下反転させるためのプロパティです。

<IMG src="../images/green.png" style="filter:FlipV()">

ドイツ国旗 MOPA ドイツ国旗 MOPA
<img
 src="filter_flip.jpg"
 style="filter:FlipV()"
 width="200"
 height="140"
 border="0" alt="Bild">

up

filter: Glow

テキストを光らせるためのプロパティです。

値：color=#RGB（光の色）
strength=数値（光の強さ）
<DIV style="width:100%;filter:Glow(color=#FFFF00,strength=3)">黄系統を指定すると光っているように見えます。

</DIV>

ドイツ国旗あいうえお

<div
 style="width:100%;
 font-size:64pt;
 color:#9999CC;
 filter:Glow(color=#000000,
strength=12)">
Gl&uuml;hender Text</div>

up

filter: Gray

特定の要素をグレースケールにするためのプロパティです。

<IMG src="green.png" style="filter:Gray()">

花にとまる蝶

<img
 src="filter_gray.jpg"
 style="filter:Gray()"
 width="200"
 height="240"
 border="0" alt="Bild">

up

filter: Invert

特定の要素の色調を反転させるためのプロパティです。

<IMG src="green.png" style="filter:Invert()">

花にとまる蝶

<img
 src="filter_invert.jpg"
 style="filter:Invert()"
 width="200" height="200"
 border="0" alt="Bild">

up

filter: Mask

特定の要素について透明部を指定色にし、不透明部を透明化するためのプロパティです。

style="filter: Mask(color=#0000FF)"

Bild

<img
 src="filter_mask.gif"
 style="filter:Mask(color=#000066)"
 width="100" height="94" border="0" alt="Bild">

up

filter: Shadow

テキストにぼかしありの影をつけるためのプロパティです。

ぼかし無しの影filter: DropShadow() と上手く使い分けましょう。

値：color=#RGB（影の色）
direction=0〜360（影の方向）

<DIV
 style="width: 100%;filter: Shadow(color=#FF0099,direction=135)">
あいうえお
</DIV>

BildMOPA .TC
<div
 style="width:100%;
 font-size:48pt;
 color:magenta;
 filter:Shadow(color=#000000,
 direction=45)"> Text mit Schatten</div>

up

filter: Wave

特定の要素を波状にするためのプロパティです。

値：add=0（波状にした後に波状にする前の要素を重ねない）
add=1（波状にした後に波状にする前の要素を重ねる）
phase=0〜360（波の開始位置）
freq=数値（波の数）
strength=数値（波の強さ）
lightstrength=数値（波の凹凸面の明るさの落差）
style="filter:Wave(add=0,
phase=90,
freq=3,strength=10,
lightstrength=50)

Bild
add=0		 MOPA Bild
add=1		 MOPA
<div
 style="width:100%;
 font-size:92pt;
 font-weight:900;
 color:#FFCCFF;
filter:Wave(freq=5,
 light=20,
 phase=50,
 strength=6)
 Shadow(color=#808080,
 direction=135);"> Wave-Text</div>

up

filter: XRay

特定の要素にX線を照射したような効果を与えるためのプロパティです。

filter: Gray(); ではそのままグレースケールにするのに対し、filter: Xray(); では色調反転した後にグレースケールにする点に違いがあります。

style="filter: Xray()"

Bild

<img
 src="filter_x_ray.jpg"
 style="filter:XRay()"
width="276" height="189" border="0" alt="">

up

Static Filter

.クラス名等{filter:フィルタ名(プロパティ1=プロパティ1値,プロパティ2=プロパティ2値)}

Functional list
フイルタ−名 機能 要素 ( )の中に記述する。
Alpha 透明度の設定 Opacity=透明度,FinishOpacity=終わりの透明度,
Style=直線上放射上のタイプｎ，
StartX=始点X,StartY=始点Y,
FinishX=終点X,FinishY=終点Y）
Blur 軌跡を付ける Add=効果をつける,
Direction=角度,
Strength=軌跡の強さ
Chroma 特定の色を透明にする Color=指定色
DropShadow 投影したシルエット Color=色,
OffX=左右位置,OffY=上下位置,
Positive=シルエットの濃さ
FlipH 水平な鏡像 （）
FlipV 垂直な鏡像 （）
Glow 輪郭に明るい輝きをつける Color=色,Strength=輝きの強さ
Grayscale グレ−スケ−ル （）
Invert 色合い、輝度の反転 （）
Light 光源効果 （）スクリプトからコントロ−ル
Mask 透明にくりぬく Color=色
Shadow グランデ−ションの影 Color=色,Direction=角度
Wave ウエ−ブ（波）を付ける Add=効果をつける,
Freq=波数,
LightStrength=光の強さ％，
Phase=波幅の始点,
Strength=波の強度
XRay モノクロ化 （）

使い方は、下記のマイクロソフトのサンプルで確認してください

Filters and Transitions Interactive Demo

HOMEの次スタイルシートの次フィルター



目的別属性

広告