我已经在过去做了很多的复古照片效果的教程，但他们都已经完成使用Photoshop。与一些很酷的新CSS3特性玩弄后，我成功地创建只使用CSS的一个相当不错的寻找复古风格的影像效果。使用CSS渐变和过滤器的帮助，让我们来看看怎一个爽复古照片效果可以直接在浏览器中创建。
CSS的复古照片效果
这个小小的技术使用CSS渐变和过滤器的组合来组合各种颜色的叠加来创建典型的老学校的模拟照片效果。目前，CSS滤镜只能在Webkit的浏览器（Safari浏览器，Chrome浏览器），但它不会很长，直到这个有趣的小技巧可以在所有浏览器中付诸实践。
如何创建一个CSS的复古照片效果
<div class="retro"> <img src="images/retrofy-me.jpg" alt="Retro is cool!" /> </div>
为了营造出复古照片效果，我们首先需要的照片。将图像添加到一个HTML文件，你通常会。一些CSS效果依赖于一个块元素的容器，所以图像会必须是内<DIV>或<P>。
.retro {
-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
display: table;
}
.retro img {
-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
position: relative; z-index: -1;
}
在CSS中添加上面的代码来快速创建任何图像凉爽的复古效果。眼见为CSS滤镜目前只能工作在Webkit的浏览器，其他厂商的前缀已省略保持示例干净整洁。不要忘了，如果你想将来保护您的工作添加的每个CSS规则的标准， - 万盎司的变种。
它是如何工作的
CSS的开始与box-shadow使用值规则inset 0px 0px 100px rgba(0,0,20,1);。这将创建一个深蓝色内发光效果来模拟一个小插曲。问题是这样的框阴影将出现在图像的下方，并横跨整个页面。为了解决这个问题的position: relative; z-index: -1;被添加到图像下来发送一个水平，而显示器：表;折叠以适合图像尺寸的格。
接着，第一两个背景梯度被添加到父div。- WebKit的线性梯度（顶部，RGBA（255,145,0,0.2）为0％，RGBA（255,230,48,0.2）60％）创建一个垂直梯度从橙色流到黄色。的RGBA值则允许的颜色的不透明度被降低到允许的梯度作为一个颜色叠加。
第二梯度--webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%)被添加到父div和从50％流向0％的红色，并且在倾斜20°，以模拟一个很酷的漏光效果。
的影响到目前为止工作到一定程度，但使图像看起来非常平坦。值得庆幸的是，我们现在有一堆的CSS滤镜玩弄，以改变实际图像的外观：-webkit-filter: brightness(10%) contrast(130%) sepia(20%);。声明都相当自我解释，但亮度财产颠簸了图像的亮度（10％）。对比暗，暗区和减轻光区域所带来的平面图像起死回生。然后棕褐增加了一个淡黄色，棕色调的形象，但只使用20％有助于保留一些原来的颜色。当所有的渐变和过滤器结合它创建了一个很酷的效果几乎相同，有什么可以在Photoshop中创建（只要我们有可用的混合模式，如屏幕或柔光！）。