berylgobby 發表於 2018-4-3 17:41:01

網頁設計:免P圖就有濾鏡效果

文、菜鳥編
https://www.lccnet.com.tw/lccnet/Upload/Article/news-1188.jpg

原文網址




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

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

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

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504268.png



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

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504285.png



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

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504302.png



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

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504314.png



選擇下載壓縮檔

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504329.png



下方也說明了使用方法,其實相當簡單。
  1. 將下載好的filter.css檔案放到你的專案資料夾內
  2. 使用外部連結方式套用至你的網頁
  3. 使用data-filter 來選擇你要套用的選項
  例如下圖就是套用Eureka樣式

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504350.png



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

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504435.png



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

https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1522504485.png



CSS Filter濾鏡有十種特效,分別如下:
grayscale灰階
sepia懷舊
saturate飽和
hue-rotate色相旋轉
invert負片
opacity不透明
brightness亮度
contrast對比
blur模糊
drop-shadow下拉陰影


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




官方網站:https://lccnet.com.tw
痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w


頁: [1]
查看完整版本: 網頁設計:免P圖就有濾鏡效果