|
這兩天有看到國外網(wǎng)站紛紛介紹-webkit-filter，開始很迷惑，丫是想要學IE嗎？今天看了下，和IE的濾鏡沒一毛關系啊，而且，效果很贊！
這些濾鏡效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，現(xiàn)在webkit率先支持了它。
現(xiàn)在規(guī)范中支持的效果有：
- grayscale 灰度
- sepia 褐色
- saturate 飽和度
- hue-rotate 色相旋轉
- invert 反色
- opacity 透明度
- brightness 亮度
- contrast 對比度
- blur 模糊
- drop-shadow 陰影
嗯，有些和CSS3重復了，不過，具體要怎么用還要看具體情況，至少我們可以用不同的方法實現(xiàn)同樣的效果——比如透明度。
用法是標準的CSS寫法：
-webkit-filter: blur(2px);
然后，Eric Bidelman寫了一個demo，可以很方便的查看各種效果。但是考慮到某網(wǎng)站因為不明原因在國內(nèi)無法訪問，我將該demo頁面簡單的翻譯了下，放到這邊給大家預覽，請猛擊查看。
請注意，改濾鏡目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下載一個最新的版本來體驗～～我用的是webkit nightly。
現(xiàn)在，讓我們看一下一些簡單的效果吧：
原圖
模糊
50%灰度
100%灰度
50%褐色
100%褐色
50%亮度
100%亮度
色相
反色
飽和度
對比度
嗯，我們在手機端的各種特效如lomo、日系等，也可以在頁面簡單實現(xiàn)一些了，配合css3內(nèi)陰影、遮罩、漸變等，相信不必instagram等差多少。
ps:sepia的翻譯貌似有點兒問題，求專業(yè)指點。
原文：http://www.qianduan.net/what-is-webkit-filter.html
本文鏈接：http://www.95time.cn/tech/web/2011/8718.asp 
出處：前端觀察
責任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
