サイト内検索

...スタイルシート(css)...

スタイルシート・フィルタ

波立たせる

波立たせるフィルタは、waveプロパティを指定します。
波の数・大きさ・立体感などが指定できます。
[使い方]
［スタイルシート]
.sample{
filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);
}
［ｂｏｄｙの中］
<img src="../img/sample.jpg" class="sample">
ＩＥのみに対応しています。
[メモ]
freq・strength・lightstrength・addは、
W3C・CSS検証サービスでは、推奨されていません。
プロパティ名 説明
add 波の上に元の内容を重ねるかどうか
0（false）=重ねない。
1（true）=重ねます。
freq 波の数（数値）
strength 波の横幅（数値）
lightstrength 光の強さ
0（弱）〜100（強）
phase 波の開始位置
0〜100

サンプル

フィルタを使用していない状態
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90">

☆★文字★☆

<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="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
画像

<div style="width: 100%; padding-left: 10px;
filter: wave(freq=1, strength=5, lightstrength=50);">
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
画像

<div style="width: 100%; padding-left: 10px;
filter: wave(freq=10, strength=5, lightstrength=50);">
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
☆★文字★☆

<div style="font: bold 170% sans-serif; color: blue; width: 100%;
padding-left: 10px; filter: wave(strength=3, lightstrength=50);">
☆★文字★☆
</div>
☆★文字★☆

<div style="font: bold 170% sans-serif; color: blue; width: 100%;
padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">
☆★文字★☆
</div>

☆★文字★☆

<div style="font: bold 170% sans-serif; color: blue; width: 100%;
padding-left: 10px; filter: wave(freq=6, strength=3, lightstrength=50);">
☆★文字★☆
</div>


重ねる
画像

<div style="width: 100%; padding-left: 10px;
filter: wave(add=true, strength=10, lightstrength=50);">
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
Copyright c 2007.10.01 luc All rights reserved.