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滤镜的更多相关文章
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- Filter Effects - 使用 CSS3 滤镜处理图片
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- 【CSS3】CSS3 滤镜实现
作者:^_^肥仔John 来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...
- CSS3 滤镜学习
html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合 ...
- CSS3 滤镜Filter亮度动画
CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...
- CSS3 滤镜
了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生,CSS3对各种滤镜效果有了支持,可以做出很多好玩儿效果,走马观花了解一下 语法 filter: function(param); 很很多CSS3 ...
随机推荐
- SQL Server 判断数据库是否存在,表是否存在
if DB_ID('testdb') is not null -- 如果这个数据库已经存在了 drop database testdb; create database testdb; if OBJE ...
- Oracle EBS-SQL (SYS-9):职责使用菜单.sql
select aa.menu_name, aa.user_menu_name, aa.type, aa.description, aa.ENTRY_SEQUENCE, ...
- java 多线程学习笔记
这篇文章主要是个人的学习笔记,是以例子来驱动的,加深自己对多线程的理解. 一:实现多线程的两种方法 1.继承Thread class MyThread1 extends Thread{ public ...
- 《Linux 设备驱动程序》读后感。 并发,竞态,死锁。
1. 概念 并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. 来源: 1. Linux ...
- 使用session插件并且实现登录验证
var express = require('express'); var cookieParser = require('cookie-parser'); var bodyParser = requ ...
- asp.net 向后台提交 html 代码段 包括 <> 标签
首先 在默认情况向标签类的东西是不会让你提交的 这是出于.net 的默认安全机制 我们要先在 <%@ page %> 里边加上 ValidateRequest="false&q ...
- md笔记——使用 @font-face 引入你喜欢的字体
使用 @font-face 引入你喜欢的字体 原理 CSS3的自定义字体@font-face 规则的工作原理 使用@font-face规则初看起来非常简单.从本质上看,它只需要两个步骤. 首先,使用 ...
- BZOJ 4199: [Noi2015]品酒大会( 后缀数组 + 并查集 )
求出后缀数组后, 对height排序, 从大到小来处理(r相似必定是0~r-1相似), 并查集维护. 复杂度O(NlogN + Nalpha(N)) ------------------------- ...
- BZOJ 2300: [HAOI2011]防线修建( 动态凸包 )
离线然后倒着做就变成了支持加点的动态凸包...用平衡树维护上凸壳...时间复杂度O(NlogN) --------------------------------------------------- ...
- 一周学会Mootools 1.4中文教程:(3)事件
今天我們講解一下mt的事件部分,对于事件的讲解主要包含三部分,分别是:绑定,移除,和触发,我们首先来看一个例子 //jquery的事件绑定方式$('a').click(function){ alert ...