圖片套用濾鏡效果

Gene's profile≡ 能量魔法 ≡PhotosBlogListsMore

Tools

Help

< Previous Next >

圖片套用濾鏡效果

主旨：使用濾鏡樣式表來為圖片打上濾鏡...

　

      ☺圖片濾鏡產生器

                                                         現在先只有單一圖片部份而已....^_^

http://imagefilter.unet.cc/
　

濾鏡效果只會顯示在IE基礎瀏覽器。
本範例需要「使用HTML格式建立網頁」這個欄位
本篇需要有一定的HTML基礎，雖然本篇附一點教學，如果還是看不懂的，請到別的網站進修充電一下喔。
多多使用 Ctrl+A (全選) 再按 Ctrl+C (複製) 還有 Ctrl+V (貼上) 組合鍵..一定要會用...拜託.^^
還有 Ctrl+X (剪下) 有 Ctrl+Z (復原) 組合鍵可用.....
一些濾鏡可以直接或間接套用在文字效果上。

預覽各種圖片濾鏡效果(使用黑板DIV表格)：

94年３月８日

星期二

天氣
：晴 ☼

圖片套用濾鏡效果

能量教授：小綠人

原圖 :
<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:

■參數

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:

■參數

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:

■參數

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:

■參數

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:

■參數

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:

■參數

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 (貼上) .....完成!!!!
謝謝你的觀賞.

　
多多練習....相信你也能做到唷...

有任何問題一定要先到

看看喔

還沒用過這些產生器嗎? 很好用喔~ 小綠人特別設計的喔~!

照片框產生器、材質文字效果產生器、年度代表文字產生器、圖片濾鏡產生器、
網誌背景圖產生器、訂閱按鈕貼紙產生器、iJigg音樂嵌入語法修正器

March 08 7:50 AM | View trackbacks (128) | Blog it | 【Spaces 部落格美化教學】

Comments (151)

To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in

Don't have a Windows Live ID? Sign up

	No namewrote: http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 cell phones http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 cheap cell phones http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 wholesale cell phones http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 discount cell phones http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 cell phone china http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 cell phones wholesale http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 Mobile phones http://www.crazypurchase.com/cheap-cell-phones-wholesale-10 cellphone Oct. 12
	ann 杨wrote: 看上去还是很复杂的子！ Apr. 18
	gaogao tinawrote: 为什么我把http://spaces.live.com/RteCode.aspx?mkt=zh-tw输入地址栏显示暂时无法使用？？ Mar. 29
	feilwrote: 在这学到很多，非常非常的感谢！ Feb. 22
	再起狼烟wrote: 还是看不懂！ Dec. 20
	ping luwrote: xxxxxxxxx Dec. 7
	ʂİχμαη ωμwrote: 好棒！好漂亮的圖片！謝謝～ Nov. 24
	Chris Leewrote: fantastic Nov. 11
	Sarah Wangwrote: 非常有帮助谢谢 Aug. 2
	Baby's breath Gaowrote: 哇噻！！！好棒呀！！！学会了！！！好漂亮！！ June 20
	宜辰言wrote: 我給用了喔！︿︿謝謝的寶貴資料！！ June 17
	Aprilwrote: 谢谢鸟! 十分有趣! Mar. 27
	ღ｡小の豆♥豆ベღJoyceベღ 可愛滴wrote: 我学会了~~~~ 制作出的效果和photo shop的感觉很像 0~~~~ Feb. 25
	ღ｡小の豆♥豆ベღJoyceベღ 可愛滴wrote: 我学会了~~~~ 制作出的效果和photo shop的感觉很像 0~~~~ Feb. 25
	kang changwrote: 很详细，谢谢 Nov. 28
	呈吉洪wrote: 大开眼见阿。强啊。好好学习中。呵呵 Nov. 11
	轻风细语wrote: 背景图已经可以用滤镜制作，可是文字无法在画面上添加。请告知文字添加的代码。谢谢。 Nov. 8
	宝贝儿陈wrote: 暈..我學好久了都不會~!鳴鳴鳴鳴~~~ Nov. 4
	yepprainwrote: HAO Sept. 20
	yepprainwrote: HAO Sept. 20

Next > Last >>

Trackbacks (128)

The trackback URL for this entry is:

http://gene7299.spaces.live.com/blog/cns!D2C6AE79F031F1AC!758.trak

Weblogs that reference this entry