| プロフィールKEEKYOの第二空间站フォトブログリスト |  ツール  ヘルプ |
|
12月4日 图片技巧--圖片套用各式照片框主旨： 圖片套用 各式照片框
之前，Timi 的網誌裡有介紹 拍立得樣式的精緻照片框!!，這個最先出現在 Royboy Weblog 的 [這一篇]，但是很可惜的是，如果你直接套用裡面的語法將會發生空白的沒空白等不良效果，這是因為在MSN Spaces 裡不開放padding和margin的樣式(Style Sheet)，還有一個小問題，Royboy的語法在Firefox瀏覽下會發生右邊多餘空白，所以似乎有改良語法的必要，讓MSN Spaces和Firefox都能有最佳效果。
修改之後的HTML語法： <div style="width:Apx; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;">
<div style="border-width:10px 10px 20px 10px; border-style:solid; border-color:white; overflow:visible;"><div style="border:1px solid #999999;overflow:visible;"> <img src="圖片網址" width="Bpx"></div><div style="height:4px;overflow:hidden"></div><div style="font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">照片描述<br><b>照片日期<br>Photo by ???</b></div></div> </div></div> width:Apx; 是整個相片框的寬度 根據原作著的語法設定： 其他的(Style Sheet)CSS 參數設定的詳細情形，可以參考原著，或參考DIV表格語法教學.... 修改原理：
範例： HTML: <div style="width:232px; border-width:1px 2px 2px 1px; border-style:solid; border-color:black; background:white;">
<div style="border-width:10px 10px 20px 10px; border-style:solid; border-color:white; overflow:visible;"><div style="border:1px solid #999999;overflow:visible;"> <img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_0?1114600880.jpg" width="212px"></div><div style="height:4px;overflow:hidden"></div><div style="font:7pt/180% verdana;letter-spacing:1px;color:#999999;text-align:right">Taipei 101 大樓<br><b>2005/04/27<br>Photo by Gene</b></div></div> </div></div> 在MSN Spaces上顯示的結果:(Firefox也行喔) 複製起點→●  Taipei 101 2005/01/01 Photo by Gene ●←複製終點
也就是多一個DIV把它們包起來，文字則要擺在</div>之後，才有"文繞相框"的效果出現。
HTML語法： <div style="border:1px solid #999; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;width=100px;height:10px ;background:white;FONT-SIZE: 12px;color=#333333;font-family:verdana;" >
<div style="border:4px solid #FFFFFF; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;"> <img src="圖片網址" width="Cpx" height="Dpx"></div></div> width="Cpx" 是你想設定的圖寬
範例： HTML: <div style="border:1px solid #999; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;width=100px;height:10px ;background:white;FONT-SIZE: 12px;color=#333333;font-family:verdana;" >
<div style="border:4px solid #FFFFFF; LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;"> <img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div> 在MSN Spaces上顯示的結果:(Firefox也行喔,但要設定絕對寬高) 複製起點→●  ●←複製終點
一些人常常使用PhotoShop等軟體為相片製作陰影效果，現在當沒有其他繪圖工具輔助的時候也可以模擬此效果喔。 在國外網站有人為此想出辦法 [連結一] [連結二] [連結三] 簡單說就是使用CSS和一些陰影圖片來模擬 引用網站其中一張原理圖 就是把一張陰影圖放在圖片的下面去做重疊....
但也是很可惜，這裡面所介紹的語法也不適用在MSN Spaces 所以只能修改語法，來得到最為相近的效果。 修改之後的HTML語法： <div style="width=Apx;height:Bpx ;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;;background:white;"> <div style="border:4px solid #FFFFFF;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;"> <img src="圖片網址" width="Cpx" height="Dpx"></div></div> <div style="float:left;overflow:hidden;width=6px;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_3?1114600520.png" width="6" height="6"><br><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_1?1114600520.png" width="6px" height="Epx"></div> </div> <div style="width=Apx;height:6px ;"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_2?1114600520.png" width="6" height="6"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_0?1114600520.png" width="Fpx" height="6"></div> </div> width:Apx; 是整個相片框的寬度(有2個) A=C+16 height="Epx" 是右邊陰影的高度 E=C+10 會有那麼多的設定，主因是MSN Spaces不開放一些CSS所致。
範例： HTML: <div style="width=416px;height:310px ;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible;;background:white;"> <div style="border:4px solid #FFFFFF;LETTER-SPACING: 2px;LINE-HEIGHT: 20px;overflow:visible; background:white;"> <img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div> <div style="float:left;overflow:hidden;width=6px;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_3?1114600520.png" width="6" height="6"><br><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_1?1114600520.png" width="6px" height="304px"></div> </div> <div style="width=416px;height:6px ;"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_2?1114600520.png" width="6" height="6"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_8_0?1114600520.png" width="409px" height="6"></div> </div> 在MSN Spaces上顯示的結果:(Firefox也行喔) 複製起點→●   ●←複製終點 原圖:
HTML語法： <div style="overflow:visible;FILTER:Dropshadow(color=#cccccc,offX=4,offY=4);width=Apx;height:Bpx;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px ;background:white;"> <div style="border:4px solid #FFFFFF;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px; background:white;"> <img src="圖片網址" width="Cpx" height="Dpx"></div> </div></div> width:Apx; 是整個相片框的寬度 A=C+15
當然使用濾鏡的話目前是不適用在Firefox的.. 範例： HTML: <div style="overflow:visible;FILTER:Dropshadow(color=#cccccc,offX=4,offY=4);width=415px;height:315px;">
<div style="border:1px solid #999; float:left;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px ;background:white;"> <div style="border:4px solid #FFFFFF;LETTER-SPACING: 4px;LINE-HEIGHT: 4px;overflow:visible;width=10px;height:10px; background:white;"> <img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"></div></div> </div> 在MSN Spaces上顯示的結果: 複製起點→● ●←複製終點
逛逛 Royboy Weblog 又看到 [這一篇]，有提到使用背景圖的方式來與模擬陰影 (原作著是cassidy) 本來是使用圖片套用背景圖的樣式(讓圖重疊)....如下....但是MSN Spaces就是不支援正統的背景圖 所以沒辦法直接使用此語法。 <img src="照片框圖片" style="background:url(主要照片) no-repeat"> 當然要套用此法....就得使用 MSN Spaces 加上背景圖的特殊語法 去做模擬。 故.....Firefox 不支援..... 那把 照片框圖片(中間當然要透明的喔) 畫成這樣就能模擬陰影圖片哩(多虧Royboy想出來)
修改後HTML語法： <div style="width:Cpx;height:Dpx;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_0?1114691307.gif" width="2%" align=right><img src="圖片網址" width=100% height=98% align=right> <div style="float:left;overflow:visible;width=100%;height:100%;"> <img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_1?1114691307.gif" width="100%" height="100%"></div></div> </div> width="Cpx" 是你想設定的圖寬
範例： HTML: <div style="width:400px;height:300px;">
<img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_0?1114691307.gif" width="2%" align=right><img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width=100% height=98% align=right> <div style="float:left;overflow:visible;width=100%;height:100%;"> <img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_10_1?1114691307.gif" width="100%" height="100%"></div></div> </div> 在MSN Spaces上顯示的結果: 複製起點→● 
 ●←複製終點
