CSS3 Filter滤镜效果
关注到它是在一次分享会当中,很神奇,只需写一行代码就可以变身很美的视觉效果,这就是CSS3滤镜。
语法
filter:fuction(param);
如今浏览器支持情况相比以前乐观很多,点击查看兼容
方法
1.blur模糊
2.brightness亮度
3.contrast对比度
4.grayscale灰度
5.hue-rotate色相旋转
6.invert反色
7.opacity透明度
8.saturate饱和度
9.sepia褐色
10.drop-shadow阴影
效果(非截图)
比较喜欢的三种滤镜
CSS3 Filter滤镜效果的更多相关文章
- CSS3 filter 模糊滤镜的应用
CSS3 filter 模糊滤镜的应用 在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...
- CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...
- CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的
CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...
- [转]CSS3 Filter的十种特效
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
- CSS3 Filter特效
CSS3 filter和IE的filter完全是两样东东. Filters主要是运用在图片上,以实现一些特效.(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用. 语法 elm { ...
- 巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
- filter滤镜效果(css3属性)
<!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...
- css3 filter属性在项目中的应用
css3 属性filter应用在项目里. 语法: <filter>: 要使用的滤镜效果.多个滤镜之间用空格隔开. 设置或检索对象所应用的滤镜效果. 最常用的滤镜效果是不透明效果,如果要实现 ...
- 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
随机推荐
- 联想E430Cwindow8系统换成win7
垃圾win8系统各种不习惯,尤其无线网络老是自己断掉,忍无可忍只能换成win7,之前换过一次,没有成功,记得是提示硬盘模式要由GPT换成MBR. 这次换系统采用了PE里直接分区,格式化所有数据,然后g ...
- 弃用个人博客站重返CSDN缘由
最近悄然关闭了自己的个人博客小站,重新返回了CSDN写博客.恰逢周末,闲暇尚有,敲击键盘记录一下. 其实最初关闭个人基于SAE的个人博客站是一周前开始的,想想自己的博客已经有两周年多的时间了,刚刚创建 ...
- java中的public,protected,private权限修饰
public和private基本没问题,主要是默认的和protected之间的区别 同一包中默认的和protected一样,所以来看看不同包的情况 看下如下代码,两个类位于不同包: public cl ...
- CoreCLR文档翻译 - GC的设计
此文档来源于CoreCLR的BOTR(The Book of the Runtime), 点击打开原文 一切著作权归微软公司所有 GC的设计 作者: Maoni Stephens (@maoni0) ...
- [ios2]ASIHTTPReques 清除所有持久连接
http://www.winddisk.com/2012/08/27/iphone_screenlock_network_disconnection/ + (void)clearPersistentC ...
- 如何安装并使用bower包依赖工具
什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和 ...
- javascript:;”是什么意思
就是 执行一段 空白JAVASCRIPT语句 并且返回的也是空或者false值..把 javascript:; 加在超级链接上 就可以防止 链接跳转..从而 可以给 链接的 onclick 方法上 写 ...
- 【CSS学习笔记】背景图片
直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...
- IOS之frame和bounds区别
用最简单的语言来解释就是:setFrame和setBounds都是为了把子view加载到父view上去,但设置的参数坐标系不同,setFrame是该view在父view坐标系统中的位置和大小,setB ...
- Leetcode-34-Search Insert Position-(Medium)
二分法查找需要插入的位置,需要注意两点 1.如果元素不存在,停止的时候start Index刚好是需要插入的位置 2.如果元素存在,需要向前追溯找到非目标元素的起始边界 #!/usr/local/bi ...