Tagged

filter

A collection of 3 posts

filter

关于IE中CSS-filter滤镜小知识

前言 前段时间在做一个专题的时候用到了opacity不透明度属性,因为设计图上是半透明背景,白色文字 所以在IE用到了其支持的filter属性,听说这个属性还有不同的效果,不单单就只有不透明度而已,所以抽个时间赶紧来充下电。 有时候我们很习惯的用到不透明属性opacity来增加层次感或者增加用户体验,但因这个属性是css3属性,所以对于低级浏览器的兼容性来说就达不到我们预期的效果。一般而言,我们都尽可能少用一些浏览私有属性-webkit,-moz,-ms,-o,这也仅仅解决了市面上很多浏览器的问题,面对IE,特别是IE9-版本的,也是显得有气无力。因此假如要使得市面上的浏览器达到统一的近类似效果,那么是非常有必要写上IE私有属性,触发IE hasLayout 特性,比如这样: .opacity{ opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*IE6~IE8*/ } OK,这样的代码可以基本兼容目前市面上的浏览器。今天我们的重点是后面这个 filter 属性 filter历史 其实这个filter是CSS1的属性了,但是因为老版本的IE4.0~IE9对此支持不怎么感冒,对浏览器的支持也不稳定,

box-shadow

是时候使用filter:drop-shadow了

前些天在做一个项目的时候,用到了阴影,阴影是个方向都有的,于是写了一大坨box-shadow来实现,然后今天看到bricss说到filter:drop-shadow,豁然开朗。 具体的实现不用不细讲了,直接看代码: box-shadow方案: .box-shadow { box-shadow: rgba(0,0,0,.5) 0 1px 5px; } drop-shadow滤镜方案: .filter-drop-shadow { -webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5)); -moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5)); -ms-filter: drop-shadow(0 1px 5px rgba(0,0,

Chrome

-webkit-filter是神马?

这两天有看到国外网站纷纷介绍-webkit-filter,开始很迷惑,丫是想要学IE吗?今天看了下,和IE的滤镜没一毛关系啊,而且,效果很赞! 这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它。 现在规范中支持的效果有: grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shadow 阴影 嗯,有些和CSS3重复了,不过,具体要怎么用还要看具体情况,至少我们可以用不同的方法实现同样的效果——比如透明度。 用法是标准的CSS写法: -webkit-filter: blur(2px); 然后,Eric Bidelman写了一个demo,可以很方便的查看各种效果。