华灯初上，窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你，望着雨中的夜色，是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。这里仅是用CSS技术来演示这样的一个场景，可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果，将使用到HAML和Sass。

在众多浏览器刚刚支持 CSS 的时候，我就已经开始使用它了，并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候，浏览器之间的兼容性虽然不好，但我仍然热衷于尝试层出不穷的新特性。最近几年在 CSS 领域，我们看到了许多重大进展。其中，web 字体、渐变、阴影和媒体查询已经成为了我们日常工作流的必备工具。CSS 布局的未来看起来一片大好。在这篇文章中，我将会介绍 CSS 规范中一些激动人心的布局模块。在未来，我们可以更有效地实现网格布局，更轻松地创建等高列或者均匀分配内容到整个页面。类似 Adobe 的公司往往熟悉布局设计的细节，借助它们的帮助来制定相关规范，我们就能更准确地控制页面在浏览器上的显示方式，同时避免对页面内容的影响。

在我的关于CSS字体大小的文章中，我写了关于（相对的）新的视窗单位。这些单位vw,vh,vmin,和vmax都是基于浏览器视窗(Viewport)的大小的。因为它们的实际大小是根据视窗(Viewport)大小改变的，对于响应式设计中这使它们成为很好的单位。虽然在我以前的文章中我反对使用这些单位定义字体大小，但是用它们定义布局元素是非常有用的。

我们很容易无法摆脱的使用我们所熟悉的CSS技术，当新的问题出现，这样会使我们处于不利的地位。随着Web继续的发展，对新的解决方案的需求也会继续增大。因此，作为网页设计师和前端开发人员，我们别无选择，只有去了解我们的工具集并且熟悉它。这意味着我们还要了解一些特殊的工具-那些不经常使用的，但是当需要它们的时候，它们恰恰是最正确的工具。今天，我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位，就像像素或者相对单位,但是很可能你从来没听说过它们！让我们一探究竟吧。

这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上，使用CSS动态改变背景图的位置，并且加上一些线性效果。

推特最近更新了他们的点赞按钮，使用了全新的动画，而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions。今天使用CSS动画的steps方法来重建这个动画。

SVG的viewBox属性是SVG最强大的特性之一。掌握好这个属性可以让你的SVG技能更上一层楼。特别是考虑到几个主要的SVG sprite技术也是依赖这个属性来工作的。因为viewBox属性可以用来裁剪和扩展SVG画布，它可以用于art-directing的SVG——使用它来裁剪SVG中你想要展示的区域。在这篇文章中，我想要就我们如何使用它来提一些建议，帮助你节省一些时间来做它，然后展示viewBox属性在CSS中的重要性，希望本文能够成为一个实际案例，能帮助推动这个旧的SVGWG提案的前进。

内容过滤是一个在Web上常见的一个功能，特别是在电商网站上，为了让用户过滤内容，仅显示符合自己的要求的内容。当初实现这样的一个功能，需要依赖于JavaScript或者jQuery插件来完成，所幸的事，今天我们可以仅使用CSS来实现一个类似的功能，当然比使用JavaScript做的功能简单一些，但这种案例可以拓展我们的思路。感兴趣的同学，不仿自己动手做做。

视窗(Viewport)单位已经有了好几年了，但我们并没有看到它被经常使用。它们现在正在被所有的主流浏览器所支持并提供独特的功能使它在特定情况下非常有用，特别是那些涉及响应式的设计。

每年，苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。每一年的这个时候，他们都会制造出很多新创意，今年，我被一个用简单圆圈和形状制作出来的图标所惊艳，于是我决定用HTML和CSS来实现它。