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

CSS FilterLab

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

圖 1. 在 CSS FilterLab 創(chuàng)建并應(yīng)用濾鏡。

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

入門

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

您可選擇應(yīng)用內(nèi)置濾鏡或自定義濾鏡：

內(nèi)置濾鏡是瀏覽器默認(rèn)自帶的濾鏡。 它們提供了基本的顏色特效，如灰階、深褐色、飽和度或?qū)Ρ榷取?/p>

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

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

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

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

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

創(chuàng)建特效動畫

特效不會自己發(fā)生。 它們會出現(xiàn)，從一種狀態(tài)轉(zhuǎn)換為另一種。 這樣它們才會富有表現(xiàn)力。

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

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

您可添加、在時間軸長度范圍內(nèi)拖放或刪除關(guān)鍵幀，調(diào)整動畫以獲得合適的效果。

可通過輸入內(nèi)容將動畫的持續(xù)時間更改到時間軸的右側(cè)。 它以秒為度量單位。

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

代碼語法

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

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

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

創(chuàng)建新的自定義濾鏡

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

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

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

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

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

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

共享和導(dǎo)入自定義濾鏡

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

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

開放源代碼

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

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

下一步閱讀方向

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

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

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

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

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