在Fotki網站看到很不錯的樣式(照片四周加上陰影)，原語法也不適用在MSN Spaces 所以來修改修改語法。 修改之後的HTML語法： <div style="width=A;height:B ;">
<div style="width=A;height:13 ;overflow:visible;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_2?1114739383.gif" width="12" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_6?1114739383.gif" width="C" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_7?1114739383.gif" width="15" height="13"></div> <div style="width=A;height:D ;overflow:visible;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_5?1114739383.gif" width="12" height="D"><img src="圖片網址" width="C" height="D"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_0?1114739383.gif" width="15" height="D"></div> <div style="width=A;height:15 ;overflow:visible;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_3?1114739383.gif" width="12" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_1?1114739383.gif" width="C" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_4?1114739383.gif" width="15" height="15"></div> </div> width:A; 是整個相片框的寬度 A=C+27
範例： HTML: <div style="width=427;height:328 ;">
<div style="width=427;height:13 ;overflow:visible;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_2?1114739383.gif" width="12" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_6?1114739383.gif" width="400" height="13"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_7?1114739383.gif" width="15" height="13"></div> <div style="width=427;height:300 ;overflow:visible;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_5?1114739383.gif" width="12" height="300"><img src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_9_1?1114600880.jpg" width="400px" height="300px"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_0?1114739383.gif" width="15" height="300"></div> <div style="width=427;height:15 ;overflow:visible;"> <img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_3?1114739383.gif" width="12" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_1?1114739383.gif" width="400" height="15"><img border="0" src="http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_11_4?1114739383.gif" width="15" height="15"></div> </div> 在MSN Spaces上顯示的結果:(Firefox也行喔) 複製起點→●         ●←複製終點 トラックバックこの記事のトラックバックの URL は次のとおりです。 http://lavielee.spaces.live.com/blog/cns!B6BC2C95FD28881C!121.trak この記事を参照しているブログ
|
1.拍立得樣式精緻照片框： 
|
|
