スタイルシートリファレンス > filter: wave()

スタイルシートリファレンス filter: wave()


filter: wave() 画像やテキストを波状にする (IE4)

画像やテキストを波状にします。

<span><div>タグで使用する場合は、width, height を指定するか、position で absolute を指定します。

strength
波の強さを指定
phase
波の開始位置を0〜360で指定
lightstrength
光の強さを0〜100で指定
freq
波の数を指定
add
1,元の画像を重ねて表示、0,表示しない

▲ページ先頭へ

使用例 filter: wave()

HTMLソース

<html>
<head>
<title>CSS テスト</title>
<style type="text/css">
<!--
smp1 {
filter: wave(strength=3,phase=90,lightstrength=60,freq=5,add=0);
}
smp2 {
filter: wave(strength=3,phase=90,lightstrength=60,freq=5,add=1);
}
smp3 {
width:220px;
font-size:15pt;
filter: wave(strength=2,phase=45,lightstrength=50,freq=4,add=0);
}
smp4 {
width:220px;
font-size:15pt;
filter: wave(strength=2,phase=45,lightstrength=50,freq=4,add=1);
}
-->
</style>
</head>
<body>
<img src="sample.gif" class="smp1"><br>
<img src="sample.gif" class="smp2"><br>
<div class="smp3">このように表示されます</div>
<div class="smp4">このように表示されます</div>
</body>
</html>

▲ページ先頭へ

ブラウザ上の表示


画像に指定
(strength=3,phase=90,lightstrength=60,freq=5,add=0)
画像を波状にします

画像に指定
(strength=3,phase=90,lightstrength=60,freq=5,add=1)
画像を波状にします

テキストに指定
(strength=2,phase=45,lightstrength=50,freq=4,add=0)
このように表示されます

テキストに指定
(strength=2,phase=45,lightstrength=50,freq=4,add=1)
このように表示されます


▲ページ先頭へ

関連項目【フィルタ・効果】

filter: alpha()
透明・半透明・グラデーションにする (IE4)
filter: mask()
透明部分を塗りつぶし不透明部分を透明にする (IE4)
filter: chroma()
特定の色を透明にする (IE4)
filter: dropshadow()
影をつける (IE4)
filter: shadow()
立体的な影をつける (IE4)
filter: glow()
文字の周りに効果をつける (IE4)
filter: fliph()
左右反転にする (IE4)
filter: flipv()
上下反転にする (IE4)
filter: blur()
画像やテキストをブレさせる (IE4)
filter: wave()
画像やテキストを波状にする (IE4)
filter: invert()
階調を反転させる (IE4)
filter: gray()
グレイスケールにする (IE4)
filter: xray()
階調を反転してグレイスケールにする (IE4)
filter: light()
ライティング効果にする (IE4)
zoom
拡大・縮小表示する (IE55)

▲ページ先頭へ

スタイルシートリファレンス > filter: wave()