波状にする

[新着] Webテンプレートを仮オープンしました

filter: wave(***);

ブラウザ
(独自拡張) Internet Explorer
参考
書式基本 要素名 クラス ID

wave は、波状にするフィルタです。

波の数、大きさ、立体感などを指定できます。

#example {
filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);
}

add 波の上に元の内容を重ねるかどうか
0（false） = 重ねない｜1（true） = 重ねる
freq 波の数（数値）
strength 波の横幅（数値）
lightstrength 光の強さ
0（弱） 〜 100（強）
phase 波の開始位置
0 〜 100

使用例

【フィルタなしの状態】

<img src="image/friend.gif" alt="IMG" width="170" height="140">

IMG

<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>

フィルタの表示テスト

【波の数】

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="width: 100%; padding-left: 10px; filter: wave(freq=1, strength=5, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="width: 100%; padding-left: 10px; filter: wave(freq=10, strength=5, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="font: bold 170% sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(strength=3, lightstrength=50);">
フィルタの表示テスト
</div>

フィルタの表示テスト

<div style="font: bold 170% sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">
フィルタの表示テスト
</div>

フィルタの表示テスト

<div style="font: bold 170% sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(freq=6, strength=3, lightstrength=50);">
フィルタの表示テスト
</div>

フィルタの表示テスト

【波の横幅】

<div style="width: 100%; padding-left: 10px; filter: wave(strength=3, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="width: 100%; padding-left: 30px; filter: wave(strength=30, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

【光の強さ】

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=60);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=30);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

【波の開始位置】

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=25);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=75);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

【重ねる】

<div style="width: 100%; padding-left: 10px; filter: wave(add=true, strength=10, lightstrength=50);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>

IMG

［特集］ レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版