HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

贈り物に頭を悩ませている方へお薦め〔リンベルの上質カタログギフト [PR]

● フィルター効果

これらはfilter(フィルタ)と呼ばれるIE仕様の、文字及び画像の装飾です。インターネットエクスプローラー以外のブラウザでの表示は保証できません。
Opera6.01では、ただの文字列および画像にしか見えませんでした。
スタイル(style属性)で、style="width:100% ; filter:値"のように指示します。 BODY等では不要ですが、DIV,SPAN要素ではwidthで幅を設定する必要があるようです。
効果により字が読めない場合はドラックして(マウスの右クリックで字をなぞって)みてください。

○影の設定 Shadow()
影付きの文字になります。 ↑)style="width:100% ; filter:Shadow()"
colorで影の色を設定します。directionで影をつける方向を設定できます。
↑)style="width:100% ; filter:Shadow(color=#efefef,direction=90)"
画像にも設定可能です。=> バナー
↑)style="filter:Shadow(color=#efefef)"

○影を設定2 DropShadow()
影を付けます。color=#efefefのようにして影の色を設定できます。 画像にも設定可能です。=> バナー
↑)style="filter:DropShadow(color=#efefef)"
影を表示する位置を設定できます。offX=10, offY=10だとこうなります。 ↑)style="width:100% ; filter:DropShadow(color=#efefef,offX=10,offY=10)"
バナーpositive=trueで透過色を無視
↑)style="filter:DropShadow(color=#efefef,positive=true)"
バナーpositive=falseで透過色を色として認識します。(だから影が出てこない)
↑)style="filter:DropShadow(color=#efefef,positive=false)"

○輪郭の設定 Glow()
画像やテキストに輪郭をつけます。 ↑)style="width:100% ; filter:Glow()"
バナー
↑)style="filter:Glow()" 輪郭の色をcolor=blueのようにして指示できます。 ↑)style="width:100% ; filter:Glow(color=blue)"
strength=1のように輪郭の幅を調整できます。 ↑)style="width:100% ; filter:Glow(strength=1)"
バナー
↑)style="filter:Glow(strength=3,color=blue)"

○半透明・グラデーションの設定 Alpha()
括弧内にopacity=60などの設定で透明0〜不透明100までを設定できます。
↑)style="width:100% ; filter:Alpha(opacity=60)"
バナー
↑)style="filter:Alpha(opacity=50)" opacity=50を設定した画像です。

括弧内にopacity=80などと同時にfinishopacity=30及びstyle=1の設定でグラデーション効果を設定できます。 ↑)style="font-size:1.5em ; width:100% ; filter:Alpha(style=1,opacity=80,finishopacity=20)" 括弧内にopacity=100などと同時にfinishopacity=30及びstyle=2の設定でグラデーション効果を設定できます。 ↑)style="font-size:1.5em ; width:100% ; filter:Alpha(style=2,opacity=80,finishopacity=20)" 括弧内にopacity=100などと同時にfinishopacity=30及びstyle=3の設定でグラデーション効果を設定できます。 ↑)style="font-size:1.5em ; width:100% ; filter:Alpha(style=3,opacity=80,finishopacity=20)"

グラデーションのスタイルは0〜3まであり、0はグラデーションをかけません。 1は横に、2は両サイドから、3は上下左右からグラデーションがかかります。
グラデーションの開始位置と終了位置を設定できます。
バナー
↑)style="filter:Alpha(style=1,opacity=80,finishopacity=20"
バナー
↑)style="filter:Alpha(style=1,opacity=80,finishopacity=20,startX=66,finishX=88,finishY=32,startY=24)"
startX,finishX,finishY,startYで設定した領域に対して、グラデーションをかける領域を設定します。

にじみ効果の設定 Blur()
画像をにじませたような効果を出します。文字の場合は立体的な影付き文字になります。 ↑)style="width:100% ; filter:Blur()"
バナー ←)style="filter:Blur()"

元の画像をにじませた画像の上に重ねるか否かです。
バナー ←)style="filter:Blur(add=true)"
バナー ←)style="filter:Blur(add=false)"

