サイト内検索

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

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

波立たせる

波立たせるフィルタは、waveプロパティを指定します。
波の数・大きさ・立体感などが指定できます。
[使い方]
［スタイルシート]
.sample{
filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);
}
［ｂｏｄｙの中］
<img src="../img/sample.jpg" class="sample">
ＩＥのみに対応しています。
[メモ]
strength・lightstrength・phaseは、
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=3, lightstrength=50);">
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
画像

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

光の強さ
画像

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

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

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

波の開始位置を決める
画像

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

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