CSS3 滤镜(Filter)使用小结

2019-06-01276次阅读css3

CSS3滤镜(filter)与我们经常说的IE滤镜是两码事,IE滤镜是指老版本的(4.0 到9.0)Windows IE浏览器支持一种非标准的 "filter" ,目前已经被现代浏览器弃用。

CSS3滤镜(filter)属性提供的图形特效,如灰度、透明度、模糊、阴影等。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 可以使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

Filter描述
none默认值,没有效果。
grayscale(%)将图像转换为灰度图像。值可以是百分比(0%-100%)或数值(0-1)。值为100%或1则完全转为灰度图像,值为0%或0则图像无变化。值在0%到100%之间,则是效果的线性乘子。默认值是0;
sepia(%)将图像转换为深褐色。值可以是百分比(0%-100%)或数值(0-1)。值为100%或1则完全是深褐色的,值为0%或0则图像无变化。值在0%到100%之间,则是效果的线性乘子。默认值是0;
saturate(%)转换图像饱和度。值可以是百分比(0%-100%)或数值(0-1)。值为0%或0则是完全不饱和,值为100%或1则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
opacity(%)转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
brightness(%)给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
contrast(%)调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
drop-shadow(h-shadow v-shadow blur spread color)给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下:
<offset-x> <offset-y> (必须)
这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果).
<blur-radius> (可选)
这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
<spread-radius> (可选)
这是第四个 <length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 
注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
<color> (可选)
查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。

延伸 渐进增强和优雅降级

渐进增强和优雅降级这两个概念是在CSS3出现之后火起来的。由于低级浏览器不支持 CSS3,但是CSS3特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同。

渐进增强(Progressive Enhancement)

一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级(Graceful Degradation)

一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用CSS3的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念,只是旧的概念换了一个新的说法。在传统软件开发中,经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本,向上兼容的很少。大多数软件都是向下兼容的,比如说Office2010能打开Office2007,Office2006,Office2005,Office2003等建的word文件,但是用Office2003就不能打开用Office2007,Office2010等建的word文件!

CSS3 滤镜(Filter)使用场景

设计师给到的是可领取和已领取两种状态按钮,后端程序跑过来说他那边没有已领取状态,只有不可点击状态,要改成下面这种需求

本着不给别人添麻烦,省得需要设计重新设计图。不妨用CSS3 滤镜(Filter)来实现灰度效果

html代码:

<span class="gift-btn disabled">领取</span>

css代码:

.gift-btn{
    display:block;
    width:170px;
    height:56px;
    line-height:56px;
    background:url(//static.2144.cn/huodong/act/grwhy/pc/images/t.png) no-repeat;
    text-shadow:1px 1px 2px rgba(0,0,0,.7),1px 1px 2px rgba(0,0,0,.7);
    color:#fff;
    font-size:24px;
    text-align:center;
    cursor:pointer;
}
.gift-btn.disabled{
    cursor:default;
    opacity:.5;
    filter:grayscale(1);
    filter:Alpha(opacity=50);
}
  1. opacity:.5;通过透明度来区别按钮状态;

  2. filter:grayscale(1);渐进增强-支持css3 Filter的浏览器

  3.  filter:Alpha(opacity=50);//优雅降级-利用老版本的 (4.0 到 9.0) Windows IE浏览器支持而现代浏览器已经弃用的一种非标准 "filter" ,实现透明度来区别按钮状态;

其它使用场景,例如下方的箭头:

CSS3滤镜(filter)实现文字融合动画

<div class="container">
  <h1>Blur word Animation</h1>
</div>
@import url(https://fonts.googleapis.com/css?family=Righteous);

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: black;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 2em;
    filter: contrast(20);
    background-color: black;
    overflow: hidden;
}

h1 {
    font-family: Righteous;
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 5s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
}

@keyframes letterspacing {
    0% {
        letter-spacing: -2.2rem;
        filter: blur(.3rem);
    }

    50% {
        filter: blur(.5rem);
    }

    100% {
        letter-spacing: .5rem;
        filter: blur(0rem);
        color: #fff;
    }
}

上一篇: CSS3中背景属性background-clip  下一篇: HTML页面百分比自适应浏览器小结  

CSS3 滤镜(Filter)使用小结相关文章