到達 WebKit 中的 CSS 篩選器效果

背景

濾鏡效果先前已有一段時間,但我們設計成可在 SVG 中使用。這類特效非常強大,可以在圖片合成及算繪到文件中之前,對圖片套用色彩強度、彎曲或模糊效果等特效。

嗯,2009 年,Mozilla Mozilla 說 SVG 還不夠!最終套用了更進一步的濾鏡,並且讓 Firefox 3.5 瀏覽器能夠顯示 HTML 內容。請看看 Paul Ireland 上在 <video> 上播放的 SVG 濾鏡經典示範。同樣地,只有在 Firefox 才能正常運作,但蜂蜜依然可以。

今天

2011 年底以及 Adobe (以及其他網站) 向來會借助 Flash 的力量,向 CSS 供應商提供這項出色的技術。具體來說,我是指開始導入的 CSS 濾鏡效果 1.0

在 CSS 中直接啟用篩選器,幾乎任何 DOM 元素都能使用篩選器!圖片 (<video><canvas>) 完成命名。

CSS 篩選器效果示範。

未來

規格也會定義 CSS 著色器,最終會將 OpenGL 著色器技術帶入 CSS。真令人興奮!不過,每次開啟系統的 GPU 時都會有一些安全性考量。因此,WebKit 目前只實作 CSS 篩選器函式。

支援

Chrome 18.0.976.0 (目前為初期測試版本),Webkit 每晚

在 Webkit 夜間,可對硬體加速內容套用篩選器 ( 例如 img { -webkit-transform: translateZ(0); })。在 Chrome 中,我們仍在開發加速內容篩選器 (使用 --enable-accelerated-filters 旗標)。這包括預設加速的 <video>