codecamp

CSS3滤镜

      用过Photoshop的对滤镜肯定不陌生,在CSS3中,对各种滤镜效果已经有了支持,可以做出很多效果。

语法

filter: function(param);

CSS滤镜支持的方法(function)有


grayscale 灰度

sepia 褐色

saturate 饱和度

hue-rotate 色相旋转

invert 反色

opacity 透明度

brightness 亮度

contrast 对比度

blur 模糊

drop-shadow 阴影

为了实现兼容性,当然少不了前缀-webkit-

-webkit-filter : function (param);


我们用一个清纯美女作为原图:



一、blur 模糊

-webkit-filter : blur(2px);

filter : blur(2px)


二、grayscale 灰度

-webkit-filter : grayscale(100%);

filter : grayscale(100%);


三、sepia 褐色

-webkit-filter : sepia(100%);

filter : sepia(100%);


四、saturate 饱和度

-webkit-filter : saturate(5);

filter : saturate(5)


五、hue-rotate  色相旋转

-webkit-filter : hue-rotate(180deg);

filter : hue-rotate(180deg)


六、invert 反色

-webkit-filter : invert(1);

filter : invert(1);


七、opacity 透明度

-webkit-filter :opacity(.5)

filter : opacity(.5)


八、brightness 亮度

-webkit-filter : brightness(3)

filter : brightness(3)


九、contrast  对比度

-webkit-filter : contrast(.5)

filter : contrast(.5)


十、drop-shadow  阴影

-webkit-filter : drop-shadow(10px 10px 5px #000);

filter : drop-shadow(10px 10px 5px #000);



css3 Gradient渐变
CSS3 Transform 2D和3D转换
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }