「007 スペクター」21世紀のボンドにスペクター
100万ポイント山分け!1日5回検索で1ポイントもらえる
>>
人気記事ランキング
ブログを作成
楽天市場
000000
HOME
|
DIARY
|
PROFILE
【フォローする】
【ログイン】
< 新しい記事
新着記事一覧(全11076件)
過去の記事 >
全て |
カテゴリ未分類
|
HTML文字画像リンク
|
HTMLタグ(テーブル)
|
HTML(応用編)
|
楽天で購入した商品
|
スポーツ,アウトドア,車,バイク
|
心緒
|
インテリア,ライト,収納,ベビー,キッズ
|
アフィリエイト入門編
|
TV・オーディオ・カメラ
|
自己管理,美容,インナー
|
DVD,CD,本,旅,楽器
|
生活,美容,健康,家電
|
金運アップ,風水,自己トレ
|
ユーザービリティとSEO
|
楽天市場のPR
|
アフィリエイト
|
音楽
|
食品,グルメ,飲料
|
ダイエット,健康,食品
|
園芸,DIY,ペット,おもちゃゲーム
|
日用品雑貨,キッチン用品,寝具
|
パソコン・周辺機器
|
ファッション,ジュエリー,アクセサリー,靴
|
防災,介護,医療
|
ブランド雑貨,時計
|
酒場放浪記
|
天気気象予報
|
気になる動画
|
最近チェックした商品
|
血圧測定
|
気になるニュース
|
人生の名言集
2007.02.02
楽天広場HTML講座 フィルタ効果
テーマ:
ホームページ作成の悩み(546)
カテゴリ:
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
お気に入りの記事を「いいね!」で応援しよう
いいね!
0
シェアする
Last updated 2008.11.19 10:12:21
[HTML文字画像リンク] カテゴリの最新記事
引用するタグ
2012.03.02
定義型リストの作り方
2012.03.02
フォントの変え方
2008.06.20
もっと見る
< 新しい記事
新着記事一覧(全11076件)
過去の記事 >
ホーム
フォローする
過去の記事
新しい記事
新着記事
上に戻る
【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね!
--
/
--
次の日記を探す
おめでとうございます!
ミッションを達成しました。
広告を見てポイントを獲得する
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
エラーにより、アクションを達成できませんでした。下記より再度ログインの上、改めてミッションに参加してください。
ログインする
x
© Rakuten Group, Inc.
X
共有
Facebook
Twitter
Google +
LinkedIn
Email
Design
a Mobile Website
スマートフォン版を閲覧
|
PC版を閲覧
人気ブログランキングへ
無料自動相互リンク
にほんブログ村 女磨き
LOHAS風なアイテム・グッズ
みんなが注目のトレンド情報とは・・・?
So-netトレンドブログ
Livedoor Blog a
Livedoor Blog b
Livedoor Blog c
楽天ブログ
JUGEMブログ
Excitブログ
Seesaaブログ
Seesaaブログ
Googleブログ
なにこれオシャレ?トレンドアイテム情報
みんなの通販市場
無料のオファーでコツコツ稼ぐ方法
無料オファーのアフィリエイトで稼げるASP
ホーム
Hsc
人気ブログランキングへ
その他
Share by: