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判断IE浏览器各种版本问题
<!--[if IE 6]> IE 浏览器版本 6 <![endif]--> <!--[if IE 7]> IE 浏览器版本 7 <![endif]--& ...
- AtCoder ABC 076D - AtCoder Express
传送门:http://abc076.contest.atcoder.jp/tasks/abc076_d 本题是一个运动学问题——匀变速运动. 一个质点,从静止开始运动.按照速度限制,可将运动划分成n个 ...
- 洛谷 P2712 摄像头
题目描述 食品店里有n个摄像头,这种摄像头很笨拙,只能拍摄到固定位置.现有一群胆大妄为的松鼠想要抢劫食品店,为了不让摄像头拍下他们犯罪的证据,他们抢劫前的第一件事就是砸毁这些摄像头. 为了便于砸毁摄像 ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- javascript基础篇--function类型(上)
在js中,function类型实际上是对象,每一个函数都是function类型的一个实例.并且与其它引用类型一样具有属性和方法. 声明 1普通方式 Function sum(num1,num2) { ...
- 2015年北京大学软件project学科优秀大学生夏令营上机考试---C:单词翻转面试题
题目描写叙述:翻转句子中单词的顺序.但单词内字符的顺序不变.句子中单词以空格符隔开. 为简单起见,标点符号和普通字母一样处理.如:"I am a student."翻转成" ...
- UI 经常用法总结之--- UIWindow UIView (不断更新中)
UIWindow (UIView) 1.创建一个uiwindow对象 self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScr ...
- WebRequestSugar
用法 WebRequestSugar ws = new WebRequestSugar(); //可选参数 //ws.SetAccept //ws.SetContentType //ws.SetCoo ...
- 【NOIP 2011】 Mayan游戏
[题目链接] https://www.luogu.org/problemnew/show/P1312 [算法] 深度优先搜索 [代码] #include<bits/stdc++.h> us ...
- [源码管理] Windows下搭建SVN服务器
前文所述SVN客户端使用的时候,用的SVN服务器通常为外部,例如Google Code的服务器,不过,做为一个程序开发人员,就算自己一个人写程序,也应该有一个SVN版本控制系统,以便对开发代码进行有效 ...