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 ...
随机推荐
- AtCoder Grand Contest 021完整题解
提示:如果公式挂了请多刷新几次,MathJex的公式渲染速度并不是那么理想. 总的来说,还是自己太弱了啊.只做了T1,还WA了两发.今天还有一场CodeForces,晚上0点qwq... 题解还是要好 ...
- 自定义数据类型使用QVariant转换的方法
QVariant类型的放入和取出必须是相对应的,你放入一个int就必须按int取出,不能用toString(), Qt不会帮你自动转换. 数据核心无非就是一个 union,和一个标记类型的type:传 ...
- [luogu1627 CQOI2009] 中位数 (乱搞)
传送门 Solution 好水的题(ーー;) Code //By Menteur_Hxy #include <map> #include <queue> #include &l ...
- Bootstrap关于表单控件(Radio,CheckBox)
表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...
- 浅谈 Mysql
数据库一些基本的概念 Mysql 基础操作 Mysql 数据类型 Mysql 表的完整性约束 Mysql 表的操作 Mysql 数据增删改查语句 Mysql 多表查询 Mysql 索引原理及分类 My ...
- hashlib模块 简单了解
import hashlib '''不可逆加密''' password = 'wwwwww7777'.encode('utf8') word = hashlib.md5(password) # md5 ...
- Mysql学习总结(38)——21条MySql性能优化经验
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情. 当我们去设计数据库表结构,对操作数 ...
- ZOJ 2699 Police Cities
Police Cities Time Limit: 10 Seconds Memory Limit: 32768 KB Once upon the time there lived a ki ...
- 0123简单配置LNMP
简单配置LNMP不怕出现错误,就怕错误不知道出现在哪里?看日值tail -f /var/log/message -- 系统整个的日志tail -f /var/log/nginx/error.log - ...
- linux 7.2 下安装maven
由于现有项目采用maven打包所以需要安装maven 1.创建目录 mkdir /maven cd /maven 2.下载解压maven,这里选择maven版本为3.5.3 wget http://m ...