遇見CSS3濾鏡

2021-06-02 17:13:30 字數 4128 閱讀 8112

譯自:

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%)保持原圖不變。 然而當我們降低這個百分比時,影象將不斷變暗。

「不要忘記:你可以把所有這些濾鏡疊加起來。」

**演示

對比度

現在我們可以很容易地調整影象的對比度。

**演示

再次將100%考慮成基準點。 我們可以通過增加或減少這個值來調整影象的對比度。 根據規範,設定為0%將會使影象全黑。你可能期望-webkit-filter: brightness(0%)有類似的效果,不過我看到的是更多的暗灰色。

**演示

現在我們將比例提高到2000%。

**演示

為了好玩,讓我們建立乙個nettuts +標誌跳動的矩陣版本。 我們將結合css3動畫和濾鏡。

img   

@-webkit-keyframes bluepill

100%

}

**演示

反轉

mac使用者請按下control + option + command + 8 。請注意它是如何反轉螢幕顯示的(當然你可以注意到)。每當深夜當在電腦上閱讀,眼睛痠痛時我就採用這一招。

將invert濾鏡設定為100%,就可以達到相同的效果。

**演示

請注意,0%會保持原圖不變。

現在,從技術角度來說,你可以在**的body元素上應用這個濾鏡。 然而你會發現頁面顯示相當慢,並且無法上下滾動。 除非是為了娛樂,否則不要這樣做。

飽和度

除了設定grayscale(100%)之外,我們還可以將影象去飽和度來達到相似的效果。

在這種情況下,100%是不變的狀態,你可以增加或減少這個值。 因此,減少到0%將會從影象中刪除所有的顏色。

檢視演示

或者將值增大到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 的標誌將採...