2011 年 10 月，Adobe 推出了 CSS Shaders 作為一種在 Web 中實現影片特效的方式。 通過 CSS，可將飽和度、灰度、減淡、折疊、卷曲，甚至溶解和爆炸等特效應用到常規 HTML 元素上。 此議案已得到了發展。 它已經過了開放討論、更新并合并到 CSS 濾鏡特效規范中。 現在它即將添加到您的瀏覽器上。 CSS Shaders 現在稱為 CSS Custom Filters，但這只是表達上的不同而已。

CSS FilterLab

CSS FilterLab 是一個基于瀏覽器的工具，可供您使用各種 CSS 濾鏡，調整它們，并實時查看特效（參見圖 1）。 您可使用該工具組合多個濾鏡并為它們創建動畫，從而營造豐富的影片特效。

圖 1. 在 CSS FilterLab 創建并應用濾鏡。

在編寫本文時，這確實是一種***技術，所以只有少數瀏覽器支持它。 所以在您的瀏覽器中打開 CSS FilterLab 時，會向您提示有關如何獲得***體驗的說明。 我們花了很多心血讓這些說明簡單易懂。

入門

CSS FilterLab 的入門很輕松。 在瀏覽器中打開它后，即可從 Add Filter 菜單添加濾鏡。

您可選擇應用內置濾鏡或自定義濾鏡：

內置濾鏡是瀏覽器默認自帶的濾鏡。 它們提供了基本的顏色特效，如灰階、深褐色、飽和度或對比度。

自定義濾鏡則將特效帶到了一個全新的高度。 一些已構建的示例包括減淡、卷曲、折疊、溶解和爆炸等特效。 自定義濾鏡不是瀏覽器自帶的；它們由開發人員自己編寫。 這些濾鏡使用各種著色器，著色器是支持對顏色和幾何體進行細粒度控制的小程序。 著色器會充分利用硬件加速功能，常常用在游戲的視覺特效中。 CSS 開發人員可能對它很陌生，而且一般需要具有扎實的數學知識才能開發著色器。

幸運的是，CSS FilterLab 附帶了一些具有基礎著色器的自定義濾鏡的優秀示例。 一個示例是 Fold，它為 HTML 元素提供了折紙 3D 效果（參見圖 2）。

圖 2. 在 CSS FilterLab 中應用到 HTML 元素的 Fold 自定義濾鏡。

已應用的濾鏡會公開其參數控件。 這讓您能夠非常輕松地調優各種參數，從而獲得自己想要的特效。 此外，可一起應用多個內置和/或自定義濾鏡來獲得令人震撼的效果。

對結果感到滿意后，可將更改保存為一個預設值。 這樣就能在以后重用該配置。

創建特效動畫

特效不會自己發生。 它們會出現，從一種狀態轉換為另一種。 這樣它們才會富有表現力。

CSS FilterLab 隨帶了一組基本的動畫控件，可幫助您在濾鏡參數值之間創建平滑的過渡。

請注意屏幕底部的時間軸和控件。 單擊時間軸上的任意位置，然后更改活動濾鏡的參數。 這將在時間軸上創建一個新的關鍵幀。 單擊播放按鈕查看動畫運行效果（參見圖 3）。

您可添加、在時間軸長度范圍內拖放或刪除關鍵幀，調整動畫以獲得合適的效果。

可通過輸入內容將動畫的持續時間更改到時間軸的右側。 它以秒為度量單位。

使用 CSS FilterLab 創建一個折疊動畫的快速演練。(0:19)

代碼語法

CSS FilterLab 支持創建豐富的視覺特效。 一定要知道，這是通過普通 CSS 完成的，盡管 CSS 非常先進。

在 Adobe，我們與合作伙伴付出了很大的心血將此技術提供給開放的網絡。 我們不會將它隱藏在一個工具的背后。

CSS FilterLab 顯示了用于實現特效或動畫的準確代碼。 時間軸上方的 CSS Syntax 和 CSS Animation Syntax 面板顯示了您期望看到的內容。 可將此代碼復制到您自己的項目中，以利用這些特效。 請記住，CSS 濾鏡剛剛開始應用到瀏覽器中。

創建新的自定義濾鏡

這是一個具有挑戰性的任務。 但是，如果您覺得復雜的數學運算和編寫著色器特別有吸引力，那么知道 CSS FilterLab 包含一個功能全面的著色器編輯器后一定會感到很開心（參見圖 4）。

要創建新的自定義濾鏡，首先從 Add Filter 菜單下提供的濾鏡中分支出一個現有的自定義濾鏡。 您會注意到，您分支出的濾鏡顯示在菜單的 Forked 選項卡中。 單擊“自定義”圖標，進入該自定義濾鏡的核心。

現在您可全面控制所用的參數、它們的類型，以及分段和頂點著色器源代碼。 您的更改會自動保存并存儲到瀏覽器本地。

使用 OpenGL Shading Language (GLSL) 編寫這些著色器。編寫著色器的內容不處于本簡介的范疇，但您可從 GLSL 文檔了解更多信息。 一定要查閱該語言的類型、方法和特性，讓您的著色器發揮***的作用。

圖 3. 錯誤面板突出顯示了問題。

錯誤面板實時地突出顯示了您的著色器代碼中的任何問題。 這確實很有用，因為它讓您在開發和預覽時停留在相同的上下文中。 您還會實時地看到著色器代碼的運行結果。

共享和導入自定義濾鏡

要共享自定義濾鏡，可將它們作為一條主旨（gist）從 CSS FilterLab 發布到 GitHub 上。 執行此操作的控件可在著色器編輯器面板中找到。

發布之后，將該鏈接與其他人共享。 他們就能將您的自定義濾鏡導入 CSS FilterLab 中并在他們自己的內容上使用它。 要導入一個自定義濾鏡，可轉到 Add Filter 菜單，選擇 Import 并使用這個主旨 URL。

開放源代碼

CSS FilterLab 的所有代碼都可在 GitHub 上根據 Apache License v2 免費獲得。 我們期待您的想法、反饋和對該項目的貢獻。

如果您編寫了希望通過 CSS FilterLab 分發的著色器，請將它們貢獻給該項目。 在簽入任何代碼之前，請花少許時間熟悉GitHub 上列出的貢獻指南。

下一步閱讀方向

CSS 濾鏡和自定義濾鏡為 Web 內容帶來了豐富的創意性特效。 CSS FilterLab 只是為存在的可能性拋磚引玉。 真正的價值掌握在您的手中以及您使用此技術創建的特效中。

請想想濾鏡、幾何體操作和影片特效可為您的工作帶來哪些全新的交流機會和表現力。 請想想這對您在大型屏幕、移動設備以及如此多新的上下文中表現各種內容的意義。

請使用 CSS FilterLab 了解現代圖形 Web 功能并與我們分享您的想法。 我們期待了解您使用它們創建的特效。

Adobe 的 Alan Greenblatt 創建了一個簡短的 CSS FilterLab 視頻演練。 如果您渴望了解更多信息，這是一個不錯的起點。

也可訪問html.adobe.com，進一步了解 Adobe 為了讓 Web 更加美好而做出的貢獻。