色相旋轉
曾經和photoshop色相/飽和度面板打過交道嗎？ 現在好了，你可以在瀏覽器中應用它。
img
如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。 您指定的度數值決定了該輪停止之處。 這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。
在這種情況下，nettuts +的標誌將採取ish藍光色調。
**演示
或者如果你希望影象不斷的改變顏色。 可能在真實專案中，色彩過渡會微妙得多，但這個演示中我們將簡單表示。
img
@-webkit-keyframes adjusthue
50%
100%
}
相當簡單。 檢視演示
灰度
我們過去曾經使用各種hack來在瀏覽器中實現從黑白色過渡為彩色影象。其中一種技術要求兩幅影象疊在彼此之上。 另一種選擇是使用canvas。 現在我們可以使用grayscale濾鏡。
img
當使用以百分比表示的grayscale函式時，自己可以考慮一下，「在0至100％之間「，我想要這個以多深的灰度來表示？
**演示
在和css3的transitions配合使用時，我們可以表現乙個非常乾淨漂亮的滑鼠懸停效果。
img
img:hover
將來你要提供其他瀏覽器的字首，但是現在沒有必要。 無需新增firefox的transitions，因為濾鏡目前僅webkit核心。
**演示
sepia-棕褐色
喜歡instagram sepia風格的濾鏡效果？讓我們看看nettuts+圖示的懷舊風格。
img
檢視演示
不過通常情況下這個效果將會用到**上。讓我們看看有史以來最偉大的藝術家在sepia濾鏡下的效果。
檢視演示
相當完美。
虛化
通過設定半徑我們可以輕鬆的在瀏覽器中虛化一張。
img
**演示
或將虛化半徑加大到50畫素。
**演示
亮度
我們使用brightness濾鏡來指定輸入影象呈現出的亮度。
img
**演示
將100％考慮成基準點。brightness(100%)保持原圖不變。 然而當我們降低這個百分比時，影象將不斷變暗。
「不要忘記：你可以把所有這些濾鏡疊加起來。」
img
**演示
對比度
現在我們可以很容易地調整影象的對比度。
img
**演示
再次將100%考慮成基準點。 我們可以通過增加或減少這個值來調整影象的對比度。 根據規範，設定為0%將會使影象全黑。你可能期望-webkit-filter: brightness(0%)有類似的效果，不過我看到的是更多的暗灰色。
img
**演示
現在我們將比例提高到2000%。
img
**演示
為了好玩，讓我們建立乙個nettuts +標誌跳動的矩陣版本。 我們將結合css3動畫和濾鏡。
img
@-webkit-keyframes bluepill
100%
}
**演示
反轉
mac使用者請按下control + option + command + 8 。請注意它是如何反轉螢幕顯示的（當然你可以注意到）。每當深夜當在電腦上閱讀，眼睛痠痛時我就採用這一招。
將invert濾鏡設定為100%，就可以達到相同的效果。
img
**演示
請注意，0％會保持原圖不變。
現在，從技術角度來說，你可以在**的body元素上應用這個濾鏡。 然而你會發現頁面顯示相當慢，並且無法上下滾動。 除非是為了娛樂，否則不要這樣做。
飽和度
除了設定grayscale(100%)之外，我們還可以將影象去飽和度來達到相似的效果。
在這種情況下，100％是不變的狀態，你可以增加或減少這個值。 因此，減少到0％將會從影象中刪除所有的顏色。
img
檢視演示
或者將值增大到700％：
遇見CSS3濾鏡
譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是，webkit已...
遇見CSS3濾鏡
譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是，webkit已...
遇見CSS3濾鏡
譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是，webkit已...