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

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

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

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

为了提高码农的开发效率，现在在线上有很多在线小工具，这些小工具可以帮助大家快速实现自己需要的效果，并且可以生成可用代码。前几天看到一个制作三角的小工具，尝试着使用Sass来将其转换成可用的混合宏。尝试成功，来说说怎么实现的。其实只要你有时间，很多小工具都可以用类似的方法来实现。

前几天有位同学问过一个问题，<li>元素中的子元素浮动（float:left）之后，列表的项目符号会跑到浮动元素的后面。这个问题似乎在三年前碰到过，但又有那么点不一样。后来查阅相关文档，了解到，造成这个问题就是列表中的::marker造成。虽然将来能解决，但在浏览器还没有支持这个属性之前，我们也只能另寻途径，先解决问题，感兴趣的同学可以先跟我一起初探::marker。

今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说："为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。"姐姐的一句话让我汗颜，我还在思考着如何让Sass来写Gradient，或者类似这样需要带前缀的CSS3属性。也这样让我在思考，那么有了Autoprefixer这样的后处理，Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么？我们一起来开启今天有关于CSS3前缀的探讨。

随着2015年的跨年钟声的响起，2014已成为我们的过去。即将要为之奋斗的是2015。其实想在2014年写这篇总结文章，但由于最近很多事情给耽搁了，其实也有点不知道做什么样的一个总结，因为总感觉2014年就这样匆匆离我而去。有些许的伤感，或许是因为年纪越来越大的缘故吧。不过跟着一群比自己小一轮甚至更多岁数的年轻人在一起共事、一起学习，还是让自己觉得，我也还是很年轻的（可以叫我叔，但别喷我）。

今天可算是执笔开始写这篇文章了。在继续写下去之前，我要先感谢@娜姐、@裕波和@林毅一直以来让W3cplus能在社区活动中露脸。同时也要非常感谢@w3cplus的爱好者，支持者一路以来的支持与鼓励，正因为有了你们，她才能走到现在，才能成长，才能美丽动人。

SVG其实相当于一块画板，然后在这块画板上绘图形，而每个画板都会有一个坐标系统。比如说画板的原始起点，绘制图形的起始点坐标，终点坐标等。这一切的一切都离开不坐标，而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲，最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统（当前用户坐标系统）。例如，一个<svg>中使用<circle>绘制的一个圆，他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。

在《SVG简介与嵌入HTML页面的方式》简单的介绍了什么是SVG？以及SVG图形与其它格式图像相比，优势在哪。另外介绍怎么将SVG图像应用到HTML页面，让浏览器能显示。从文中了解到，SVG图形其实就是一段XML代码，在HTML页面引用是通过引用.svg文件格式，或者直接在.html文件中放置<svg>元素。而两者最大的区别就是，独立的SVG必须添加一个XML声明。那么这篇文章要和大家一起探讨的就是SVG文件(.svg)的结构。