聯成電腦網頁設計教學：免P圖就有濾鏡效果

文、菜鳥編

自從CSS3帶來了許多網頁設計師期待已久的特性，在製作特效上就相當省時；如圓角、陰影、布局等，當然也包含了今天要介紹的濾鏡效果。CSS3 Filters濾鏡效果與photoshop的濾鏡功能相當類似。透過CSS Filters可直接對網頁元素進行渲染。不需再透過美工軟體另外將圖片做處理。

今天要介紹的filter.css，就是透過Filters屬性中的相關特效設定，組成了13種風格。可在應用的區塊中直接加入data數據屬性，快速的套用不同設定值。

進到頁面後，下方馬上就看到13種設定好的濾鏡效果。

點擊任一特效按鈕，下方會立刻呈現出套用後的濾鏡效果。

下方的編碼就是套用的設定值。當然，可以直接將編碼複製，直接套用到區塊中。

另一種方式，如一開始所提到的，使用data數據屬性來套用。這邊我們先點擊下方按鈕前往GitHub下載模組。

選擇下載壓縮檔

下方也說明了使用方法，其實相當簡單。

　　1. 將下載好的filter.css檔案放到你的專案資料夾內

　　2. 使用外部連結方式套用至你的網頁

　　3. 使用data-filter 來選擇你要套用的選項
　　例如下圖就是套用Eureka樣式

小編這邊也將13種樣式全部套用，方便你查看(可點擊圖片開啟網頁查看)。

既然教會你怎麼釣魚，當然也要讓你瞭解釣竿是怎麼製作的。打開filter.css檔案，就可以看到這13種效果的設定值。

CSS Filter濾鏡有十種特效，分別如下：

grayscale灰階
sepia懷舊
saturate飽和
hue-rotate色相旋轉
invert負片
opacity不透明
brightness亮度
contrast對比
blur模糊
drop-shadow下拉陰影

懂各項設定值的意思，你也可以自訂出屬於你自己的濾鏡效果來。

痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w