主旨：使用 濾鏡樣式表 來為圖片打上濾鏡...
- 濾鏡效果只會顯示在IE基礎瀏覽器。
- 本範例需要「使用HTML格式建立網頁」這個欄位
- 本篇需要有一定的HTML基礎，雖然本篇附一點教學，如果還是看不懂的，請到別的網站進修充電一下喔。
- 多多使用 Ctrl+A (全選) 再按 Ctrl+C (複製) 還有 Ctrl+V (貼上) 組合鍵..一定要會用...拜託.^^
還有 Ctrl+X (剪下) 有 Ctrl+Z (復原) 組合鍵可用.....
- 一些濾鏡可以直接或間接套用在文字效果上。
預覽各種圖片濾鏡效果(使用黑板DIV表格)：
圖 片 套 用 濾 鏡 效 果
原圖 :
<img src="圖片.jpg">
柔邊效果-均勻 :
<img src="圖片.jpg" style="filter:alpha(opacity=25, finishOpacity=25,style=0)">
柔邊效果-線狀(左往右) :
<img src="圖片.jpg" style="filter:alpha(opacity=0, finishOpacity=100,style=1)">
柔邊效果-圓形(外往中央):
<img src="圖片.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=2)">
柔邊效果-圓形(中央往外):
<img src="圖片.jpg" style="filter:alpha(opacity=100, finishOpacity=0,style=3)">
詼諧效果 :
<img src="圖片.jpg" style="filter: gray">
Ｘ光效果 :
<img src="圖片.jpg" style="filter: Xray">
色彩對換 :
<img src="圖片.jpg" style="filter:invert">
左右翻轉 :
<img src="圖片.jpg" style="filter:FlipH()">
上下翻轉 :
<img src="圖片.jpg" style="filter:FlipV()">
發光效果 :
<div style="width: 134px; height: 140px;filter:glow(color=#ffffff, strength=6)"><img src="圖片.jpg" ></div>
附陰影效果 :
<div style="width: 134px; height: 140px;filter:shadow(color:#333333,direction=150);"><img src="圖片.jpg" ></div>
投射陰影效果 :
<DIV style="FILTER: Dropshadow(color:#333333,direction=150,offX=5,offY=5); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>
波形效果 :
<DIV style="FILTER: Wave(strength=5,lightstrengh=5); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>
模糊效果 :
<DIV style="FILTER:Blur(direction=150); WIDTH: 134px; HEIGHT: 140px"><img src="圖片.jpg" ></div>
*MSN Spaces for IE尚不支援的效果
馬賽克 :
<img src="圖片.jpg" style="filter:progid:
DXImageTransform.Mi
crosoft.Pixelate(maxsquare=4)">
支援馬賽克之後應變的圖像 :
PS.所有效果的使用方式，都是直接勾HTML格式建立。
Designed for IE.
仔細研究：參考微軟MSDN相關文章。
使用原裡：
什麼是濾鏡效果?
ANS:他只是一種CSS裡可用的濾鏡樣式(Style Sheet)而已。
Style Sheet 是什麼?
ANS:請參考DIV表格教學..
HTML該如何敘述？
無屬性：<標籤名稱>內容</標籤名稱>
單屬性：<標籤名稱 屬性名稱="值">內容</標籤名稱>
多屬性：<標籤名稱 屬性名稱1="值" 屬性名稱2="值">內容</標籤名稱>
依此類堆
＊重要的是:內容要被標籤名稱所包夾
＊標籤及屬性名稱和值 英文大小寫無差別
＊要設定多個屬性時，必須以空白來區隔
標籤名稱如
a ->超連結
img ->圖片
u ->底線
i ->斜線
font ->字型
b ->粗體
p ->段落
div ->段落
br ->斷行
......等都是
例如：
<IMG SRC="sample.gif"></IMG> -------->顯示圖片</IMG>可省略
<A HREF="網址">內容</A> ------->設定內容超連結位置</A>不能省略
＊如果不知道</標籤名稱>是否要省略，那就老實的加上去是不會有錯的。
Style Sheet 該如何敘述?
<標籤名稱 Style="樣式名稱:值 ;">內容</標籤名稱>
各種濾鏡樣式的詳細描述情形：
濾鏡的樣式名稱為 filter，
所以
套用在圖片上為<IMG Style="Filter:值 ;">
套用在DIV上為<DIV Style="Filter:值 ;width:濾鏡寬;height:濾鏡高" ><IMG></DIV>
為何使用DIV:因為上下邊界無空白，可以替代IMG，且某些濾鏡僅使用在DIV，多重效果要靠它。
但使用DIV時，必須設定寬度和高度。
＊要設定多個參數時，必須以半形的逗號","來區隔
＊圖寬與圖高只要在圖片上按右鍵內容可以得知
本範例使用原圖：(width:360px;height:270px;)
A.半透明合成：
HTML:
<img src="圖片" style="filter:Alpha(■)">
或
<div style="filter:Alpha(■) ;width:圖寬;height:圖高"><img src="圖片"></div>
■參數
opacity -->設定起始處的透明度
finishOpacity -->設定結束處的透明度
style -->0:均勻、1:線狀、2:圓形、3:長方形
範例:
HTML(Style為長方形):
<img src="http://myurl.com.tw/kdjd" style="filter:Alpha(opacity=100,finishOpacity=0,style=3)">
或
<div style="width:360px;height:270px;filter:Alpha(opacity=100,finishOpacity=0,style=3)">
<img src="http://myurl.com.tw/kdjd""></div>
結果:(style依序為1、2、3)
B.詼諧、Ｘ光效果、色彩對換(互補色)：
HTML:
詼諧:
<img src="圖片" style="filter:Gray">
或
<div style="filter:Gray ;width:圖寬;height:圖高"><img src="圖片"></div>
Ｘ光效果:
<img src="圖片" style="filter:Xray">
或
<div style="filter:Xray ;width:圖寬;height:圖高"><img src="圖片"></div>
色彩對換:
<img src="圖片" style="filter:Invert">
或
<div style="filter:Invert ;width:圖寬;height:圖高"><img src="圖片"></div>
■參數
無
範例:
HTML:
詼諧:
<img src="http://myurl.com.tw/kdjd" style="filter:Gray">
或
<div style="width:360px;height:270px;filter:Gray">
<img src="http://myurl.com.tw/kdjd""></div>
Ｘ光效果:
<img src="http://myurl.com.tw/kdjd" style="filter:Xray">
或
<div style="width:360px;height:270px;filter:Xray">
<img src="http://myurl.com.tw/kdjd""></div>
色彩對換:
<img src="http://myurl.com.tw/kdjd" style="filter:Invert">
或
<div style="width:360px;height:270px;filter:Invert">
<img src="http://myurl.com.tw/kdjd""></div>
結果:
詼諧:
Ｘ光效果:
色彩對換:
C.翻轉：
HTML:
左右翻轉:
<img src="圖片" style="filter:FlipH">
或
<div style="filter:FlipH ;width:圖寬;height:圖高"><img src="圖片"></div>
上下翻轉:
<img src="圖片" style="filter:FlipV">
或
<div style="filter:FlipV ;width:圖寬;height:圖高"><img src="圖片"></div>
■參數
無
範例(效果為左右翻轉):
HTML:
<img src="http://myurl.com.tw/kdjd" style="filter:FlipH">
或
<div style="width:360px;height:270px;filter:FlipH">
<img src="http://myurl.com.tw/kdjd""></div>
結果:
D.發光效果：
HTML:
<div style="filter:Glow(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>
■參數
color -->發光顏色
strength -->發光強度
濾鏡寬=圖寬+發光強度x2
濾鏡高=圖高+發光強度x2+10
範例:
HTML:
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
結果:
E.投射陰影效果：
HTML:
<div style="filter:Shadow(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>
■參數
color -->發光顏色
direction -->方向(45角度單位)(0、45、90、135、180、225、270、315)
濾鏡寬=略大於圖寬(建議:圖寬+24)
濾鏡高=略大於圖高(建議:圖高+24+10)
範例:
HTML:
<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
結果:
F.附陰影效果：
HTML:
<div style="filter:Dropshadow(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>
■參數
color -->發光顏色
offX -->水平位移(可正負)
offY -->垂直位移(可正負)
濾鏡寬=圖寬+水平位移絕對值+10
濾鏡高=圖高+垂直位移絕對值+10+10
範例:
HTML:
<DIV style="FILTER:Dropshadow(color=#333333,offX=5,offY=5); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
結果:
G.模糊效果：
HTML:
<div style="filter:Blur(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>
■參數
direction -->方向(45角度單位)(0、45、90、135、180、225、270、315)
濾鏡寬=略大於圖寬(建議:圖寬+15)
濾鏡高=略大於圖高(建議:圖高+15+10)
範例:
HTML:
<DIV style="FILTER: Blur(direction=135); WIDTH: 375px; HEIGHT: 295px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
結果:
H.波形效果：(ps.好複雜的參數設定@@")
HTML:
<div style="filter:Wave(■);width:濾鏡寬;height:濾鏡高" align=center><br><img src="圖片"></div>
■參數
freq -->頻率(0+)
strength -->振幅強度(0+)
lightstrength -->波峰強度(0~100)愈高越黑
phase -->起始相位(0~100)
濾鏡寬=圖寬+振幅強度x2
濾鏡高=圖高+振幅強度x2+10
範例:
HTML:
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><IMG src="http://myurl.com.tw/kdjd"></DIV>
結果:
與原圖比較:
多重效果範例(請自行領悟:p)：
HTML:(波形加上半透明合成)
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 384px; HEIGHT: 304px" align=center><br><img src="http://myurl.com.tw/kdjd" style="filter:Alpha(opacity=100,finishOpacity=0,style=2)"></DIV>
結果:
Step by Step 教學：
- 請先打開你的 編輯網誌內容
- 打開你的IE
在網址列輸入
http://spaces.msn.com/RteCode.aspx?mkt=zh-tw (台灣繁體中文版)
http://spaces.msn.com/RteCode.aspx?mkt=zh-cn (中國簡體中文版)
http://spaces.msn.com/RteCode.aspx?mkt=zh-hk (香港繁體中文版)
http://spaces.msn.com/RteCode.aspx?mkt=en-us (美國英文版)
http://spaces.msn.com/RteCode.aspx?mkt=ja-jp (日本語)
以下用(台灣繁體中文版)介紹
- 在IE下方處，把 [使用HTML格式建立網頁。] 打勾 進入HTML模式
- 輸入原理所介紹濾鏡把HTML輸入
- 把 [使用HTML格式建立網頁。] 取消打勾，變成原來的編輯模式，即能看到效果
- 接下注意喔....在編輯框框裡點一下 ，按 Ctrl+A (全選) 再按 Ctrl+C (複製)
就是全部給他複製拉...
- 回到 你的網誌 ，在框框裡點一下， 按 Ctrl+V (貼上) .....完成!!!!
- 謝謝你的觀賞.
- 多多練習....相信你也能做到
唷...
有任何問題一定要先到 
看看喔
도구 
還沒用過這些產生器嗎? 很好用喔~ 小綠人特別設計的喔~!
