老外的演示文档简单生动有趣，以前企鹅团队层翻译过一篇过于line-height的文档，很是不错，我是从中学到了不少东西。这两天，我也抽空翻译个风格类似的文档，是关于CSS继承的，虽然内容比较基本，但是看看还是会有不少帮助的。学习腾讯团队的做法，我也将翻译编辑好的PDF传到了slideshare上，以方便大家的分享与学习。
“CSS相关”目录存档
CSS实现跨浏览器的box-shadow盒阴影效果(2)
2010年07月27日，星期二我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”，本文虽然题目类似，但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜，但是使用的是shadow滤镜，这种滤镜的效果很牵强，效果过渡不自然，而本文实现的IE下的盒阴影效果就相对非常自然，而且还支持内阴影的UI表现。
本文提供各个效果截图，提供丰富飞实例以及代码展示，希望能对您的学习有所帮助。
PIE使IE支持CSS3圆角盒阴影与渐变渲染
2010年07月23日，星期五
本文将详尽的展示让IE浏览器（IE6/IE7/IE8）支持常见CSS3属性的又一个方法。主要包括CSS3 border-radius圆角，box-shadow盒阴影，以及背景色渐变等。使用简单，资源开销也相对较小。
本文提供丰富的效果截图，代码展示。提供源文件打包下载，同时制作了大量的demo，以及实例演示。并对可能存在的一些问题进行的介绍与分析，希望可以对您的学习有所帮助。
我是如何对网站CSS进行架构的
2010年07月13日，星期二本文将展示我是如何对网站的CSS进行架构的，表达能力有限，尽量展示自己的想法，观点。本文可谓将之前一些列的CSS内容作了个简短的总结，从css rest，CSS 库，到自适应布局，到代码的分离与合并等。提供必要的图片，代码展示，以及一些源文件下载。
说实话，全然套用我展示的这套架构会由于不熟悉或是掌控不够而产生问题，但是，里面一些概念，一些思想应该能有一定的启示作用的。
另外，我只是个初出茅庐的小生，我知道，很多真正功力深厚的前端开发人员有着更好的更广泛适应的前端架构，如果您有幸来到这里，欢迎分享您的一些见解与认识。还有，文中若有您觉得不合理的观点，也非常欢迎指正。我们需要在不断的交流中提高的。
CSS的样式合并与模块化
2010年07月8日，星期四
CSS样式分离之再分离
2010年07月8日，星期四
我从以前讲布局思想，讲无CSS rest，到现在的CSS样式分离之再分离，以及后面的CSS架构，都是一个体系里面的。我清楚的指导，这些东西，其实很多优秀的前端人员也是知道一二，或是比我理解更深刻的。但是，对于大多数同行而言，可能认为我“又在挑刺”，其实不然。
我把我自己的理解讲出来，是希望让您知道，现在绝大多数的CSS写法，架构都是有很多不足的，缺少创新。我就这么跟您说吧，您所做的任何项目，其实根本只要一个CSS文件就足够，您要是真的通透了CSS的“分离”、“架构”，即使这个网站项目有100个页面（风格统一），您也可以只使用一个CSS页面，并且可以控制CSS文件（未压缩）在40K以下。
我是自信可以这么实现的。我最近做的项目50多个页面，未压缩（含大量注释，竖排）的CSS文件，就30K左右，服务器端压缩后仅11K左右，同时网站整站自适应，从内容到各个按钮，导航，全部宽度自适应，兼容性良好….
CSS3 text-fill-color简介及应用展示
2010年06月26日，星期六本文内容并不多，主要就是简单介绍下CSS3的text-fill-color属性，并举例展示其应用。展示，如果利用CSS3的text-fill-color属性实现效果精湛的文字遮罩渐变动画效果。提供必要的截图，代码展示，以及视频动画消失。希望能对您的学习有所帮助。
使用CSS实现Photoshop选区效果及应用
2010年06月24日，星期四
本文主要内容是展示于讲解一种不错UI效果的实现，这个UI效果就是photoshop的选区效果。提供截图展示，提供原理动画演示，相信您会很快了解这类效果的实现方法的。另外，文章的后半部分列举了此效果的一些应用，希望能对开通您的思维提供帮助，利用这种UI效果实现更多精湛的web设计。
CSS渐变图片背景下高度亦自适应按钮
2010年06月21日，星期一
本文将介绍一种效果精湛，兼容性强，扩展性强，易上手易理解的按钮实现方案，此按钮与以往介绍的按钮一样，也是高宽自适应，可与图片混排，受控于text-align属性。但是这里的代码更加精简易懂，更符合主流与开发者的习惯。
本文提供必要的截图，提供Demo页面，以及代码展示，并对代码做了一定的讲解，希望能对您的学习有所帮助。
页面可用性之浏览器默认字体与CSS中文字体
2010年06月19日，星期六本文主要阐述我们绝大多数开发人员可能会忽略的不知道的一个用户体验与页面可用性的一个问题，截图丰富，没有Demo，下面为文章内容摘要，相信会对您的进步提供一点帮助的。
我们可能仅仅是忽略而已，仅仅是不知道而已！对于中文网站，我们的用户绝大多数是中文用户，在页面上设置中文字体属性(宋体/simsun)会降低页面的可用性和潜在的用户体验。如今的web，好的产品往往是可以满足用户的个性需求和自主能动性。页面上中文字体的设置会扼杀浏览器的默认中文字体，无法让用户以自己喜欢的中文字体显示。所以，我个人的倾向是，不要再CSS中，至少在body/html这类标签上设置中文字体。
我本想把本文的题目定为“不要再CSS中定义中文字体”，这样的题目更有噱头，但是……（我要转折）。因为我突然想到，有些网站就是不让你使用您自己定义的字体，比如网站可能会使用“微软雅黑”与“宋体”来区分中文与标题，如果网站中文字体可以提过浏览器自定义，例如“微软雅黑”，则标题与正文字体一致，反而增加了阅读浏览负担，降低了用户体验。
所以，到底哪种做法更好，要看实际的情况，合适的往往是最好的。但是，您需要知道：在CSS中设置中文字体会让中文用户无法通过修改浏览器默认字体来按照自己的需要浏览网页。至于具体您会怎么做，那就看您自己了……
我的应用
我的应用