[css filter]filter在界面实现滤镜效果
最近逛当当,发现当当尾品会的首页推荐最底端的商品链接是灰色的图片,然后鼠标hover之后就会变成正常的彩色
肯定不是通过img来改变的,然后直接看了一下源码,其实是用的filter属性 _(:з」∠)_又涨姿势了
然后在网上看了些东西,算是明白了一点了
filter属性:
不知道怎么回事W3S上找了一下,没找到
然后自己看了一下定义,其实就是滤镜
好像是CSS3中新添加的属性值,可以实现在前端界面对网页色度、亮度、灰度、模糊度等等的直接调节
具体使用方法就是 .class{
filter:(........); //......里面是filter的参数,不同参数的使用方法不一样
}
咳咳,李尼玛同学的聪明才智,直接在百度首页上添加的filter属性,然后截图如下:代码也就不写了
【反色】:就是黑色变白色,蓝色变红色之类的...
【色彩饱和度】
【灰度】这个是最常用的,像那种因为某些原因而要全网站灰色调,还有一些hover特效都是用这个属性做的
【亮度】
【透明度】
【影子 shadow】这个也比较常用 不过里面的参数比较多,各个参数也没太分清,应该就是控制影子宽度或者方向用的
【色相反转度】
嗯,就是这样,直接用属性更改变色度,虽然没有PS的直接效果好,但是通过简单的代码实现已经很赞了
最近在看些响应式布局的书,之前一直会写响应式,用metro或者是bootstrap,这回一看哦,原来是这么个原理,现在的感觉就是豁然开朗,感觉好爽,哈哈哈
OurEDA 李明夕
[css filter]filter在界面实现滤镜效果的更多相关文章
- css中filter:alpha透明度使用
css中filter:alpha透明度使用 使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示 ...
- CSS中filter滤镜学习笔记
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- CSS中filter滤镜的学习笔记
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- css 3 filter
css 3 filter image & PS effect https://api-platform.com#COMPANIES
- 用原生css实现高斯模糊、黑白等滤镜效果
—引导— 在CSS3中,有一个强大的属性,那就是filter属性,filter顾名思义就是“滤镜”的意思,用filter属性可以让图片无需PS处理就达到一些简单的显示效果. —定义和使用— filte ...
- 生成HFile文件后倒入数据出现Caused by: java.lang.ClassNotFoundException: org.apache.hadoop.hbase.filter.Filter
数据导入的时候出现: at java.lang.Class.getDeclaredMethods0(Native Method) at java.lang.Class.privateGetDeclar ...
- java.lang.IllegalStateException: Illegal access: this web application instance has been stopped already. Could not load [META-INF/services/com.alibaba.druid.filter.Filter].
九月 11, 2019 2:56:36 下午 org.apache.catalina.loader.WebappClassLoaderBase checkStateForResourceLoading ...
- 就没有我遇不到的报错!java.lang.NoClassDefFoundError: org/apache/hadoop/hbase/filter/Filter
本来准备用HBase的Bulkload将HDFS的HFile文件导入到HBase的myuser2表中,用的是yarn jar的命令 yarn jar /export/servers/hbase-1.2 ...
- CSS中filter属性的使用
filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊. 如果没有设定值 ...
随机推荐
- 用github pages展示你的静态网页,多项目支持
我看到有分享用github pages来做博客的,不过我并不想挂博客在上面,我只是想将我的一些作品挂上去,然后链接到我的简历里,这样HR可以直接看到. 首先是最基本的操作,在github上创建一个新的 ...
- Android开发-API指南-Android简介
Introduction to Android 英文原文:http://developer.android.com/intl/zh-cn/guide/index.html 采集日期:2014-4-16 ...
- 洛谷P1530 分数化小数 Fractions to Decimals
P1530 分数化小数 Fractions to Decimals 103通过 348提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交 讨论 题解 最新讨论 暂时没有讨论 题目 ...
- Android STL PORT
ndk中包含了stl对应的库,在$(NKD_HOME)/sources/cxx-stl/stlport/stlport 有关Android NDK的C++ STL开发相关总结如下: 从Android ...
- Android基础总结(5)——数据存储,持久化技术
瞬时数据:指那些存储在内存当中,有可能会因为程序广播或其他原因导致内存被回收而丢失的数据. 数据持久化:指将那些内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑关机的情况下,这些数据仍然不丢失. ...
- MySQL:MySQL和SQL Server的区别
导读:接下来的网上商城的项目,需要用到MySQL数据库了.这个对于我来说,是一个新接触的东西,按照惯例,在刚开始学习一个东西的时候,先从宏观上去了解它.本篇博客,先介绍SQL Server的基本内容, ...
- sass mapsource --->gulp
详细,请戳这里 1.安装插件 npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer 如果安装错误,请用sudo 权限: ...
- WWF3XOML方式创建和启动工作流 <第十篇>
一.XOML使用工作流的好处 通过Xoml方式使用工作流的好处在于,它能够不重新启动程序的情况下,仅仅通过配置xoml就能够实现改变工作流,非常灵活. 创建一个WinForm程序如下: 代码如下: n ...
- HTML你应该知道的三大基本元素
顶级.块级.内联,html元素的三大分类 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素. 1. Top-level ...
- WP8__从windowsphone app store 中根据app id获取应用的相关信息(下载网址及图片id等)
windows phone 官网应用商店地址 http://www.windowsphone.com/zh-cn/store/featured-apps------------------------ ...