前言
最近百度再次升级新首页，UI大赞，连新首页的介绍页也显得高大上，使用单页滑动OnePage效果。如果你使用账号登陆百度首页，会陆续收到升级的通知。然后在引导页，发现了一个用户体验上的创意，就是结合CSS3实现晃动的引导箭头。
Demo
预览：http://xuanfengge.com/demo/201406/guide/
效果图：
CSS3 box-shadow快速教程
前言
形象生动的动画展示box-shadow用法。
简介
box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用，盒阴影、按钮状态等各种地方都有用到，但是你了解并记住各个参数的作用及用法吗？
展示
源码：http://codepen.io/yisi/pen/sDBwC
语法：http://www.w3cplus.com/content/css3-box-shadow
动图：
使用技巧
2014/05
23 周五
用CSS3变形创建半圆形导航
前言
不知大家有没有注意本站的文章页，底部有个白色半圆文章小工具。如果觉得有兴趣学习制作方案，可以继续往下看。
在这个教程中，我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式，讲解背后的数学知识和简单的逻辑，让你对这技术有清晰的认识。
正如我提到的，使用CSS变形创建样式，会用到相关的基础数学知识。但是不必担心， 用到的数学非常简单，我会带你一步步地客克服它。
我要指出原技术属于Ana Tudor。我把它修改成我想要效果，这也是我希望你的在教程结束时去做的：对这技术有深入而且清晰的认识，开始查阅资料并且构建自己的样式。
效果
demo：http://tympanus.net/Tutorials/CircularNavigation/
download：http://tympanus.net/Tutorials/CircularNavigation/CircularNavigation.zip 查看全文
2014/05
17 周六
PFold-实现纸张展开/折叠效果
前言
这是一个可以使得元素拥有像纸张一样的展开特效来显示更多内容的高度实验性jQuery插件。其中展开方向的步骤和数量都可以用参数指定。
简介
PFold是一个可以使得元素像纸张一样展开效果的高度实验性插件。一个元素使用3D效果来展开展示更多其他内容。这个效果的实现原理是，一个元素有许多层次的折叠，其中每展开一次。元素的高宽都成倍增加，所以可以模仿一张已折叠的纸张的展开效果。
有很多参数提供选择，如每个展开/折叠步骤的方向和步数。
对于不支持CSS 3D transforms 、 transitions的浏览器，这里会提供一个回调的方法，也就是直接显示大页面，没有过渡的效果。
Demo及源码
社招页效果
预览：http://xuanfengge.com/demo/201404/Pfold/
源码：https://github.com/xuanfeng/Pfold
浏览不同配置下的3个demos
2014/04
13 周日
一眼辨别Chrome还是IE及其版本
通过一个用CSS3绘制的叮当猫页面的展示，辨别你正在使用的浏览器，仅供娱乐~
demo
demo1：http://xuanfengge.com/demo/201403/ie/css3-ie.html
demo2：http://xuanfengge.com/demo/201403/ie/ie.html
英文原版：http://purecss3.net/doraemon/doraemon_css3.html（需翻墙）
本页面用于测试各个浏览器对CSS3 的解释效果，最大的叮当猫并非图片，而是纯CSS 。目前各个浏览器对CSS3 的支持效果不一样，其中IE系的浏览器支持效果最差。 查看全文
2014/03
22 周六