網頁設計

關於網頁設計的技術或相關資訊分享

快速的幫圖片加邊框 : Instant相簿特效

instant相簿特效

如果想要幫圖片加上這樣的邊框特效有沒有什麼快速又簡單的方法呢?如果只是一張兩張圖片那用用繪圖軟體可以很快就搞定,可是如果今天...是想幫整個購物商城的圖片加上這樣的效果,一張一張圖片會讓人編輯到手軟吧!不用擔心!!今天要和各位介紹的這個Instant相簿特效,只要短短的幾秒鐘,敲敲鍵盤幫圖片加上class,就能快速的幫圖片們做出好看又花翹的特效唷!

使用效果:

原始圖片 加入Instant特效
網頁設計圖片特效原圖 Instant效果使用後

 

使用教學:

Step 1:載入js檔

請先到Instant的官方網站下載所需要的檔案:instant.zip,解壓縮之後裡面可以找到一個instant.js,將此js檔載入網頁內。

Step 2:幫圖片加上class

最基本的用法只要幫圖片加上class="instant"就可以完成了。

    <img src="/img檔路徑/image.gif" alt="" class="instant" />
  
原始圖片 加入Instant特效
網頁設計圖片特效原圖 Instant效果使用後

 

Step 3:加上更多class來產生更多元的效果

除了加入最基本的class="instant"之外,Instant特效還有許多可以設定的效果唷!使用的方法一樣是把img加入相對應的class就可以了。請參考一下列表

  • 初始 class "instant"
             <img src="/img檔路徑/image.gif" alt="" class="instant" />
             
  • 幫圖片加入陰影,並且可以用後面的數字來調整透明度:Shadow opacity class "ishadow" - min=0 max=100 default=33
         <img src="/img檔路徑/image.gif" alt="" class="instant ishadow50" />
         
    原始圖片 加入Instant特效ishadow
    網頁設計圖片特效原圖 Instant效果使用後
  • 使用class:icolor來調整邊框顏色 - min=000000 max=ffffff default=f0f4ff
         <img src="/img檔路徑/image.gif" alt="" class="instant icolorC3D2E5" />
         
    原始圖片 加入Instant特效icolor
    網頁設計圖片特效原圖 Instant效果使用後
  • 使用class:itiltleft 或 itiltnone 或 itiltright 來決定傾斜的方向。
         <img src="/img檔路徑/image.gif" alt="" class="instant itiltright" />
         
    原始圖片 加入Instant特效itiltright
    網頁設計圖片特效原圖 Instant效果使用後
  • 加入class:noshading來把圖片陰影取消。
         <img src="/img檔路徑/image.gif" alt="" class="instant noshading" />
         
    原始圖片 加入Instant特效noshading
    網頁設計圖片特效原圖 Instant效果使用後
  • 使用class:historical 可將邊框設為磨損風格。
         <img src="/img檔路徑/image.gif" alt="" class="instant historical" />
         
    原始圖片 加入Instant特效historical
    網頁設計圖片特效原圖 Instant效果使用後
  • 使用class:nocorner 來幫圖片邊框加上圓角。
         <img src="/img檔路徑/image.gif" alt="" class="instant nocorner" />
         
    原始圖片 加入Instant特效nocorner
    網頁設計圖片特效原圖 Instant效果使用後

相關連結:

Instant官方網站:http://www.netzgesta.de/instant/

Please enable the javascript to submit this form