讓圖片自動加上美麗的外框

一般的圖片都是四四方方的,有點死板的感覺,可是手邊沒有繪圖軟體(Photoshop, Photoimpact)或者看圖軟體的時候,該如何將圖片把他變得美美的呢?

Glossy.js 是個小小的 javascript ,只要將他置入網頁中,在給予圖片一個 class 來使用,圖片就會出現精美的外框。

以下是範例效果:

原圖片
16460740 16460704

套入 class 之後
16460740 16460704

再來一張 XD 這張是圓角不同的
PICT2702

這作法很簡單,只要將 glossy.js 加到 header.php 裡頭,加入下列代碼


其他的控制外框的方法可以參考內附的說明,裡面也附有 index.htm 可以執行起來看效果及說明。目前 Glossy.js 支援 Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. 當然官網也提到如果是使用更舊版本的瀏覽器,最好還是更新到新版吧。至於 js 的部份,檔案大小約 15k 如果怕讀取太久,可以考慮把 js 丟到 hinet 或者 google page @_@因為速度快,嘿嘿。

前往官網

本站不提供下載,請前往官網下載。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *