Hero images 给响应式设计提出了独特的挑战。在最近的响应式图片核查期间，我们发现了一个独特的解决方法，一个我想要分享的方法。直到几年前，我都不熟悉Hero image这个术语。一个就职于大公司的朋友用这个术语，我不得不问这个是什么意思。我不知道这是不是一个常见的描述因为我与世隔绝了。或者这可能是大公司的术语。

从步入社会算起到今天，风风雨雨走过了15个年头，望着天空，掐指一算，从事前端已近五个年头。也算三分之一的时间在做前端，也是从事过时间最久的一份工作。问我为什么能做这么久？其实我也时常问自己，怎么就进前端这个行当，怎么就整了五年。正如网上所言，一入前端深似海。玩了五年，或许后面还会有一个五年，两个五年，或许...... 未来的路，谁与说不清楚，我只想每天走好自己想走的路。

本来要管理Rhythm排版一致不是一件易事，响应式中的Rhythm排版就更加困难。幸运的是，Sass的Map可以更好的管理和实现响应式排版。有各种各样的方法来处理响应式排版和Vertical Rhythm，并不局限于我的建议。然而，这是我很多次工作中总结出来的经验之谈。

本文是为帮助您入门和熟悉CSS动画而编写的，使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中，但是如今它已经有大量的内容可以供我们使用了。对我而言，CSS动画最令人激动的事情之一是，我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS，您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够，这是一个非常大的加分！无论你只是添加一点点引人注目的设计细节，还是添加非常多的动画，都没有问题。

Sprite(雪碧图)在Web运用中已不是新技术，但大部分同学都还停留在位图的Sprite运用，比如.png图的合成。而这种技术对于现在的Web页面而言并不完美，比如位图在Retina屏幕带来的图标不清晰等现像，是我们技术人员必须面对的一件事情。而今天要说的，就是如何避开使用位图制作Sprite，来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。

经过近20年的发展，如今的网页排版，以其高密度的显示以及OpenType功能的支持，离现实世界的印刷排版仅是一步之遥。但是平面设计还是有一个领域，我们还在不断地fall back到使用位图，而不是使用单纯的文本：字体显示，如说明性的、绚丽的、戏剧性的、俏皮的、试验性的或料想不到的艺术字母。

嗨，各位，又到了周末总结时间！得益于大量的 Grunt 和 Gulp 插件，我们可以轻松实现网站数据的可视化，虽然深入理解这些工具还比较困难，但分门别类的将它们列出来，也是很有帮助的。

在现代浏览器中可以使用mix-blend-mode和background-blend-mode属性实现Photoshop中的图层的混合模式。属性值有lighten、multiply和hard-light等，这些属性在CSS中运用效果和Adobe Photoshop效果完全一样。即使每天都在Photoshop中使用它们，但了解混合模式的人相对较少。在这篇文章中，我将介绍基本的混合模式是什么，它们是如何工作的？

Marie Mosley和他的朋友刚刚在Almanac改动了text-decoration的属性。你可能了解这个属性。例如，很多浏览器在链接处默认text-decoration: underline即添加下划线，当然，你也可以设置 text-decoration: none删除下划线。但你有可能不知道这个属性还可以做很多事情，并且使用各种子属性可以实现更多细致的样式。

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