Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>wave フィルタ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

wave フィルタ …波打たせる

使用プロパティ

CSSプロパティ

filter: wave(属性=値);

対象となる
要素

すべて

継承

しない

次項(属性、値とその効果)を参照してください。

対応ブラウザ IE6 Win

解説

wave フィルタを使えば、要素を左右に波打たせたように表示することができます。

[ 複数の属性値を指定する ]…カンマ「,」で区切ります。
書式→「filter: フィルタ名(属性=値,属性=値);」

[ メモ ]
filter プロパティを div 要素span 要素に使用する際には、width プロパティheight プロパティ要素の幅や高さを指定する必要があります。ですが、画像などのように幅や高さが決まっている要素には必要ありません。また、position プロパティで「absolute」を指定した要素に対しても必要ありません。

filter プロパティは Internet Explorer 独自のプロパティで、対応していないブラウザで表示すると表示が崩れる場合がありますので注意が必要です。

属性、値とその効果

属性 効果
add
(アド)
「true」または「1」は元の画像を重ねる
「false」または「0」は元の画像を重ねない
元の画像を重ねて表示するか、重ねないで表示するかを指定できる
freq
(フレック)
整数 波の数
lightstrength
(ライトストレングス)
0(弱い)〜100(強い) 波を照らす光の強さ
phase
(フェーズ)
0〜100 波の開始位置
strength
(ストレングス)
整数 波の強さ

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

</head>

<!--ページの本文-->
<body>

<p>- 元の画像- <br>
<img src="logo.gif" width="172" height="60" alt="サンプル">
</p>

<p>-フィルタ使用後の画像-<br>
<div style="width: 100%; padding-left: 10px; filter: wave(freq=2, strength=3, lightstrength=10);">
<img src="logo.gif" width="172" height="60" alt="サンプル">
</div>
</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

- 元の画像-
サンプル

-フィルタ使用後の画像-

サンプル

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system