にじませる角度を設定します。 ↑)style="width:100% ; filter:Blur(direction=45)"
にじませの強さを設定します。 ↑)style="width:100% ; filter:Blur(strength=5)"
にじませの強さを設定します。 ↑)style="width:100% ; filter:Blur(strength=80)"
バナー
↑)style="filter:Blur(strength=100)"

画像の透過色を設定 Chroma()
画像の中の設定した色を透明にします。
バナー ←)style="filter:Chroma(color=#666666)"
透明にしたい色を設定すれば(ココではかわだ亭の文字)透明になります。

左右反転の設定 FlipH()
左右を反転します。(BR→ / SPAN→)
↑)style="width:50% ; filter:FlipH()"
BR要素(改行)をSPAN要素のあとに持ってこないと、行末にあるBRの位置も反転してしまいその機能をうしなってしまう模様(↑。 改善(↓。
左右を反転します。 (←SPAN / BR→)
↑)style="width:50% ; filter:FlipH()"
バナー ←)style="filter:FlipH()"

上下反転の設定 FlipV()
上下を反転します。
↑)style="width:100% ; filter:FlipV()"
バナー ←)style="filter:FlipV()"

二色(白黒)化の設定 Gray()
バナー ←)style="filter:Gray()"

ネガポジ反転の設定 Invert()
バナー ←)style="filter:Invert()"
色合いや彩度、明るさが反転します。
↑)style="width:100% ; filter:Invert()"
色合いや彩度、明るさが反転します。緑色の文字に赤い背景が反転してこのようになっています。
↑)style="color:#00ff00 ; background-color:#FF0000 ; width:100% ; filter:Invert()"

透明と非透明の反転設定Mask()
バナー ←)style="filter:Mask()"
バナー ←)style="filter:Mask(color=0000ff)"
画像やテキストの透明部を設定色に(color=0000ffのように設定)、非透明部を透明にします。色設定しない場合は黒になります。
↑)style="width:100% ; filter:Mask(color=0000ff)"

グレースケールの設定Xray()
バナー ←)style="filter:Xray()"

画像やテキストをグレースケールにして表示します。緑色の文字に赤い背景が反転してこのようになっています。
↑)style="color:#00ff00 ; background-color:#FF0000 ; width:100% ; filter:Xray()"

光源の設定 Light()
画像やテキストに光を当てたような効果を出します。・・・??
バナー ←)style="filter:Light()"
これはスタイル設定では効果が分かりません=> [こちらへ] ちっと重いです。javascriptを停止させていると意味無いです。

歪みの設定Wave()
テキストに歪みの効果を・・・ドラックすると分かりますが、一応でてるみたいです。
↑)style="font-size:1.5em ; width:100% ; filter:Wave()"

バナー ←)style="filter:Wave()"
画像を波のようにゆがめます。

バナー ←)style="filter:Wave(add=1)"    バナー ←)style="filter:Wave(add=0)"
効果を付けた画像に元の画像を重ねるか否かを設定します。

バナー ←)style="filter:Wave(freq=2)"    バナー ←)style="filter:Wave(freq=5)"
波の数を設定します。

バナー ←)style="filter:Wave(lightStrength=20)"
バナー ←)style="filter:Wave(lightStrength=80)"
影の強さを設定します(範囲は弱0〜100強)。

バナー ←)style="filter:Wave(phase=75)"    バナー ←)style="filter:Wave(phase=15)"
波の開始位相を設定します(範囲は0〜360だけど、位相だから0〜90で設定できるんじゃないかな・・・??)。

バナー ←)style="filter:Wave(strength=5)"
バナー ←)style="filter:Wave(strength=20)"
波の強さを設定します。

バナー ←)style="filter:Wave(freq=3,lightStrength=10,strength=3)"
こんな感じです。

フィルターの合成
style="width:100% ; filter:Alpha(opacity=60) Shadow(color=#efefef,direction=100) FlipV()" のように複数の効果を重ねられます(↓。
薄くして影付けて上下逆 width:100% ; filter:Alpha(opacity=60) Shadow(color=#efefef,direction=100) FlipV()

<<前へ  |上へ|  次へ>>
1234567891011121314151617

通信講座であなたもスキルアップ!学ぶ喜びが味わえる詳しい講座案内書を無料送呈中!

TOP] [HOME

更新日時:2014/08/09