CSS webkit filter

由於我自己是多媒體專長的背景,「filter」 ( 濾鏡 ) 這個詞基本上是陪伴我成長的一個重要技術 ( 或工具 ),不管是在影像處理還是向量繪圖,甚至是影片剪輯、聲音處理都會需要使用到濾鏡,但很可惜的在網站設計裡,卻沒有如同 photoshop 一般的濾鏡可以輕鬆使用,一張圖如果需要一些特效 ( 例如模糊、黑白、高對比...等 ),往往必須直接再重製一張圖來使用,雖然對我自己來說重做一張圖應該不用花到一分鐘,但對於許多不會影像處理的人而言,簡直就是另外一門學問了。

某一天我發現了 webkit filter 這個超級好用的技術,雖然很可惜的一直到寫這篇文章的今天它都還只支援 webkit 核心的 chrome 或 safari 瀏覽器,但我自己倒是很期待 webkit filter 的未來,雖然我這篇文章其實在 2012 年我已經寫過一次啦!( 舊的 blog )

下面的預覽圖都是直接使用 webkit filter 做出來的,如果看到的圖都長一樣,就表示你的瀏覽器不支援,請更換成 chrome 或 safari 吧!

-webkit-filter: blur(3px)

-webkit-filter: grayscale(0.9)

-webkit-filter: drop-shadow(5px 5px 10px #000)

-webkit-filter: sepia(0.7)

-webkit-filter: brightness(0.5)

-webkit-filter: brightness(-0.5)

-webkit-filter: contrast(3)

-webkit-filter: contrast(0.3)

-webkit-filter: hue-rotate(90deg)

-webkit-filter: invert(1)

-webkit-filter: saturate(5)

-webkit-filter: opacity(0.5)

有興趣瞧瞧其他新文章嗎?