CSS3实战开发:使用CSS3实现photoshop的过滤效果
2014-08-21 10:15
489 查看
我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性,我们使用CSS来给web图像添加相同的效果。
首先我们先在网页中显示一张图片,html代码如下:
此时运行效果图如下:
下面我给大家介绍相应特性,同时给各位演示应用图片过滤样式之后的效果图。
一、调整图像灰阶度:grayscale,范围为0%-100%。应用样式代码如下:
此时页面效果为:
二、给图片应用深褐色效果:sepia,范围0-100%语法代码如下:
此时运行页面效果:
三、调整图片曝光度:brightness,范围0%-100%,语法代码如下:
运行页面,效果如下:
四、调整图像对比度:contrast,语法代码如下:
页面效果如下:
最后给大家介绍一个模糊特效:blur,语法代码如下:
此时页面效果如下:
当然,上面的这些特性是可以同时使用的,比如,当鼠标划过图片时,将图片变成灰色的,且模糊图片,则代码如下:
此时页面效果为:
原来用CSS特性完成Photoshop的过滤功能是如此简单。
首先我们先在网页中显示一张图片,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实战开发: 纯CSS实现图片过滤分类显示特效
- 【Android】安卓开发实战之使用Fragment(碎片)实现底部导航栏效果
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
- iOS项目开发实战——使用CALayer实现图片的淡入淡出效果
- 使用Jquery,CSS3实现像GooglePlus那样的圆圈效果
- AE二次开发中,过滤后的图层,实现缩放至图层效果
- android游戏开发框架libgdx的使用(二十三)—使用Universal Tween Engine实现动画效果
- 使用简单的CSS3属性实现炫酷读者墙效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- AE二次开发中,过滤后的图层,实现缩放至图层效果
- 使用IE滤镜实现css3中rgba让背景色透明的效果
- 使用 CSS3 可以实现的五种很酷很炫的效果
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用CSS3线性渐变实现图片闪光划过效果
- android开发之滑动效果实现图片浏览_ViewFilpper的使用
- android游戏开发框架libgdx的使用(十八)—简单的AVG游戏效果实现
- 使用CSS3可以实现的五种很酷很炫的效果
- 使用html5+css3来实现slider切换效果告别javascript+css
- android游戏开发框架libgdx的使用(十八)—简单的AVG游戏效果实现