◆文字にフィルターをかけてみよう!◆

文字 フィルター

このページの文字には特殊な効果がかけられていますね。

画像を使用しなくても、HTMLだけでこのような効果を出すことができるのです。

<SPAN STYLE="width: 580; height: 96;font-size: 96pt; font-family: arial black; color:
red; Filter: Wave(Add=0, Freq=2, LightStrength=5, Phase=55, Strength=8)">
文字</SPAN>

<SPAN STYLE="width: 380; height: 10; font-size: 70pt; font-family: Arial; font-weight:
bold; color: #0000FF; Filter: Shadow(Color=#9EAFE9, Direction=225)">
フィルター</SPAN>

<SPAN STYLE="width: 25; height: 250; font-size: 96pt; color: #000000; Filter:
DropShadow(Color=#808080, OffX=5, OffY=5, Positive=1)">
</SPAN>
ここではWaveShadowDropShadowの3つのフィルターを使用しています。

Waveは「文字」という文字のように、波を打った効果を与えるフィルターです。

Add1の場合は効果を与えた文字列の上に元の文字列を表示させ、0の場合は効果を与えた文字列のみを表示します。

Freq=2は波の数の指定で、数が多いほど波が細かくなります。

LightStrength=5は波の明暗を指定しています。

Phase=55は波の始まりを指定するもので、値は0から100までのパーセンテージで表します。

この値は角度に依存しており、55の場合は山から、75の場合は谷から始まります。

Strength=8は波の大きさを指定しており、値が大きすぎると原形をとどめないものになってしまうため、注意が必要です。

Shadowは「フィルター」という文字のように、尾を引いた効果が得られるフィルターです。

Color=#9EAFE9は尾の色を16進数で指定しています。

Direction=225は尾が伸びる方向を角度で指定しており、角度は真上を0度として時計回りに大きくなっていきます。

ここでは225度、つまり左斜め下の方向に尾が伸びるように指定しています。

DropShadowは「に」という文字のように、影の付いた効果が得られるフィルターです。

Color=#808080は影の色を16進数で指定しています。

OffX=5 OffY=5は影の位置を指定しており、それぞれ文字列からの下方向と右方向の距離を表しています。

数字は影を付ける文字列からの相対距離を指定しているのです。

Positive0の場合は影が透明になり、1の場合は不透明になります。

HTMLにCha☆llengeへ戻ります

2004年9月10日更新