楽天広場HTML講座 フィルタ効果
・フィルタ今回は、フィルタについて学んで行きたいと思います。フィルター（フィルタ、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
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
