|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。
破洛洛文章简介:-webkit-filter是神马?
这两天有看到外洋网站纷繁先容-webkit-filter,入手下手很利诱,丫是想要学IE吗?明天看了下,和IE的滤镜没一毛干系啊,并且,效果很赞!
这些滤镜效果最后是用于SVG的,W3C引进到CSS中,然后制订了CSSFilterEffects1.0,如今webkit领先撑持了它。
如今标准中撑持的效果有:
- grayscale灰度
- sepia褐色
- saturate饱和度
- hue-rotate色相扭转
- invert反色
- opacity通明度
- brightness亮度
- contrast对照度
- blur含混
- drop-shadow暗影
嗯,有些和CSS3反复了,不外,详细要怎样用还要看详细情形,最少我们能够用分歧的办法完成一样的效果——好比通明度。
用法是尺度的CSS写法:- -webkit-filter:blur(2px);
复制代码 然后,EricBidelman写了一个demo,能够很便利的检察各类效果。可是思索到某网站由于不明缘故原由在国际没法会见,我将该demo页面复杂的翻译了下,放到这边给人人预览,请猛击检察。
请注重,改滤镜今朝只要最新的webkitnightly版本和Chrome18.0.976以上版本才撑持,以是你必要下载一个最新的版原本体验~~我用的是webkitnightly。
如今,让我们看一下一些复杂的效果吧:
原始图片
含混
50%灰度
100%灰度
50%褐色
100%褐色
50%亮度
100%亮度
色相
反色
饱和度
对照度
嗯,我们在手机真个各类殊效如lomo、日系等,也能够在页面复杂完成一些了,共同css3内暗影、遮罩、突变等,信任不用instagram等差几。
ps:sepia的翻译貌似有点儿成绩,求专业指导。
</p>
最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。 |
|