今天在办公室亲眼目睹了同事使用CSS3滤镜为一张漂亮的照片轮廓加上了阴影,瞬间亮瞎了我的的双眼,见笑了。 
所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼。

已经等不及了,赶紧奉上今天的测试结果。

CSS3滤镜包括了以下几种:

只取其一,同时存在时,后边覆盖前边。

原图

第一种:图片灰度
-webkit-filter:grayscale(1);/*值为从0 – 1*/

第二种:褐色
-webkit-filter:sepia(1);/*值为从0 – 1*/

第三种:饱和度
-webkit-filter:saturate(3);/*值为从0 – +无穷*/

第四种:色相旋转
-webkit-filter:hue-rotate(-45deg);/*值为从-无穷 – +无穷*/

第五种:invert反色
-webkit-filter:invert(1);/*值为从0 – 1*/

第六种:opacity透明度
-webkit-filter:opacity(0.8);/*值为从0 – 1*/

第七种:brightness亮度
-webkit-filter:brightness(10);/*值为从0 – +无穷*/

第八种:contrast对比度
-webkit-filter:contrast(5);/*值为从0 – +无穷*/

第九种:blur模糊
-webkit-filter:blur(3px);/*值为从0 – +无穷*/

第十种:drop-shadow阴影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*随意配*/

据了解,目前这些属性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容统计表:
http://caniuse.com/#search=-webkit-filter

看到了这么多针对图片或者是针对标签层实现的滤镜效果,是不是有点小兴奋了呢?快快尝试一下吧。

如果想让图片的轮廓有阴影,那就对img使用webkit-filter。

最后,附上大家最为熟悉的IE滤镜参考资料作为对照,一起学习对比。
http://justcoding.iteye.com/blog/940184/

 

笔记作者:css3China

笔记链接:http://www.w3cfuns.com/blog-5443448-5400256.html

原创声明:此笔记被 css3China 标注为原创笔记,未经作者同意转载必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

CSS3滤镜的更多相关文章

  1. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  2. Filter Effects - 使用 CSS3 滤镜处理图片

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...

  3. tiltShift.js - CSS3 滤镜实现移轴镜头效果

    tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...

  4. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  5. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  6. 【CSS3】CSS3 滤镜实现

    作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...

  7. CSS3 滤镜学习

    html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合 ...

  8. CSS3 滤镜Filter亮度动画

    CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...

  9. CSS3 滤镜

    了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生,CSS3对各种滤镜效果有了支持,可以做出很多好玩儿效果,走马观花了解一下 语法 filter: function(param); 很很多CSS3 ...

随机推荐

  1. SQL Server 判断数据库是否存在,表是否存在

    if DB_ID('testdb') is not null -- 如果这个数据库已经存在了 drop database testdb; create database testdb; if OBJE ...

  2. Oracle EBS-SQL (SYS-9):职责使用菜单.sql

    select aa.menu_name, aa.user_menu_name, aa.type,                 aa.description, aa.ENTRY_SEQUENCE, ...

  3. java 多线程学习笔记

    这篇文章主要是个人的学习笔记,是以例子来驱动的,加深自己对多线程的理解. 一:实现多线程的两种方法 1.继承Thread class MyThread1 extends Thread{ public ...

  4. 《Linux 设备驱动程序》读后感。 并发,竞态,死锁。

    1. 概念 并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. 来源: 1. Linux ...

  5. 使用session插件并且实现登录验证

    var express = require('express'); var cookieParser = require('cookie-parser'); var bodyParser = requ ...

  6. asp.net 向后台提交 html 代码段 包括 <> 标签

    首先 在默认情况向标签类的东西是不会让你提交的 这是出于.net 的默认安全机制 我们要先在 <%@ page %> 里边加上  ValidateRequest="false&q ...

  7. md笔记——使用 @font-face 引入你喜欢的字体

    使用 @font-face 引入你喜欢的字体 原理 CSS3的自定义字体@font-face 规则的工作原理 使用@font-face规则初看起来非常简单.从本质上看,它只需要两个步骤. 首先,使用 ...

  8. BZOJ 4199: [Noi2015]品酒大会( 后缀数组 + 并查集 )

    求出后缀数组后, 对height排序, 从大到小来处理(r相似必定是0~r-1相似), 并查集维护. 复杂度O(NlogN + Nalpha(N)) ------------------------- ...

  9. BZOJ 2300: [HAOI2011]防线修建( 动态凸包 )

    离线然后倒着做就变成了支持加点的动态凸包...用平衡树维护上凸壳...时间复杂度O(NlogN) --------------------------------------------------- ...

  10. 一周学会Mootools 1.4中文教程:(3)事件

    今天我們講解一下mt的事件部分,对于事件的讲解主要包含三部分,分别是:绑定,移除,和触发,我们首先来看一个例子 //jquery的事件绑定方式$('a').click(function){ alert ...