CSS過濾器產生器

CSS 過濾器產生器是 CSS 過濾器屬性的視覺化編輯器。您移動每個過濾器功能(模糊、亮度、對比度、飽和度、灰階、棕褐色、反轉、色調旋轉和不透明度)的滑桿,並即時觀看效果應用於預覽,然後複製其產生的精確 CSS。

過濾器屬性直接在瀏覽器中套用模糊、色彩移位和對比度調整等圖形效果,無需圖像編輯器。多個功能可以連結在一個聲明中並按順序應用,這就是照片風格外觀(例如復古、溫暖和戲劇性)的構建方式。此工具為您管理該鏈並僅輸出您更改的功能,從而保持 CSS 乾淨。

一切都發生在您的瀏覽器中。頁面在 Vintage 預設上開啟;選擇另一個預設,微調每個功能,然後複製聲明。沒有帳戶,沒有上傳,一旦頁面加載,它就會保持離線工作。

這是 CSS 濾波器產生器的溫暖照片外觀。點擊「溫暖」預設和「產生」CSS 讀取過濾器:亮度 (105%) 飽和度 (140%) 棕褐色 (25%);預覽轉向琥珀色。將模糊拖曳到 2px,線條變成過濾器:模糊 (2px) 亮度 (105%) 飽和度 (140%) 棕褐色 (25%);。按一下"無",或按"重置",然後返回過濾器:無;由於預覽是固定顏色樣本而不是您自己的照片,因此在發貨前檢查真實圖像上複製的 CSS。

過濾器按寫入的順序應用,順序會改變結果:灰階然後棕褐色與棕褐色然後灰階不同,因為第一個刪除了顏色,第二個刪除了顏色。值得知道的陷阱是結構性的,而不是視覺性的。任何具有過濾器(除了沒有過濾器)的元素都會成為其固定且絕對定位的後代的包含塊,因此過濾父級內部的下拉式或模態將將自己定位到該父級而不是視口。它還創建了一個新的堆疊上下文,可以打破以前有效的 z 指數排序。如果過濾器以看起來與外觀無關的方式破壞佈局,這幾乎總是原因。在大多數瀏覽器中,過濾器都是 GPU 加速的,但大型元件上的大模糊半徑仍然很昂貴。該工具始終以固定順序寫入函數,首先模糊,最後不透明,因此它不能在灰階之前產生棕褐色;如果您需要,請在複製後手動重新排序功能。