聯成電腦技術論壇

 找回密碼
 註冊
搜索

作品集系列:從哪裡找靈感

你要的履歷模板都在這

CakeResume幫你製作履歷

查看: 152|回復: 0

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

[複製鏈接]
發表於 2018-4-3 17:41:01 | 顯示全部樓層 |閱讀模式
文、菜鳥編


原文網址




自從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下拉陰影



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




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


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



小黑屋|Archiver|手機版|聯成電腦技術論壇  

GMT+8, 2018-7-18 01:37

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表