楽天広場HTML講座フィルタ効果

2007.02.02

・フィルタ

今回は、フィルタについて学んで行きたいと思います。

フィルター（フィルタ、filter）とは、与えられた物の特定成分を取り除く
（あるいは弱める）作用をする機能をもつものです。

ある成分以外の全成分を弱めることにより
その成分だけを強調する効果を得る場合もあります。

さらに、各成分に対し何らかの処理を施す場合もあります。

【注意】
HTMLの表示は各ブラウザによって微妙に違います。
IEでは確認取れていますが、Firefoxでは何の変化も無いようです。

【フィルタなしの状態】
<IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif">

↓ 入力ソース

<div style="font: bold 20pt sans-serif; width: 100%;">
楽天広場HTML講座</div>

表示例↓こんな感じですね。

楽天広場HTML講座

■shadow() ･･･やわらかい影をつけてくれます

filter: shadow(color=影色, direction=角度); }
□color 影の色
□direction 影の方向（45度単位：0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上）

<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135);"><IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>

↓入力ソース

<div style="font: bold 20pt sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135);">
楽天広場HTML講座</div>

表示例↓こんな感じですね。

楽天広場HTML講座

■dropshadow() ･･･シャープな影をつけてくれます

filter: dropshadow(color=影色, offx=左右, offy=上下, positive=反転);
□color 影の色
□offx（影の左右の位置（ピクセル：整数）
□offy（影の上下の位置
□positive 影の反転（0（false） = 反転、1（true） = 通常）

<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#C0C0C0, offx=20, offy=30);"><IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>

↓入力ソース

<div style="font: bold 20pt sans-serif; width: 70%; padding: 5px 10px; filter: dropshadow(color=#C0C0C0, positive=false);">
楽天広場HTML講座</div>

表示例↓こんな感じですね。

楽天広場HTML講座

■blur() ･･･「ブレ」の効果を表示します

filter: blur(add=true, direction=90, strength=10);
□add 元画像をブレに重ねるかどうか（0（false） = 重ねない、1（true） = 重ねる）
□direction ブレの方向（45度単位：0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上）
□strength ブレの距離（ピクセル）

<IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" style="filter: blur(direction=0, strength=30);">

↓入力ソース

楽天広場HTML講座

表示例↓こんな感じですね。

<div style="font: bold 20pt sans-serif; width: 100%; filter: blur(add=false, direction=90, strength=15);">
楽天広場HTML講座</div>

■glow() ･･･発光しているような効果を表示します

filter: glow(color=光の色, strength=100);
□color 光の色
□strength 光の強さ（0（弱）～ 254（強））

<div style="width: 100%; padding: 20px; filter: glow(color=#FFFF00, strength=30);">
<IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>

↓入力ソース

<div style="font: bold 20pt sans-serif; width: 100%; padding: 20px; filter: glow(color=red, strength=20);">
楽天広場HTML講座</div>

表示例↓こんな感じですね。

楽天広場HTML講座

■wave() ･･･波状に表示します

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）

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=75);">
<IMG SRC="http://image.space.rakuten.co.jp/lg01/33/0000122333/57/imga1657cd3zik9zj.gif" width="64" height="64" alt="ky64-31.gif"></div>

↓入力ソース

<div style="font: bold 20pt sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50);">
楽天広場HTML講座</div>

表示例↓こんな感じですね。

楽天広場HTML講座

楽天広場HTML講座TOP

お気に入りの記事を「いいね！」で応援しよう

Last updated 2008.11.19 10:12:21

[HTML文字画像リンク] カテゴリの最新記事

楽天広場HTML講座 フィルタ効果

楽天広場HTML講座フィルタ効果