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