SITEMAP [初めてのホームページ講座] [CSS] [FILTERS] [書式]

CSS FILTERS

基本書式

基本的に、CSSと同じ記述方法を用います。一部の機能でメソッドと値を持つものがありますが、この場合のみその指定する内容分だけ記述数が増えます。

CSS FILTER [ALPHA]

.Salpha{
	text-align:         center;
	font-size:          16pt;
	font-weight:        bold;
	color:              #00f;
	background-color:   #99f;
	margin:	            0 0 0 25px;
	padding:            2px;
	border:	            2px solid #009;
	width:              300px;
	filter:	alpha(
			opacity=20,
			finishopacity=80,
			style=1,
			startx=0,
			starty=0,
			finishx=100,
			finishy=100
		)
}

CSSのように、クラスセレクタやIDセレクタの使用が可能です。 CSSのプロパティとして、「filter」を指定します。この後に、「:」（コロン）を続けて、フィルターの書式を指定します。必要があれば、その値などを指定します。

書式の後の値を複数指定する場合は、「,」（カンマ）で区切り、全体を「()」（カッコ）で括ります。 上のサンプルと、下の指定方法を参考にして下さい。

CSSセレクタ{
	filter:	書式(
			値１,
			値２
		)
}

改行してタブで整形（HTML使用ではPRE要素にタブを使用することは禁止されているんだけど・・・整形が崩れたら私が悪いです。 CSSの記述には全く問題はありません。）していますが、続けて記述しても問題はありません。基本的にCSSに添います。

[Go To Top]

応用書式［複数指定］

フィルタを複数指定することで、様々な効果を得ることが可能です。例えば、[ALPHA（透明処理）]と[DROPSHADOW（影生成）]を同時にかけるとどうなるか？残念ながら、影の部分にまでALPHA効果を得ることは出来ないまでも、面白みのあるものになります。

この他にも、[SHADOW（影生成）][WAVE（波）]を同時にかける、等もあります。この場合、テキストに対してはかなり使えそうな、一見画像とも取れてしまいそうなものに仕上がります。

こうなれば、３つ以上同時にかけてしまうとどうなるのだろうか。そこで、[ALPHA（透明処理）][SHADOW（影生成）][WAVE（波）][GRAY（モノトーン）]を同時にかけてみました。なかなかなものです。こうなればあらゆるフィルターをかけて、画像の領域に迫ってみるのも実力の見せ所というところでしょう。が、私には重荷なのでここから先は皆さんの実力に委ねます。

さて実際に、どうやって複数のフィルタを指定するのか、ここに触れてみましょう。実は凄く簡単で、フィルタごと、空白類文字列（半角スペースやタブ、改行）で区切るか、「,（カンマ）」で区切るだけです。実際にどうやって、上記の３つの効果を出しているかのサンプルを載せておきます。下記サンプルでは全てタブと改行でフィルタごとを区切っています。

CSSセレクタ{
	filter:	書式１(
			値１,
			値２
		)
		書式２(
			値１,
			値２
		)
}

注意すべき点がいくつかあります。

filterプロパティは１つだけ指定すること（複数の場合、CSS仕様にのっとりプロパティの宣言は上書きされる）
色を指定するフィルタとモノトーン化するフィルタの指定順序は気を付けること（相反するため）
複数指定する場合は、CSSの区切り文字「;（セミコロン）」と混同せぬ事

[ALPHA（透明処理）]と[DROPSHADOW（影生成）]

#Filt1{		/*ここはCSSのセレクタなら何でもよい*/
	filter:	alpha(
			opacity=20,
			finishopacity=80,
			style=1,
			startx=0,
			starty=0,
			finishx=100,
			finishy=100
		)
		dropshadow(
			color=#000,
			offx=3,
			offy=5,
			positive=true
		)
}

[SHADOW（影生成）][WAVE（波）]

#Filt1{		/*ここはCSSのセレクタなら何でもよい*/
	filter:	shadow(
			color=#00f,
			direction=225
		)
		wave(
			add=false,
			freq=2,
			lightstrength=20,
			phase=5,
			strength=10
		)
}

[ALPHA（透明処理）][SHADOW（影生成）][WAVE（波）][GRAY（モノトーン）]

#Filt1{		/*ここはCSSのセレクタなら何でもよい*/
	filter:	alpha(
			opacity=20,
			finishopacity=80,
			style=1,
			startx=0,
			starty=0,
			finishx=100,
			finishy=100
		)
		shadow(
			color=#00f,
			direction=225
		)
		wave(
			add=false,
			freq=2,
			lightstrength=20,
			phase=5,
			strength=10
		)
		gray()
}

[Go To Top]

応用書式［コレクション］

フィルターを使ったダイナミックHTMLも楽しめます。ここではサンプルに[WAVE（波）]を用いたDHTMLを用意しています。

ダイナミックHTMLと同じように、フィルターの場合はフィルターコレクションを用います。このコレクションをJavaScriptを用いてダイナミックに変化させることで面白い演出が可能になります。このサンプルの記述方法は、下記のようになっています。

下記のように、CSSでIDセレクタをフィルターに指定し、HTMLからID属性値として参照します。一方JavaScriptでは、ID属性のfiltersコレクションを参照し、これに対して読み書きすることでダイナミックな動作を実現します。

フィルターの指定(CSS) ： IDセレクタの指定

#Filt{
	filter:	wave
}

フィルターの適用(HTML) ： ID属性の指定

<div class="text"ext id="Filt">CSS Filter Effect</div>

オブジェクトの参照(JavaScript) ： filtersコレクションの参照(document.all.ID属性値.filters.["フィルターの種類"])

obj = document.all.Filt.filters["wave"]

コレクションの代入(JavaScript) ： filtersコレクションの代入(obj.フィルターの書式)

document.all.Filt.filters["wave"].freq = 2;		//wave(freq=2)：周波数
document.all.Filt.filters["wave"].lightstrength = 2;	//wave(lightstrength=2)：光源の強さ
document.all.Filt.filters["wave"].phase = 2;		//wave(phase=2)：位相
document.all.Filt.filters["wave"].strength = 2;	//wave(strength=2)：振幅

サンプルを応用して文字当てクイズなんか作れそうな感じです。^^

[Go To Top]