css3的过滤效果
上面的图片就是css3新特性的滤镜效果,学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~
好,咱们先把照片后面的白框实现,
<style>
#div1{
/*给div定义宽高和颜色*/
width: 200px;
height: 250px;
background: white;
/* 内填充距离照片为15px ,文字居中*/
padding: 15px;
text-align: center;
/* 把白色背景旋转-10deg */
-webkit-transform: rotate(-10deg);
/*给背景一个阴影的效果*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style>
<body>
<div id="div1">
<img src="img/001V28Mwty6Fww02IiNad&690.jpg">
<p>灰色滤镜</p>
</div>
</body>
把白色的背景框写好之后,接下来就该到滤镜了
首先来第一张,艺术的黑白色
#div1 img{ /*把div1里面的图片百分百,等同于相对于在div1里面百分比放大填充*/
width: %;
/*把图片变成黑白色括号里跟颜色变化的值,只能取0~1之间*/
-webkit-filter: grayscale(); }
第二张照片,额...老照片.
#div1 img{
width: %;
-webkit-filter: sepia();
}
第三张照片,反色?我也不太清楚啥颜色
#div1 img{
width: %;
-webkit-filter: hue-rotate(200deg);
}
第四张照片,仿佛罩了一层白雾
#div1 img{
width: %;
-webkit-filter: opacity(0.5);
}
还有一张照片的效果图上没有,是模糊效果代码如下
#div4 img{
width: %;
-webkit-filter: opacity(0.5);
}
好了,我的滤镜分享完毕,接下来美图去了
css3的过滤效果的更多相关文章
- css3图片过滤效果
在线演示 本地下载
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
随机推荐
- js中call、apply、bind的区别
var Person = { name : 'alice', say : function(txt1,txt2) { console.info(txt1+txt2); console.info(thi ...
- top问题
1. 从10万个数中找10个最大的数 对于这种题目,最普通的想法是先对这10万个数进行排序,然后再选取数组中前10个数,即为最后的答案,排序算法的时间复杂度不下于O(N lgN).最好的方法是建立一个 ...
- idea整合eclipse后快捷键
- Linux简单的进度条
echo '进度条' i= bar="" ] do let idx=i% printf "[%-100s][%d%%]\r" "$bar" ...
- Python语言认识和实用工具(1)
目录 1. Python语言概述 2. Python使用注意事项 3. Python学习工具 1. Python语言概述 Python是一种计算机程序设计语言.是一种动态的.面向对象的脚本语言,语 ...
- 如何使用qtp12 utf进行功能测试
首先,按照本博客的安装教程走的,右键管理员运行 接下来点击继续,这个界面只需要勾选到web即可 点击ok,开始运行 进入到主界面之后,file新建一个测试. 可以修改路径等等 点击create之后,出 ...
- no projects are found to import
从svn上导出的项目在导入Eclipse中常常出现 no projects are found to import . 产生的原因是:项目文件里中没有".classpath"和&q ...
- HDU 1198 Farm Irrigation (并查集优化,构图)
本题和HDU畅通project类似.仅仅只是畅通project给出了数的连通关系, 而此题须要自己推断连通关系,即两个水管能否够连接到一起,也是本题的难点所在. 记录状态.不断combine(),注意 ...
- 6581 Number Triangle
6581 Number Triangle 时间限制:500MS 内存限制:1000K提交次数:57 通过次数:47 题型: 编程题 语言: G++;GCC Description 7 3 8 8 ...
- SQL SERVER的浮点数类型及与C#的对应关系
SQL SERVER: float 与 real 7位数或15位数.这里说的位数,不是指小数位,而是包括整数和小数在内的位数. float的位数是多少,要看float[(n)]里的n数值是多少. n ...