【Wave()】波状にして表示する

filterプロパティのWave()では、テキストや画像を波状(波打つよう)にして表示する事ができます。 波の数、開始位置などは各パラメータで指定します。

なおprogid:DXImageTransform.Microsoft.までを省略しfilter:wave()の書式で指定する場合、フィルタによってはみ出した部分が切り取られます。 ですので併せてpaddingを設定し、はみ出す部分のスペースを空けておく必要があります。

また書式について詳しくはfilterを参照して下さい。

書式

  • filter:progid:DXImageTransform.Microsoft.Wave(★) ……… 波状にして表示する(IE5.5以上)
  • filter:wave(★) ……… 波状にして表示する(IE4以上)

★:Freq=波の数、LightStrength=光の強さ、他下記参照

Freq=波の数
波の数を数値で指定します。(初期値3)
LightStrength=光の強さ
波に当たる光の強さを0(弱い)~100(強い)で指定します。(初期値100)
Phase=波の開始位置
波の開始位置を0~100で指定します。(初期値0)
Strength=波の振動幅
波の強さ(振動幅)を数値で指定します。(初期値5)
Add=上書き
効果を適用後、元の要素を上書き(表示)するか指定します。「1またはtrue」で表示、「0またはfalse」で表示しない。(初期値0)
enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

使用した時の例

.sample1 img {
  filter:progid:DXImageTransform.Microsoft.Wave(Fleq=3, Add=0, LightStrength=10, Strength=5);
}
.sample2 img {
  filter:wave(Fleq=3, Add=0, LightStrength=10, Strength=5);
  padding:10px;
}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。Wave(Fleq=3, Add=0, LightStrength=10, Strength=5)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample2">sample2を適用した画像。wave(Fleq=3, Add=0, LightStrength=10, Strength=5)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample1を適用した画像。Wave(Fleq=3, Add=0, LightStrength=10, Strength=5)

sample2を適用した画像。wave(Fleq=3, Add=0, LightStrength=10, Strength=5)

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~
※IE10以降は未対応

関連情報