◆文字にフィルターをかけてみよう!◆
文字
フィルター
に このページの文字には特殊な効果がかけられていますね。 画像を使用しなくても、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> |
ここではWave、Shadow、DropShadowの3つのフィルターを使用しています。 Waveは「文字」という文字のように、波を打った効果を与えるフィルターです。 Addが1の場合は効果を与えた文字列の上に元の文字列を表示させ、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は影の位置を指定しており、それぞれ文字列からの下方向と右方向の距離を表しています。 数字は影を付ける文字列からの相対距離を指定しているのです。 Positiveが0の場合は影が透明になり、1の場合は不透明になります。 |
2004年9月10日更新