北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1画像&文字にフィルタ効果をつける方法

2005年06月29日

カープユニフォーム1 画像&文字にフィルタ効果をつける方法

今回は簡単に言うと画像&文章を書く時のテクニックです。
難しく言えば画像&文字にフィルタ効果をつけるテクニックです。
興味のある方は是非見てやってみてください。

ただただ文字に色を付けたり文字を太くするのは簡単です。
ただただ画像を張るのも簡単です。
今回は文字を画像にしなくても
文字を炎の効果を付けたりする事が出来る様にできます。
また、画像にもいろいろ効果を付けるように出来ます。
marinerlogo1


←※フィルタ効果無しの画像


?alpha() :透明・半透明・透明グラデーションにします。
style=0,1,2,3
透明グラデーションのスタイル(0=指定なし、1=線形、2=円形、3=方形)を指定します。
startx=数値, starty=数値, finishx=数値, finishy=数値
透明グラデーションの領域を指定します。
opacity=0〜100
開始透明度を0(透明)〜100(不透明)の範囲で指定します。
finishopacity=0〜100
終了透明度を0(透明)〜100(不透明)の範囲で指定します。
<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: alpha(style=1,opacity=30,finishopacity=100);">
<div style="width: 100%; filter: alpha(opacity=30);">alpha半透明</div>



alpha半透明

?blur() ブレさせます。
add=0(false),1(true)
ブレ効果を与えた要素の上に、元の要素を重ねるかどうかを指定します。
direction=角度
影の方向を角度で指定します。時計回りに上が0、右が90、下が180、左が270となります。
strength=数値
ブレの強さを指定します。
<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: blur(direction=90);">
<div style="width: 100%; filter: blur(add=1,direction=135);">blurブレ</div>



blurブレ


?chroma() 特定の色を透明にします。
color=色
透明にする色を指定します。

<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: chroma(color=#ffffcc);">
<div style="width: 100%; filter: chroma(color=#ffffcc);">chroma特定の</span>色を透過</div>



chroma特定色を透過


?glow() テキストに炎(光)につつまれたような効果をつけます。
color=色
炎(光)の色を指定します。
strength=数値
炎(光)の長さを指定します。
<div style="width: 100%; filter: glow();">glow炎(光)につつまれたような効果</div>

glow炎(光)につつまれたような効果


?gray() グレースケールで表示します。
<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: gray();">
<div style="width: 100%; filter: gray();">grayグレースケール</div>


grayグレースケール


?invert() 色(色相・明度・彩度)を反転します。
<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: invert();">
<div style="width: 100%; filter: invert();">invert色(色相・明度・彩度)を反転</div>


invert色(色相・明度・彩度)を反転


?shadow() テキストに影をつけます。
dropshadow()の影と異なり、連続してぼかされた影をつけます。

color=色
影の色を指定します。
direction=角度
影の方向を角度で指定します。時計回りに上が0、右が90、下が180、左が270となります。

<div style="width: 100%; filter: shadow(color=#0000ff,direction=135);">shadow影</div>

shadow影


?wave() 波状にします。
add=0(false),1(true)
波効果を与えた要素の上に、元の要素を重ねるかどうかを指定します。
freq=数値
波の数を指定します。
lightstrength=0〜100
光の強さを指定します。
phase=0〜360
波の開始位置を指定します。
strength=数値
波の強さを指定します。


<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: wave(freq=3,lightstrength=50,strength=5);">
<div style="width: 100%; filter: wave(freq=1,strength=2);">wave波</div>


wave波


?xray() X線を当てたような効果(グレースケールにして反転)にします。
<img src="http://beijingbaseballkids.seesaa.net/mariners/logo1.gif" alt=" " style="filter: xray();">
<div style="width: 100%; filter: xray();">xrayX線</div>



xrayX線


まだまだありますがこれらを駆使すると結構面白いサイトが出来上がると思います。
頑張って工夫してみてください。
posted by むさC16 at 08:04 | Comment(3) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
http://feifei.seesaa.net/

新規作成しました。RSSへの再記入お願いします。
コメント用アイコン1Posted by きむ1 at 2005年06月29日 12:19
とりあえずはRSSは変更しといたよ。
コメント用アイコン1Posted by むさし16 at 2005年06月29日 19:46
nb鞋款
コメント用アイコン1Posted by nb鞋款 at 2016年04月08日 18:02
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社