譯自：
jeffrey way於2023年12月22日
教程詳細內容 •
主題：css濾鏡 •
可用性：
webkit每晚構建的版本
• 酷炫程度：100
**演示
本月初公布了乙個新的規範-濾鏡效果1.0。 它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來建立photoshop般的效果。 更妙的是， webkit已經在每晚構建的版本中新增了支援！
根據此規範...
「濾鏡效果是乙個圖形化的操作，它被應用到乙個元素上以繪製到頁面文件裡。它是一種基於影象的效果，因為它接受零個或多個影象作為輸入，指定若干效果的具體引數，然後產生影象作為輸出。「
現在，至少在這一點上，我並不認為可以告訴你這些新濾鏡可能相關的一切。 我自己仍然還在學習中。 這就是說，我將向你展示我們如何在新的專案中使用一些新的濾鏡，然後希望我們可以集思廣益，相互學習和借鑑。現在讓我們開始吧。
色相旋轉
曾經和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+圖示的懷舊風格。
檢視演示
不過通常情況下這個效果將會用到**上。讓我們看看有史以來最偉大的藝術家在sepia濾鏡下的效果。
檢視演示
相當完美。
虛化
通過設定半徑我們可以輕鬆的在瀏覽器中虛化一張。
**演示
或將虛化半徑加大到50畫素。
**演示
亮度
我們使用brightness濾鏡來指定輸入影象呈現出的亮度。
**演示
將100％考慮成基準點。brightness(100%)保持原圖不變。 然而當我們降低這個百分比時，影象將不斷變暗。
「不要忘記：你可以把所有這些濾鏡疊加起來。」
**演示
對比度
現在我們可以很容易地調整影象的對比度。
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 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...