CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果
我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用CSS来给web图像添加相同的效果。
首先我们先在网页中显示一张图片,html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" media="screen">
<title>CSS3实战开发:使用CSS3实现photoshop的过滤效果</title>
</head>
<body> <img src="20140821.jpg" width="800" />
</body>
</html>
下面我给大家介绍相应特性，同时给各位演示应用图片过滤样式之后的效果图。
一、调整图像灰阶度：grayscale，范围为0%-100%。应用样式代码如下：
img {
-webkit-filter: grayscale(100%);
}
此时页面效果为：
二、给图片应用深褐色效果：sepia，范围0-100%语法代码如下：
img {
-webkit-filter: sepia(100%);
}
此时运行页面效果：
三、调整图片曝光度：brightness，范围0%-100%，语法代码如下:
img {
-webkit-filter: brightness(40%);
}
运行页面，效果如下：
四、调整图像对比度：contrast，语法代码如下：
img {
-webkit-filter: contrast(500%);
}
页面效果如下：
最后给大家介绍一个模糊特效：blur，语法代码如下：
img {
-webkit-filter: blur(2px);
}
此时页面效果如下：
当然，上面的这些特性是可以同时使用的，比如，当鼠标划过图片时，将图片变成灰色的，且模糊图片，则代码如下：
img:hover {
-webkit-filter:grayscale(100%) blur(2px);
}
此时页面效果为：
原来用CSS特性完成Photoshop的过滤功能是如此简单。
CSS3实战开发:使用CSS3实现photoshop的过滤效果的更多相关文章
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- CSS3实战开发: 折角效果实战开发
<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...
- CSS3实战手册(第3版)(影印版)
<CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
- HTML5+CSS3前端开发资源整合
HTML5+CSS3前端开发资源整合 推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...
- web 开发：CSS3 常用属性——速查手册！
web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
随机推荐
- rest-work-eat-study-rest-work-eat or rest-rest-work-work-eat-eat..
words are for your heart. tks for my dear family's ok. Listening more means not more talkive. 版权声明: ...
- 了解webpack
学习笔记 一步步了解webpack 前言 demo 地址: https://github.com/yy8597/webpack-demos 之前学习了 broswerify,发现确实很好用.虽然没 ...
- 理解Android虚拟机体系结构(转)
1 什么是Dalvik虚拟机 Dalvik是Google公司自己设计用于Android平台的Java虚拟机,它是Android平台的重要组成部分,支持dex格式(Dalvik Executable)的 ...
- JAVA多线程两个实用的辅助类(CountDownLatch和AtomicBoolean)
AtomicBoolean它允许一个线程等待一个线程完成任务,然后运行: A boolean value that may be updated atomically. See the java.ut ...
- NSIS：静默释放文件并运行 制作绿色单文件软件
原文 NSIS:静默释放文件并运行 制作绿色单文件软件 现在所谓的绿色单文件软件,大多与以下代码原理相似:把软件运行需要的文件封装为一个EXE文件,双击时释放到某个目录(大多是TEMP)并运行主程序文 ...
- Round #169 (Div. 2)D. Little Girl and Maximum XOR
1.首先是要找到一个位置从左至右,作l这一个是0,r这一个是1. 2.实例01011,10100.你将能够找到01111和10000. #include<cstdio> #include& ...
- （大数据工程师学习路径）第一步 Linux 基础入门----正则表达式基础
介绍 虽然我们这一节的标题是正则表达式,但实际这一节只是介绍grep,sed,awk这三个命令,而正则表达式作为这三个命令的一种使用方式(命令输出中可以包含正则表达式).正则表达式本身的内容很多,要把 ...
- Pro Aspnet MVC 4读书笔记(4) - Working with Razor
Listing 5-1. Creating a Simple Domain Model Class using System; using System.Collections.Generic; us ...
- HDU ACM 1068 最大独立集
意甲冠军:n同学.有些学生将有宿命的男性和女性成为恋人.收集注定要成为爱好者求学生的最大数目不存在. 分析:独立设置,顶点设定图的一个子集,在休闲2不连续: 二分图:最大独立集 = 顶点 - 匹配的最 ...
- 仿jQuery之链式调用
链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...