2008/01/28

為文章中圖片製作動態框線效果




圖文並茂的文章通常能有加分效果, 如果再配個動態框線, 就更能讓圖片出色了!這個動態框線及濾鏡效果, 是只有滑鼠移到文章中的圖片上方時, 才會發生. 只需要一段CSS程式碼, 就可以套用所有文章內的圖片.




做了幾種效果的截圖如下, 並附上相對應的程式碼.(不過在IE及Firefox下的瀏覽效果仍有些不同)

在 blogger/blogspot 的範本-->修改HTML, 在<b:skin><![CDATA[]]></b:skin> 之間, 加入或修改成以下程式碼.(小提醒: 由於我也加入了框線設定, 如果要觀賞效果, 滑鼠先不要移到圖片上方, 否則會被我的設定干擾, 反而更看不清楚哦!)

如果不是blogger使用者, 也可參考 { } 內的程式碼. 其中border(框線厚度),border background 的顏色都可以自訂.如果不需要濾鏡效果 filteropacity, 可以移除.

1. dotted 後的效果
.post img:hover {
border:1px dotted #838b8b ;
background:#838b8b ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



2. dashed
.post img:hover {
border:1px dashed #838b8b ;
background:#838b8b ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



3.dashed 及框線加粗
.post img:hover {
border:2px dashed #8b864e ;
background:#8b864e ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



4.outset及框線加粗
.post img:hover {
border:2px outset #607b8b ;
background:#607b8b ;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}



相關文章 :

12 comments:

Nekki 提到...

相當棒的功能,感謝分享
來去試試看~

skyvee 提到...

nekki, 也謝謝你的留言, 有問題歡迎提出一起討論.

小胖 提到...

很實用的功能耶!!
學起來~~ 謝謝啦~~

Skyvee 提到...

小胖, 很高興你也喜歡,新年快樂! ^^

tzuche 提到...

skyvee 大大您好,您介紹的功能都很實用。想再請問你一個問題,如何才能作一個像您提供的部落格聯播功能呢,就是那個架設在googlepages上的聯播網頁。謝謝。

tzuche

Skyvee 提到...

tzuche, 部落格聯播, 可以參考這篇文章 用Google Reader 製做部落格聯播(blog roll)哦! ^^

aglocobbcm5225 提到...

本人來到這網站,見到好多關於blooger 的語法,令我大看眼界,唔知你是點樣學識的
小弟亦好想學,因小弟的網站十分寧亂,想整理
http://sexygirlphotos.blogspot.com/
未知網主能否比些意見我,可以用貴板的什麼資源來整理
我的e mail 係bkpk762003@yahoo.com.hk
希望得到你的回覆
預祝你新年快樂

skyvee 提到...

aglocobbcm,

你好, 如果想修改 blogger的版型, 可以參考以下連結, 這是我針對blogger改版的教學文章. 如果有任何問題再同我說囉!

http://skyvee.blogspot.com/search/label/blogger%20tips

8632271 提到...

很不錯的功能,若能再美化點就更好囉!感謝喔

Skyvee 提到...

:) 效果部分,可以自行再調整囉!

匿名 提到...

效果好像不見了耶@@?點圖片都沒有任何變化~是不是程式碼不能用了??

skyvee 提到...

有啊, 點一下, 顏色會變淡, 框線會出現

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.