遇見CSS3濾鏡

譯自：

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濾鏡

遇見CSS3濾鏡

遇見CSS3濾鏡

css3 濾鏡效果

相關推薦